var InqueSlideShow = {
	
	//defines the location of the configurations xml file
	CONFIGURATIONS_FILE_URL: "plugins/InqueSlideShow/configurations.xml",
	
	/****
	 * The following should not be modified, all settings are loaded from the xml file
	 * as links above
	 ****/
	
	//stores the displaying category of images
	categories: [],
	
	//stores if the images are ordered as defined in xml
	shuffle: -1,
	
	//amount of time for transition in ms
	transitionTime: -1,
	
	//amount of pause time for each image in ms
	pauseTime: -1,
	
	//stop the slide show when user mouses over
	stopOnMouseOver: -1,
	
	//display the caption as defined in xml
	showCaption: -1,
	
	//stores all the requested images
	images: [],
	
	//DOM object that contains the whole slide show
	container: null,
	
	//stores the index of the current image being displayed
	currentIndex: -1,
	
	//stores the slideshow timer id
	timerid: -1,
	
	//defines the size of the thumb buttons
	thumbSize: -1,
	
	//defines the margin between thumbs
	thumbMargin: -1,
	
	//defines the border width of a thumb
	thumbStrokeWidth: -1,
	
	/**
	 * initializes the slide show by passing in a string of the categories to be displayed
	 * accepts a string with the comma as delimiter, empty string will grab all available images
	 * ex: "web, mobile, process"
	 * @param {Object} categories
	 */
	createSlideShow: function(containerId, categories) 
	{
		InqueSlideShow.setCategories(categories);
		InqueSlideShow.getConfigurations();
		InqueSlideShow.createContainer(containerId);
		InqueSlideShow.createThumbs();
		InqueSlideShow.showImage(0); //show the first image
		InqueSlideShow.startTimer();
	},
	
	/**
	 * create the container for the slideshow
	 * @param {Object} containerId
	 */
	createContainer: function(containerId) 
	{
		$(containerId).html("");
		var container = $("<div/>").attr("id", "slideshow");
		InqueSlideShow.container = container;
		$(containerId).append(container);
		
		$(container).hover(function(){
			if(InqueSlideShow.stopOnMouseOver){
				InqueSlideShow.stopTimer();
			}
		}, function(){
			if (InqueSlideShow.stopOnMouseOver) {
				InqueSlideShow.startTimer();
			}
		});
		
		var h = $(container).height() - InqueSlideShow.thumbSize + "px";
		var nextBtn = $("<div/>").attr("id", "next_btn").addClass("nav").css("height", h);
		var prevBtn = $("<div/>").attr("id", "prev_btn").addClass("nav").css("height", h);
		$(container).append(nextBtn).append(prevBtn);
		
		$(nextBtn).click(function(){
			InqueSlideShow.showNextImage();
		});
		$(prevBtn).click(function(){
			InqueSlideShow.showPrevImage();
		});
	},
	
	/**
	 * create thumb buttons which when clicked will display a specific image
	 */
	createThumbs: function() 
	{
		var marginL = -((InqueSlideShow.thumbSize + InqueSlideShow.thumbMargin*2) * InqueSlideShow.images.length) / 2;
		var thumbContainer = $("<div/>").attr("id", "thumb_container")
				.css("height", InqueSlideShow.thumbSize)
				.css("margin-left", marginL);
		$(InqueSlideShow.container).append(thumbContainer);
		
		for(var i=0; i<InqueSlideShow.images.length; i++){
			var image = InqueSlideShow.images[i];
			var thumb = $("<div/>").attr("id", i).addClass("thumb")
				.css("width", InqueSlideShow.thumbSize - InqueSlideShow.thumbStrokeWidth*2 + "px")
				.css("height", InqueSlideShow.thumbSize - InqueSlideShow.thumbStrokeWidth*2 + "px")
				.css("margin", "0px " + InqueSlideShow.thumbMargin + "px")
				.css("-moz-border-radius", InqueSlideShow.thumbSize + "px")
				.css("border-radius", InqueSlideShow.thumbSize + "px")
				.css("border-width", InqueSlideShow.thumbStrokeWidth + "px");
				
			$(thumbContainer).append(thumb);
			$(thumb).click(function(){
				var id = $(this).attr("id");
				InqueSlideShow.showImage(id);
				InqueSlideShow.stopTimer();
				InqueSlideShow.startTimer();
			});
		}
	},
	
	/**
	 * show the selected thumb button
	 * @param {Object} index
	 */
	selectThumb: function(id)
	{
		$("#slideshow .thumb").removeClass("selected");
		$("#slideshow .thumb#" + id).addClass("selected");
	},
	
	/**
	 * start the timer that will flip through images
	 */
	startTimer: function() {
		InqueSlideShow.timerid = setInterval(function(){
			InqueSlideShow.showNextImage();
		}, InqueSlideShow.pauseTime);
	},
	
	/**
	 * stop the timer
	 */
	stopTimer: function() {
		clearInterval(InqueSlideShow.timerid);
	},
	
	/**
	 * sets the category by parsing the string
	 * @param {Object} categories
	 */
	setCategories: function(categories) {
		categories = categories.replace(/ /g, "");
		var catArr = categories.split(",");
		
		//only add category if it's not empty string
		for(var i=0; i<catArr.length; i++)
		{
			var category = catArr[i];
			if(category.length > 0){
				InqueSlideShow.categories.push(category);
			}
		}
	},
	
	/**
	 * fetches the configurations file, done asynchronously 
	 * because slideshow cannot function without configurations
	 */
	getConfigurations: function() {
		$.ajax({
		   type: "GET",
		   url: InqueSlideShow.CONFIGURATIONS_FILE_URL,
		   async: false,
		   success: function(msg){
		   		InqueSlideShow.setConfigurations(msg);
		   }
		 });	
	},
	
	/**
	 * sets the slideshow configurations
	 * @param {Object} xml
	 */
	setConfigurations: function(xml) {
		$(xml).find("configuration").each(function(){
			var property = $(this).attr("name");
			var value = Number($(this).text());
			InqueSlideShow[property] = value == 0 ? $(this).text() : value;
			
			if($(this).text().toLowerCase() == "true" || $(this).text().toLowerCase() == "false")
			{
				InqueSlideShow[property] = $(this).text().toLowerCase() == "true" ? true : false;
			}
		});
		
		var getAll = InqueSlideShow.categories.length == 0 ? true : false;
		InqueSlideShow.setImages(xml, getAll);
	},
	
	/**
	 * sets the requested images from the xml based on user categories
	 * @param {Object} xml
	 */
	setImages: function(xml, getAll)
	{
		InqueSlideShow.images = [];
		$(xml).find("category").each(function(){
			var type = $(this).attr("type");
			var hasMatch = getAll;
			if(!getAll){
				for(var i=0; i<InqueSlideShow.categories.length; i++){
					var category = InqueSlideShow.categories[i];
					if(category == type){
						hasMatch = true;
						break;
					}
				}
			}
			
			if(hasMatch)
			{
				$(this).find("image").each(function(){
					var url = $(this).find("url").text();
					var caption = $(this).find("caption").text();
					var image = {url: url, caption: caption};
					InqueSlideShow.images.push(image);
				});
			}
		});
		
		//shuffle order if shuffle is on
		if(InqueSlideShow.shuffle){
			InqueSlideShow.images.sort(function(){
				return 0.5 - Math.random()
			});
		}
	},
	
	/**
	 * show an image by passing in the index in the array
	 * @param {Object} index
	 */
	showImage: function(index)
	{
		var prevImage = $(InqueSlideShow.container).find(".slide");
		$(prevImage).removeClass("current").addClass("previous");
		
		InqueSlideShow.currentIndex = index;
		var current = InqueSlideShow.images[index];
		var currentImage = $("<div/>").append("<img src='" + current.url + "'/>").addClass("current").addClass("slide");
		$(InqueSlideShow.container).append(currentImage);
		
		//align and resize images/sldies
		var maxH = $(InqueSlideShow.container).height() - InqueSlideShow.thumbSize;
		if(InqueSlideShow.showCaption){
			maxH -= InqueSlideShow.thumbSize + 30;
		}
		maxH += "px";
		var marginL = -$(InqueSlideShow.container).width()/2 + "px";
		$(InqueSlideShow.container).find(".slide").css("height", maxH).css("margin-left", marginL);
		$(InqueSlideShow.container).find(".slide img").css("height", maxH);
		
		//show transitions
		$(currentImage).stop().animate({opacity: 1.0, filter: "alpha(opacity=100)"}, InqueSlideShow.transitionTime);
		$(prevImage).stop().animate({opacity: 0, filter: "alpha(opacity=0)"}, InqueSlideShow.transitionTime, function(){
			$(this).remove();
		});
		
		//update the thumb
		InqueSlideShow.selectThumb(index);
		
		//show caption
		InqueSlideShow.displayCaption();
	},
	
	/**
	 * show the next image in the stack
	 */
	showNextImage: function() {
		InqueSlideShow.currentIndex++;
		if(InqueSlideShow.currentIndex >= InqueSlideShow.images.length){
			InqueSlideShow.currentIndex = 0;
		}
		InqueSlideShow.showImage(InqueSlideShow.currentIndex);
		InqueSlideShow.stopTimer();
		InqueSlideShow.startTimer();
	},
	
	/**
	 * show the previous iamge in the stack
	 */
	showPrevImage: function() {
		InqueSlideShow.currentIndex--;
		if(InqueSlideShow.currentIndex < 0){
			InqueSlideShow.currentIndex = InqueSlideShow.images.length - 1;
		}
		InqueSlideShow.showImage(InqueSlideShow.currentIndex);
		InqueSlideShow.stopTimer();
		InqueSlideShow.startTimer();
	},
	
	/**
	 * show caption of the displaying image
	 */
	displayCaption: function() 
	{
		if(InqueSlideShow.showCaption)
		{
			var image = InqueSlideShow.images[InqueSlideShow.currentIndex];
			
			var bottom = (InqueSlideShow.thumbSize+5) + "px";
			if($("#slideshow #caption").size() == 0){
				var captionContainer = $("<div/>").attr("id", "caption");
				var content = $("<div/>").attr("id", "content");
				var background = $("<div/>").attr("id", "background");
				$(captionContainer).append(background).append(content)
							.css("bottom", bottom);
				$(InqueSlideShow.container).append(captionContainer);
			}
			
			if(image.caption.length > 0){
				$("#slideshow #caption #content").html(image.caption);
				var h = -$("#slideshow #caption").height() + "px";
				$("#slideshow #caption").css("bottom", h).show().stop().animate({bottom: bottom}, 100);
			}
			else{
				$("#slideshow #caption").hide();
			}
		}
	}
	
};