// JavaScript Document

var pmSlideshowPaging = pmSlideshow.extend({
	options: {
		data: {totalImages: 0, totalPerPage: 0, images: [] },	//the array data
		thumbs: [], //storage for small images
		
		playPauseOverlayID: "play_pause_overlay",	//the overlay showing play and pause button for the slideshow
		previousOverlayID: "go_previous",			//the overlay showing the back button for the slideshow
		nextOverlayID: 	"go_next",					//the overlay showing the next button for the slideshow
		pauseOverlayCSS: "pause_overlay",			//the css class to apply when the pause button is visible
		playOverlayCSS: "play_overlay",			//the css class to apply when the play button is visible
		
		pagingLayout: 'vertical',	//Layout type - options are 'vertical', 'horizontal', 'horizontal_wrapped'
		pagingContainerID: 'paging_container',		//the container with all paging elements (thumbnail images + arrows)
		thumbnailContainerID: 'paging_thumb_container',	//the contaienr with only the thumbnail images
		thumbnailsCSS: 'thumbNormal',				//the css class for the normal state thumbnails
		thumbnailsSelectedCSS: 'thumbSelected',		//the css class for the selected state thumbnails
		prevButtonCSS: 'prevButton',				//the css class for previous page button
		nextButtonCSS: 'nextButton',				//the css class for next page button
		leftButtonCSS: 'leftButton',				//the css class for previous page button - to be used for horizotnal layouts
		rightButtonCSS: 'rightButton',				//the css class for next page button - to be used for horizotnal layouts
		upButtonCSS: 'upButton',					//the css class for previous page button - to be used for vertical layouts
		downButtonCSS: 'downButton',				//the css class for next page button - to be used for vertical layouts
		showLog: true
	},
	initialize: function (options){
		var self = this;
		this.setOptions(options);
		this.EL = {};
		
		this.currentPage = null;
		this.pageOfImage = null;
		this.allowPageTurning = true;
		
		//build the array to pass to the slideshow
		this.options.data.images.each(function(image, i){
			self.options.images[i] = image.large;
			self.options.thumbs[i] = image.small;
		});
		
		//========= Slideshow Preparations =======
		this.prepareSlideshow();
		
		//======== The Paging Preparations ======
		this.preparePaging();
		
		//call the original 'initialize' method
		this.parent(options); //will call the previous initialize;
		
		//now create the first page
		this.createPage(1);
		
	},
	prepareSlideshow: function(){
		var self = this;
		
		//Collect the needed elements
		this.EL.playPauseOverlay = $(this.options.playPauseOverlayID);
		this.EL.previousOverlay = $(this.options.previousOverlayID);
		this.EL.nextOverlay = $(this.options.nextOverlayID);
		
		//Attach ckick event to Play | Pause
		this.EL.playPauseOverlay.addEvent("click", function(){
			if (self.timer.active){ //if playing then pause
				self.stop();	
				this.removeClass(self.options.pauseOverlayCSS); //switch the overlay icon to pause
				this.addClass(self.options.playOverlayCSS); //remove the play icon 
			} else { //if paused then start playing
				self.play();	
				this.addClass(self.options.pauseOverlayCSS); //switch the overlay icon to pause
				this.removeClass(self.options.playOverlayCSS); //remove the play icon 
			}
			$clear(this.fadeTimer);
			this.fx.set(1);
			this.fadeTimer = (function(){ this.fx.start(1, .001); }).delay(2000, this);
		});
		
		//Attach click event to Previous
		this.EL.previousOverlay.addEvent("click", function(){
			self.previous();	
		});
		//Attach click event to Next
		this.EL.nextOverlay.addEvent("click", function(){
			self.next();	
		});
		
		//Handle the initial display and animation of the play-pause, next and previous
		var mouseOverInitiated = -1; //start at negative
		
		var initiateMouseOver = function(){
			mouseOverInitiated++; //count up for each animation completion
			
			if (mouseOverInitiated){ //value is greater than 0 now
				self.EL.playPauseOverlay.addEvent("mouseenter", function(){
					if (self.timer.active){ //if playing then pause
						this.addClass(self.options.pauseOverlayCSS); //switch the overlay icon to pause
						this.removeClass(self.options.playOverlayCSS); //remove the play icon 
					} else { //if paused then start playing
						this.removeClass(self.options.pauseOverlayCSS); //switch the overlay icon to pause
						this.addClass(self.options.playOverlayCSS); //remove the play icon 
					}
					this.fx.set(1);
					$clear(this.fadeTimer);
				});
				self.EL.playPauseOverlay.addEvent("mouseleave", function(){
					//this.removeClass("pause_overlay"); //switch the overlay icon to pause
					//this.removeClass("play_overlay"); //remove the play icon 
					//alert('ss')
					$clear(this.fadeTimer);
					this.fx.set(.001);
				});
				
				$$(self.EL.previousOverlay, self.EL.nextOverlay).addEvent("mouseenter", function(){
					this.fx.set(1);
				});
				$$(self.EL.previousOverlay, self.EL.nextOverlay).addEvent("mouseleave", function(){	
					this.fx.set(.001);
				});
			}
		};
		
		//show hte control for a few seconds to start
		this.EL.playPauseOverlay.addClass(self.options.playOverlayCSS);
		this.EL.playPauseOverlay.fx = new Fx.Style(this.EL.playPauseOverlay, 'opacity', {duration:700, onComplete: initiateMouseOver });
		this.EL.playPauseOverlay.fx.start(.001, 1); //show the play pause overlay with an effect
		this.EL.playPauseOverlay.fadeTimer = (function(){ this.EL.playPauseOverlay.fx.start(1, .001); }).delay(2000, this);
		
		//Next and Previous Overlay 
		//show hte control for a few seconds to start
		this.EL.previousOverlay.fx = new Fx.Style(this.EL.previousOverlay, 'opacity', {duration:700});
		this.EL.nextOverlay.fx = new Fx.Style(this.EL.nextOverlay, 'opacity', {duration:700});
		this.EL.previousOverlay.fx.start(.001, 1);  this.EL.nextOverlay.fx.start(.001, 1); //show the play pause overlay with an effect
		(function(){ this.EL.previousOverlay.fx.start(1, .001); this.EL.nextOverlay.fx.start(1, .001); }).delay(2500, this);
		
		
	},
	preparePaging: function(){
		var self = this;
		
		//Collect the elements
		this.EL.pagingContainer = $(this.options.pagingContainerID);
		this.EL.thumbnailContainer = $(this.options.thumbnailContainerID);
		this.EL.thumbnails = this.EL.thumbnailContainer.getElements('.' + this.options.thumbnailsCSS);
		this.EL.prevButton = this.EL.pagingContainer.getElements('.' + this.options.prevButtonCSS).setStyle('visibility', 'hidden');
		this.EL.nextButton = this.EL.pagingContainer.getElements('.' + this.options.nextButtonCSS).setStyle('visibility', 'hidden');
		
		if (this.options.pagingLayout == 'vertical'){
			this.EL.prevButton.inject(this.EL.thumbnailContainer, 'before');
		} else if (this.options.pagingLayout == 'horizontal'){
			this.EL.prevButton.inject(this.EL.thumbnailContainer, 'before');
		} else if (this.options.pagingLayout == 'horizontal_wrapped'){
			$$(this.EL.prevButton, this.EL.nextButton).setStyle('display', 'inline-block')
		}
		
		//var createPage = this.createPage;
		this.EL.prevButton.addEvent("click", function(){
			self.createPage(self.currentPage - 1);
		});
		this.EL.nextButton.addEvent("click", function(){
			self.createPage(self.currentPage + 1);
		});
		
		//Calculate measurements and figures
		if (this.EL.thumbnails.length){
			this.thumbCoords = this.EL.thumbnails[0].getCoordinates();
		}
		
		this.totalImages = this.options.data.images.length;
		this.totalPerPage = this.options.data.totalPerPage;
		this.totalPages = Math.ceil(this.totalImages/this.totalPerPage);
		
		//Now create all the thumbnails and fill the container
		for (var i=0;i<this.totalPerPage-1;i++){
			this.EL.thumbnails[0].clone().inject(this.EL.thumbnailContainer);
		}
		this.EL.thumbnails = null;
		this.EL.thumbnails = this.EL.thumbnailContainer.getElements('.' + this.options.thumbnailsCSS);
		this.EL.thumbnails.setStyles({display: 'none', visibility: 'visible'});
		
		//add the click event to thumbs
		this.EL.thumbnails.addEvent("click", function(){
			self.stop();	
			self.slideTo(this.index);
		});
		
		//format the next/prev buttons for the paging
		if (this.options.pagingLayout == 'vertical'){
			this.EL.prevButton.addClass(this.options.upButtonCSS);
			this.EL.nextButton.addClass(this.options.downButtonCSS);
		} else if (this.options.pagingLayout == 'horizontal' || this.options.pagingLayout == 'horizontal_wrapped'){
			this.EL.prevButton.addClass(this.options.leftButtonCSS);
			this.EL.nextButton.addClass(this.options.rightButtonCSS);
		}
	},
	createPage: function(currPage){
		var self = this;
		if (currPage > this.totalPages) currPage = 1;
		if (currPage < 1) currPage = this.totalPages;
		
		this.currentPage = currPage;
		
		var startImage = (currPage * this.totalPerPage) - this.totalPerPage;
		var endImage = currPage * this.totalPerPage;
		var i = 0;
		//alert(this.images)
		
		//insert the images
		for (i=startImage;i<endImage;i++){
			//get the small image
			var imgSmall = this.EL.thumbnails[i - startImage];
			
			if (i >= this.images.length) { //no image to show
				imgSmall.setStyle('display', 'none');
			} else {
				var img = new Image();
				img.src = this.thumbs[i];
				
				//var imgSmall = document.createElement("img"); 
				//imgSmall.src = arr.images[i].small;
				//alert("url(" + this.images[i].small + ") no-repeat")
				imgSmall.setStyles({
					background: "url(" + this.thumbs[i] + ") no-repeat",
					display: 'block'
				});
				
				imgSmall.index = i;
			}
		}
		
		//check what type of nav link needs to be placed
		var isNext = false; isBack = false;
		(this.totalPages == 1 || currPage == this.totalPages) ? isNext = false : isNext = true;
		(this.totalPages == 1 || currPage == 1) ? isBack = false : isBack = true;
		
		
		//create the back link
		if (isBack){
			this.EL.prevButton.setStyle('visibility', 'visible');
		} else {
			this.EL.prevButton.setStyle('visibility', 'hidden');
		}
		
		//create the next link
		if (isNext){
			this.EL.nextButton.setStyle('visibility', 'visible');
		} else {
			this.EL.nextButton.setStyle('visibility', 'hidden');
		}
		
		//turn on off page turing
		var index = this.curr_index+1;	//get the image sequence no
		var pageOfImage = Math.ceil(index/this.totalPerPage);
		this.pageOfImage = pageOfImage;
		if (pageOfImage == this.currentPage) {
			this.allowPageTurning = true;
		} else {
			this.allowPageTurning = false;
		}
		this.hightlightThumb();
	},
	showImage: function(){
		var self = this;
		
		this.parent();
		this.turnPage();
		this.hightlightThumb();
		
	},
	turnPage: function(){
		var self = this;
		
		//========== page turning feature
		var index = this.curr_index+1;	//get the image sequence no
		var pageOfImage = Math.ceil(index/this.totalPerPage);
		this.pageOfImage = pageOfImage;
		//if (pageOfImage == this.currentPage) this.allowPageTurning = true;
		
		//if a new page is found turn the page
		if (pageOfImage != this.currentPage && this.allowPageTurning){
			self.createPage(pageOfImage);
		}
	},
	hightlightThumb: function(){
		var self = this;
	
		var index = this.curr_index+1;	//get the image sequence no
		var pageOfImage = Math.ceil(index/this.totalPerPage);
		this.pageOfImage = pageOfImage;
		if (pageOfImage == this.currentPage) this.allowPageTurning = true;
		
		//=========== thumbnail highlight feature
		//un highlight the previous thumbnail
		if (this.highlightedThumb){
			this.highlightedThumb.removeClass(this.thumbnailsSelectedCSS);
		}
		//get index of thumb for the current page
		if (pageOfImage == this.currentPage){
			index = this.curr_index - (this.currentPage * this.totalPerPage - this.totalPerPage)
			this.EL.thumbnails[index].addClass(this.thumbnailsSelectedCSS);
			this.highlightedThumb = this.EL.thumbnails[index];
		}
	}
});