/*
	This program is free software, you can redistribute it and/or modify it under the terms 
	of the GNU General Public License as published by the Free Software Foundation, 
	either version 3 of the License, or at your option any later version.

    This program is distributed in the hope that it will be useful, but WITHOUT ANY WARRANTY; 
    without even the implied warranty of  MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  
    See the GNU General Public License for more details.

    A copy of the GNU General Public License can be obtained from http://www.gnu.org/licenses/.
    
    Copyright (c) 2010 JanYii Ltd (contact via http://www.janyii.com/)
	All rights reserved.

*/  
  
/***************************************************************************
						JanYiiGallery
						
Thumbnail images are loaded into a scrolling thumbnail div by the server program.
The script then displays the first thumbnail as the main image.
Other thumbnails can then be selected to become the main image by clicking on them,
or by using the back and forward buttons. There is also a play facility, which
automatically plays the images from start to finish. This play facility can be
stopped using the stop button, or by selecting a specific thumbnail to be displayed.
***************************************************************************/

//Constructor to initialize data and display the first thumbnail as the main image.
function JanYiiGallery(mainImageHeight, stopTitlebeingLink){
		this.thumbnailsDiv;						//Thumbnaile div
		this.mainDiv;							//Main image div
		this.controlsOuterDiv;					//Controls outer div
		this.controlsDiv;						//Controls div (back,forward, play, stop)
		this.thumbNailArray	= new Array();		//Array of thumbnail images
		this.currentThumbnail;					//Thumbnail obj on display
		this.playCount							//Count used to play images;
		this.stopPlay = false;					//Stops the automatic image play;
		this.imageHeight;						//Image height.
		this.stopTitlebeingLink = false;		//Stop Title being link
		
		if(stopTitlebeingLink)
			this.stopTitlebeingLink = true;		
														
		this.thumbnailsDiv = document.getElementById('jy_gallery_thumbnails');
		if(! this.thumbnailsDiv)
			alert ("Error: The 'jy_gallery_thumbnails' element has not been found.");
			
		this.mainDiv = document.getElementById('jy_gallery_main');
		if(! this.mainDiv)
			alert ("Error: The 'jy_gallery_main' element has not been found.");	
			
		this.controlsOuterDiv = document.getElementById('jy_gallery_controls_outer');
		if(! this.controlsOuterDiv )
			alert ("Error: The 'jy_gallery_controls' element has not been found.");			
		
		this.controlsDiv = document.getElementById('jy_gallery_controls');
		if(! this.controlsDiv)
			alert ("Error: The 'jy_gallery_controls' element has not been found.");		
		
		this.controlsDiv.style.display = 'inline';	
		this.controlsDiv.style.visibility = 'visible';	
		this.controlsOuterDiv.style.visibility = 'visible';	
		
		if(mainImageHeight && mainImageHeight >= 1){		
			this.mainDiv.style.height = mainImageHeight + 'px';	
			this.imageHeight = mainImageHeight;
		}	
		else if (window.screen.availHeight > 1024){
			this.mainDiv.style.height = '400px';	
			this.imageHeight = 400;
		}	
		else{
			this.mainDiv.style.height = '300px';	
			this.imageHeight = 300;
		}	

		this.initializeThumbnails(); 
		thisInstance = this;
		document.getElementById('jy_back').onclick = function(){thisInstance.backButtonClick.call(thisInstance);}
		document.getElementById('jy_forward').onclick = function(){thisInstance.forwardButtonClick.call(thisInstance);}
		document.getElementById('jy_play').onclick = function(){thisInstance.playButtonClick.call(thisInstance);}
		document.getElementById('jy_stop').onclick = function(){thisInstance.stopPlayer.call(thisInstance);}
	
		if(this.currentThumbnail){
    		var img = $( '<img id="jy_gallery_main_image" SRC="' + this.currentThumbnail.src + '">');
    		$('#' + this.mainDiv.id).append(img);
    		this.showImage(this.currentThumbnail, null);
    	}	  	
}	

//Iterate through thumbnails which are enclosed by a link element.
//For each thumbnail disable the link and set an onclick event function. 
//Save the image element references in the thumbNailArray.
JanYiiGallery.prototype.initializeThumbnails = function(){	
	var nodeRef = document.getElementById(this.thumbnailsDiv.id);
	var thisInstance = this;
	var index = 0;	
	for(var i=0; i < nodeRef.childNodes.length; i++){
		if(nodeRef.childNodes[i].nodeName.toLowerCase() == 'a'){
			linkNodeRef = nodeRef.childNodes[i];
			linkNodeRef.removeAttribute('href');
			for(var j=0; j < linkNodeRef.childNodes.length; j++){
				if(linkNodeRef.childNodes[j].nodeName.toLowerCase() == 'img'){
					if(!this.currentThumbnail)
						this.currentThumbnail = linkNodeRef.childNodes[j];
					this.thumbNailArray[index] = linkNodeRef.childNodes[j];
					index++;
			 		linkNodeRef.childNodes[j].onclick = function(){thisInstance.thumbnailClick.call(thisInstance, this);}
			 	}	
			}	 
		}		
	}	
}

//On thumbnail click make calls to stop the player and replace the main image.
JanYiiGallery.prototype.thumbnailClick = function (thumbnail){	
	this.stopPlayer();
	this.replaceImage(thumbnail);
}	

//Replace the main image by fading out the current one and 
//setting a timer to call the show image function
JanYiiGallery.prototype.replaceImage = function (thumbnail){		
	
	if(! $.browser.msie)		
		$('#jy_gallery_main_image').fadeOut(1000);	
	else
		$('#jy_gallery_main_image').fadeOut(300);	

	previousThumbnail = this.currentThumbnail;
	this.currentThumbnail = thumbnail;
    thisInstance = this;
	var func = function(){thisInstance.showImage.call(thisInstance, thumbnail, previousThumbnail);}
	if(! $.browser.msie)		
    	var t=setTimeout(func,1000);
    else
    	var t=setTimeout(func,600);	
}

//Show new main image
JanYiiGallery.prototype.showImage = function(thumbnail, previousThumbnail){
	this.removeImageText();
	document.getElementById('jy_gallery_main_image').src = thumbnail.src;   
	document.getElementById('jy_gallery_main_image').height = this.imageHeight;
	thisInstance = this; 
	var func = function(){thisInstance.showImageText.call(thisInstance, thumbnail);}

	if(! $.browser.msie){	
		var t=setTimeout(func,1500);
		$('#jy_gallery_main_image').delay(500).fadeIn(1000);
	}	
	else{
		var t=setTimeout(func,700);
		$('#jy_gallery_main_image').delay(200).fadeIn(400);
	}	
   	this.scroll();
   	setOpacity(thumbnail, 5)
   	if(previousThumbnail && previousThumbnail.id != thumbnail.id)
   		   	setOpacity(previousThumbnail, 10);
}	

//Show image text info
JanYiiGallery.prototype.showImageText = function(thumbnail){
	if(this.stopTitlebeingLink)
		titleHtml = thumbnail.title + '<br>' + ' ' + thumbnail.getAttribute('subtitle');
	else
		titleHtml = '<a href="' + thumbnail.getAttribute('longdesc') + '"> <span id="jy_gallery_title">' + thumbnail.title + '</span></a><br>' + ' ' + thumbnail.getAttribute('subtitle');
	$('#jy_gallery_text').html(titleHtml);
	$('#jy_gallery_text').fadeOut(0);
	$('#jy_gallery_text').fadeIn(500);
}


//Clear image text info
JanYiiGallery.prototype.removeImageText = function(){
	$('#jy_gallery_title').html('');
}	

//Display the previous image, and on reaching the start loop round to the last image
JanYiiGallery.prototype.backButtonClick = function(){
	this.stopPlayer();	
	if(this.thumbNailArray.length < 2)
		return;
		
	for(var i=0; i < this.thumbNailArray.length; i++){
		$obj = 	this.thumbNailArray[i];
		if($obj.id == this.currentThumbnail.id)
		{
			if(i > 0){
				this.replaceImage(this.thumbNailArray[i - 1]);
			}
			else{
				this.replaceImage(this.thumbNailArray[this.thumbNailArray.length - 1]);
			}
			return;			
		}	
	}	
}

//Display the next image, and on reaching the end loop round to the first image
JanYiiGallery.prototype.forwardButtonClick = function(){
	this.stopPlayer();
	if(this.thumbNailArray.length < 2)
		return;
	for(var i=0; i < this.thumbNailArray.length; i++){
		$obj = 	this.thumbNailArray[i];
		if($obj.id == this.currentThumbnail.id)
		{
			if(i + 1 == this.thumbNailArray.length){
				this.replaceImage(this.thumbNailArray[0]);
			}
			else{
				this.replaceImage(this.thumbNailArray[i + 1]);
			}
			return;			
		}	
	}	
}

//Start to show all the images, hiding the play button and calling the play function 
JanYiiGallery.prototype.playButtonClick = function(){
	if(this.thumbNailArray.length < 2)
		return;
	this.playCount = 0;	
	this.stopPlay = false;
	document.getElementById('jy_play').style.display = 'none';
	document.getElementById('jy_stop').style.display = 'inline';
	this.play();	
}

//Display the next image, then set a timer to call this function again to display
//display the following image until all images have been displayed.
JanYiiGallery.prototype.play = function(){
	if(this.playCount ==  this.thumbNailArray.length || this.stopPlay == true){
		this.stopPlayer();
		return;
	}	
	thumbnail = this.thumbNailArray[this.playCount];	
	this.replaceImage(thumbnail);
	this.playCount++;	
	thisInstance
	var func = function(){thisInstance.play.call(thisInstance );}
	var t=setTimeout(func,5000);
}	

//Halt the player
JanYiiGallery.prototype.stopPlayer = function(){
	this.stopPlay = true;
	document.getElementById('jy_play').style.display = 'inline';
	document.getElementById('jy_stop').style.display = 'none';
}	

JanYiiGallery.prototype.scroll = function(){
	divWidth = this.thumbnailsDiv.offsetWidth;
	thumbnailOffset = this.offsetFromLeft(this.currentThumbnail);
	scrollOffset = $("#jy_gallery_thumbnails").scrollLeft();
	
	requiredOffset = thumbnailOffset - parseInt(divWidth / 2);
	if(requiredOffset > 0)		   
		$("#jy_gallery_thumbnails").animate({scrollLeft: requiredOffset},'slow');
	else	
		$("#jy_gallery_thumbnails").animate({scrollLeft: 0},'slow');
}	


JanYiiGallery.prototype.offsetFromLeft = function (thumbnail){
	var offset = 0;	
	for(var i=0; i < this.thumbNailArray.length; i++){	
		if(this.thumbNailArray[i].id == thumbnail.id){
			offset += parseInt( this.thumbNailArray[i].width / 2)		
			return offset;
		}	
		offset += this.thumbNailArray[i].width;	
	}
}	

function setOpacity(obj, value) {
	obj.style.opacity = value/10;
	obj.style.filter = 'alpha(opacity=' + value*10 + ')';
}