/**
 * @author Master
 * 
 *  Images that are not loaded should be hidden.
 *  Transitions should never touch the visibility property of images, but can do anything to the div holders.
 *  
 *  changed 12. may 2010
 *  
 *  depends on resize_image.js
 */

function Slide_Show(name, width, height, imageArrStr, imageURL, transition, loadWheelURL)
{
	this.name = name;
	this.width = width;
	this.height = height;
	this.imagePathArr = new Array();
	this.imagePathArr = imageArrStr.split("|");
	this.imageURL = imageURL;
	this.transition = transition;
	this.loadWheelURL = loadWheelURL;
		
	this.canvas;
	this.imageFrameCurrentImage;
	this.imageFrameTransitionImage;
	this.imageFrameCurrentImageID 		= "imageFrameCurrentImage_" + this.name;
	this.imageFrameTransitionImageID	= "imageFrameTransitionImage_" + this.name;
	this.imageCurrentImage;
	this.imageTransitionImage;
	this.imageCurrentImageID 	= "imageCurrentImage_" + this.name;
	this.imageTransitionImageID	= "imageTransitionImage_" + this.name;
	
	this.canvas = document.createElement( "div" );
	this.canvas.setAttribute( "id", "canvas_" + this.name );
	
	this.imageFrameCurrentImage = document.createElement( "div" );
	this.imageFrameCurrentImage.setAttribute( "id", this.imageFrameCurrentImageID );
	
	this.imageCurrentImage = document.createElement( "img" );
	this.imageCurrentImage.setAttribute( "id", this.imageCurrentImageID );
	
	this.imageFrameTransitionImage = document.createElement( "div" );
	this.imageFrameTransitionImage.setAttribute( "id", this.imageFrameTransitionImageID );
	
	this.imageTransitionImage = document.createElement( "img" );
	this.imageTransitionImage.setAttribute( "id", this.imageTransitionImageID );
	
	this.imageHolderLoadIndicator = document.createElement( "div" );
	this.imageHolderLoadIndicator.setAttribute( "id", "imageHolderLoadIndicator_" + this.name );
	
	this.imageLoadIndicator = document.createElement( "img" );
	this.imageLoadIndicator.setAttribute( "id", "imageLoadIndicator_" + this.name );
	
	this.imageFrameCurrentImage.appendChild( this.imageCurrentImage );
	this.imageFrameTransitionImage.appendChild( this.imageTransitionImage );
	this.imageHolderLoadIndicator.appendChild( this.imageLoadIndicator );
	
	this.canvas.appendChild( this.imageFrameCurrentImage );
	this.canvas.appendChild( this.imageFrameTransitionImage );
	this.canvas.appendChild( this.imageHolderLoadIndicator );
		
	
	this.canvas.style.position = "absolute";
	this.canvas.style.width = this.width + "px";
	this.canvas.style.height = this.height + "px";
	//this.canvas.style.border = "red 1px solid";
	this.canvas.style.overflow = "hidden";
	
	this.imageFrameCurrentImage.style.position = "absolute";
	this.imageFrameCurrentImage.style.zIndex = "0";
	this.imageFrameCurrentImage.style.width = "100%";
	this.imageFrameCurrentImage.style.visibility = "hidden";
		
	this.imageCurrentImage.style.position = "absolute";
	this.imageCurrentImage.style.border = "none";
		
	this.imageFrameTransitionImage.style.position = "absolute";
	this.imageFrameTransitionImage.style.width = "100%";
	this.imageFrameTransitionImage.style.visibility = "hidden";
		
	this.imageTransitionImage.style.position = "absolute";
	this.imageTransitionImage.style.border = "none";
		
	this.loadIndicator = new Image();
	this.loadIndicator.src = this.loadWheelURL;
	
	this.loadingComplete = false;
	this.loadingCurrently = -1;
	
	//this.imageHolderLoadIndicator = document.getElementById("imageHolderLoadIndicator_" + this.name);
	this.imageHolderLoadIndicator.style.position = "absolute";
	this.imageHolderLoadIndicator.style.visibility = "hidden";
	this.imageHolderLoadIndicator.style.zIndex = "2";
	//this.imageLoadIndicator = document.getElementById("imageLoadIndicator_" + this.name);
	this.imageLoadIndicator.style.border 	= "none";
	this.imageLoadIndicator.style.position 	= "absolute";
	this.imageLoadIndicator.src = this.loadWheelURL;
	
	this.currentImage = 0;
	
	this.imageObjectArr = new Array();
	
	for (i = 0; i < this.imagePathArr.length; ++i)
	{
		this.imageObjectArr[i] = new Image();
		//this.imageObjectArr[i].src = "";
	}
}

	
function slide_show_append( parent )
{
	parent.appendChild( this.canvas );
}

function slide_show_remove()
{
	this.canvas.parentNode.removeChild( this.canvas );
}

function slide_show_get_current_image_number()
{
	return (this.currentImage +1);
}

function slide_show_get_total_number_of_images()
{
	return this.imagePathArr.length;
}
function slide_show_set_position(x, y)
{
	this.canvas.style.left = x + "px";
	this.canvas.style.top = y + "px";
}

function slide_show_think()
{
	if (!this.loadingComplete)
		this.preload();
	
	if( (this.imageObjectArr[this.currentImage].src != "" && this.imageObjectArr[this.currentImage].complete) )
	{
		if(this.imageCurrentImage.src != this.imageObjectArr[this.currentImage].src)
			this.change_image();
		this.imageCurrentImage.style.visibility = "visible";
		this.imageHolderLoadIndicator.style.visibility = "hidden";
	}
	else
	{
		this.imageCurrentImage.style.visibility = "hidden";
		
		//positioning the loadwheel
		this.imageHolderLoadIndicator.style.top 		=  ( (this.height/2) - (this.loadIndicator.height/2) ) + "px";
		this.imageHolderLoadIndicator.style.left 		=  ( (this.width/2) - (this.loadIndicator.width/2) ) + "px";
		if(this.loadIndicator.complete)
			this.imageHolderLoadIndicator.style.visibility = "visible";
	}
}

function slide_show_preload()
{
	if( !this.loadIndicator.complete )
		return;
	
	if( this.loadingComplete )
		return;
	
	if( this.loadingCurrently == -1 || this.imageObjectArr[this.loadingCurrently].complete )
	{
		++this.loadingCurrently;
		if( this.loadingCurrently == this.imageObjectArr.length )
		{
			this.loadingComplete = true;
		}
		else
		{
			this.imageObjectArr[this.loadingCurrently].src = this.imageURL + this.imagePathArr[this.loadingCurrently];
			//alert("Now loading: " + this.imagePathArr[this.loadingCurrently]);
			//this.currentImage = this.loadingCurrently;
		}
	}
}

function slide_show_change_image()
{
	
	this.imageFrameTransitionImage.style.visibility = 'hidden';
	this.imageFrameTransitionImage.style.width = '100%';
	this.imageFrameTransitionImage.style.height = '100%';
	this.imageFrameTransitionImage.style.top = '0px';
	this.imageFrameTransitionImage.style.left = '0px';
	this.imageFrameTransitionImage.style.zIndex = '1';
	set_opacity(100, this.imageFrameTransitionImageID);
	
	if( this.imageCurrentImage.src != "" )
	{
		this.imageTransitionImage.src = this.imageCurrentImage.src;
		resize_image( this.imageTransitionImage, this.width, this.height );
		this.imageTransitionImage.style.left = ( this.width - parseInt( this.imageTransitionImage.style.width ) ) / 2 + 'px';
		this.imageTransitionImage.style.top = ( this.height - parseInt( this.imageTransitionImage.style.height ) ) / 2 + 'px';
		
		this.imageFrameTransitionImage.style.visibility = 'visible';
	}
	
	this.imageFrameCurrentImage.style.visibility = 'hidden';
	this.imageFrameCurrentImage.style.width = '100%';
	this.imageFrameCurrentImage.style.height = '100%';
	this.imageFrameCurrentImage.style.top = '0px';
	this.imageFrameCurrentImage.style.left = '0px';
	this.imageFrameCurrentImage.style.zIndex = '0';
	set_opacity(100, this.imageFrameCurrentImageID);
	
	this.imageCurrentImage.src = this.imageObjectArr[this.currentImage].src;
	resize_image( this.imageCurrentImage, this.width, this.height );
	this.imageCurrentImage.style.left = ( this.width - parseInt( this.imageCurrentImage.style.width ) ) / 2 + 'px';
	this.imageCurrentImage.style.top = ( this.height - parseInt( this.imageCurrentImage.style.height ) ) / 2 + 'px';
	
	this.imageFrameCurrentImage.style.visibility = 'visible';
	
	// Do transition here
	this.transition.do_transition(this.imageCurrentImageID, this.imageFrameCurrentImageID, this.imageTransitionImageID, this.imageFrameTransitionImageID);
}

function slide_show_next_image()
{
	this.currentImage++;
	if( this.currentImage == this.imageObjectArr.length )
		this.currentImage = 0;
}

function slide_show_previous_image()
{
	this.currentImage--;
	if( this.currentImage == -1 )
		this.currentImage = this.imageObjectArr.length - 1;
}

Slide_Show.prototype.append 		= slide_show_append;
Slide_Show.prototype.remove 		= slide_show_remove;
Slide_Show.prototype.set_position 	= slide_show_set_position;
Slide_Show.prototype.think 			= slide_show_think;
Slide_Show.prototype.preload 		= slide_show_preload;
Slide_Show.prototype.change_image 	= slide_show_change_image;
Slide_Show.prototype.next_image 	= slide_show_next_image;
Slide_Show.prototype.previous_image = slide_show_previous_image;

Slide_Show.prototype.get_current_image_number = slide_show_get_current_image_number;
Slide_Show.prototype.get_total_number_of_images = slide_show_get_total_number_of_images;

//////TRANSISITION COLLECTION START//////////////
// Should use inheritance
function transition_swap()
{
	this.do_transition = function( currentImageID, currentImageFrameID, transitionImageID, transitionImageFrameID )
	{
		document.getElementById(transitionImageFrameID).style.visibility = 'hidden';
	};
}

function transition_fade_from_background(transitionTime)
{
	this.transition_time = transitionTime;
	this.speed = Math.round(this.transition_time / 100);
	this.timerArray = new Array();
	
	this.do_transition = function( currentImageID, currentImageFrameID, transitionImageID, transitionImageFrameID )
	{
		// Clear all existing timers
		for (i = 0; i < this.timerArray.length; ++i)
		{
			clearTimeout(this.timerArray[i]);
		}
		
		set_opacity(0, currentImageFrameID);
		document.getElementById(transitionImageFrameID).style.visibility = 'hidden';
		
		// Create opacity timers
		var opacity_end = 100;
		var opacity_start = 0;
		var timer = 0;
		
		
		for(i = opacity_start; i <= opacity_end; i++)
		{
			this.timerArray[i] = setTimeout("set_opacity(" + i + ",'" + currentImageFrameID + "')",(timer * this.speed));
			timer++;
		}
		
		/*
		var intervalValue = 10;
		var totalOpacityChange = opacity_end - opacity_start;
		var intervalOpacityValue = totalOpacityChange/ (transitionTime/intervalValue);
		
		this.timerArray[0] = setInterval( "change_opacity( " + intervalOpacityValue + ", '" + currentImageFrameID + "')", intervalValue );
		*/
	};
}

//has a problem in ie - please fix
function transition_cross_fade(transitionTime)
{
	this.transition_time = transitionTime;
	this.speed = Math.round(this.transition_time / 100);
	this.timerArray1 = new Array();
	this.timerArray2 = new Array();
	
	this.do_transition = function( currentImageID, currentImageFrameID, transitionImageID, transitionImageFrameID )
	{
		// Clear all existing timers
		for (i = 0; i < this.timerArray1.length; ++i)
		{
			clearTimeout(this.timerArray1[i]);
		}
		for (i = 0; i < this.timerArray2.length; ++i)
		{
			clearTimeout(this.timerArray2[i]);
		}
		
		set_opacity(0, currentImageFrameID);
		
		// Create opacity timers
		var opacity_end 	= 100;
		var opacity_start 	= 0;
		var timer = 0;
		
		for(i = opacity_start; i <= opacity_end; i++)
		{
			this.timerArray1[i] = setTimeout("set_opacity(" + i + ",'" + currentImageFrameID + "')",(timer * this.speed));
			timer++;
		}
		
		opacity_end 	= 0;
		opacity_start 	= 100;
		timer = 0;
		
		for(i = opacity_start; i >= opacity_end; i--)
		{
			this.timerArray2[i] = setTimeout("set_opacity(" + i + ",'" + transitionImageFrameID + "')",(timer * this.speed));
			timer++;
		}
	};
}

//////TRANSISITION COLLECTION END//////////////

function change_opacity( value, id)
{
	if(document.getElementById(id) == null)
		alert(id);
	var object = document.getElementById(id);
	var currentOpacity = 100 * parseFloat(object.style.opacity);
	var targetOpacityValue = currentOpacity + value;
	set_opacity( targetOpacityValue, id );
	
}

function set_opacity(opacity, id)
{
	
	if(document.getElementById(id) == null)
		alert(id);
	var object = document.getElementById(id).style;
	object.opacity = (opacity / 100);
	object.MozOpacity = (opacity / 100);
	object.KhtmlOpacity = (opacity / 100);
	object.filter = "alpha(opacity=" + opacity + ")";
}

function opacity_fade( id, opacity_start, opacity_end, millisec)
{
	//speed for each frame
	var speed = Math.round(millisec / 100);	
	var timer = 0;

	//determine the direction for the blending, if start and end are the same nothing happens
	if(opacity_start > opacity_end)
	{
        for(i = opacity_start; i >= opacity_end; i--)
		{
            setTimeout("set_opacity(" + i + ",'" + id + "')",(timer * speed));
            timer++;
        }
	}
	else if(opacity_start < opacity_end)
	{
        for(i = opacity_start; i <= opacity_end; i++)
        {
        	setTimeout("set_opacity(" + i + ",'" + id + "')",(timer * speed));
        	timer++;
        }
    }
}