/* Options:
 * 	onChange: function called after slide changes. args: (old_index, index)
 */
function Gallery(name, joptions)
{
	this.name = name;
	//this.options = Object.extend({onChange:Protoype.K}, options);
	this.w = joptions.w;
	this.h = joptions.h;
	this.showTime = joptions.showTime;
	this.fadeTime = joptions.fadeTime;
	this.onChange = joptions.onChange || (function(){});
	this.startTime = new Date();
	this.intervalTime = 40;
	
	this.borderWidth = 2;
	this.frames = 0;

	this.nextInterval = 0;
	this.nextTimeout = 0;
	this.playing = false;
	
	this.i = null;
	this.fadeLevel = 100;
	
	this.gallery = new Array();
	this.add = Gallery_add;
	this.place = Gallery_place;
	this.play = Gallery_play;
	this.pause = Gallery_pause;
	this.next = Gallery_next;
	this.prev = Gallery_prev;
	this.fade = Gallery_fade;
	this.goTo = Gallery_goTo;
	this.go = Gallery_go;
}

function Gallery_add(imgSrc, aLink )
{
	var img = new ImageHolder(imgSrc, aLink );
	this.gallery.push( img );
}

function Gallery_place()
{
	if ( this.gallery.length > 0 ) 
	{
		this.i = 0;
		this.fadeLevel = 100;
		
		isDisplayComplete = false;
		
		document.write( "<div style='width: " + this.w + "px; text-align: left;'>" );
		document.write( "<a id='" + this.name + "_displayAreaLink'><img id='" + this.name + "_displayArea' onload='if ( !isDisplayComplete) { $(\"" + this.name + "_displayArea\").style.marginLeft = ( " + this.w/2 + " - Element.getWidth( $(\"" + this.name + "_displayArea\") )/2 + " + this.borderWidth + " ) + \"px\"; $(\"" + this.name + "_displayArea\").style.visibility = \"visible\"; isDisplayComplete = true; }' src='" + this.gallery[0].src + "' style='border: solid " + this.borderWidth + "px #FFFFFF; visibility: hidden; filter:alpha(opacity=100); position: absolute; z-index: 15;' />" );
		document.write( "<a id='" + this.name + "_loadingAreaLink'><img id='" + this.name + "_loadingArea' onload='isLoadingAreaComplete = true;' src='images/spacer.gif' style='filter:alpha(opacity=0); position: absolute; z-index: 10; border: solid " + this.borderWidth + "px #FFFFFF;' /></a>" );

		document.write( "<div style='width: " + ( this.w + 2* this.borderWidth ) + "px; height: " + ( this.h + 2* this.borderWidth ) + "px'></div>" );
		document.write( "</div>" );
	}
	else
		document.write( "Gallery Empty" );
}

function Gallery_play(delay)
{
	this.playing = true;
	clearInterval( this.nextInterval );
	clearTimeout( this.nextTimeout );
	this.nextInterval = 0;
	this.nextTimeout = 0;
	this.next( delay );
}

function Gallery_pause()
{
	this.playing = false;
	
	if ( this.nextTimeout > 0 )
	{
		this.i = this.i - 1;
		
		if ( this.i < 0 )
			this.i = this.gallery.length - 1;
	}
	
	clearTimeout( this.nextTimeout );
	this.nextTimeout = 0;
}

function Gallery_go(i,delay)
{
	 
	
	if ( delay == undefined )
		delay = this.showTime;

    var old_i = this.i;

	this.i = i;
	
	if ( this.i >= this.gallery.length )
	{
		 
		 
		this.i = i =  0;
	}
	else if ( this.i < 0 )
	{
		alert ("not the  end");
		this.i = this.gallery.length - 1;
	}
	
	this.fadeLevel = 100;
	var linkHref = this.gallery[this.i].href;

	isLoadingAreaComplete = false;
	isLoadingAreaPlaced = false;
	
	document.getElementById( this.name + "_loadingArea" ).src = this.gallery[this.i].src;
	
	if ( linkHref == "" )
	{
		document.getElementById( this.name + "_loadingAreaLink" ).style.cursor = "default";
		document.getElementById( this.name + "_displayAreaLink" ).style.cursor = "default";
	}
	else
	{
		document.getElementById( this.name + "_loadingAreaLink" ).style.cursor = "pointer";
		document.getElementById( this.name + "_displayAreaLink" ).style.cursor = "pointer";
	}

	document.getElementById( this.name + "_loadingAreaLink" ).setAttribute("href", linkHref );
	document.getElementById( this.name + "_displayAreaLink" ).setAttribute("href", linkHref );

	
	var self = this;
	this.startTime = 0;
	this.nextInterval = 0;
	
	this.nextTimeout = setTimeout( function(){ self.fade(); self.onChange(old_i,  i); }, delay );
}


function Gallery_goTo(i, delay)
{
	if ( this.nextInterval > 0 )
		return;
	
	var storePlaying = this.playing;
	this.pause();
	clearInterval( this.nextInterval );
	this.nextInterval = 0;
	this.playing = storePlaying;
	
	this.go( i, delay );
}

function Gallery_next(delay)
{
	this.goTo( this.i + 1, delay );
}

function Gallery_prev(delay)
{
	this.goTo( this.i - 1, delay );
}

function Gallery_fade()
{
	if ( this.nextTimeout > 0 )
	{
		clearTimeout( this.nextTimeout );
		this.nextTimeout = 0;
	}

	var self = this;
	
	if( this.nextInterval === 0 )
		this.nextInterval = setInterval( function(){ self.fade(); }, this.intervalTime );
	
	// don't fade until image under is loaded
	if ( !isLoadingAreaComplete )
	{
		return;
	}
	else if ( this.startTime == 0 )
	{
		this.startTime = new Date();
		this.frames = 0;
	}

	this.frames++;


	var loadElement = document.getElementById( this.name + "_loadingArea" );

	if ( !isLoadingAreaPlaced )
	{
		$(loadElement).style.marginLeft = ( this.w/2 - Element.getWidth( loadElement )/2 + this.borderWidth ) + "px";
		isLoadingAreaPlaced = true;
	}

	var now = new Date();
	this.fadeLevel = Math.max( 0, 100 - 100 * ( ( now.getTime() - this.startTime.getTime() )/this.fadeTime ) );
	
	var fadeElement = document.getElementById( this.name + "_displayArea" );
	
	if ( !setFadeLevel(fadeElement,this.fadeLevel) ) 
		this.fadeLevel = 0;
	else
		setFadeLevel(loadElement,100-this.fadeLevel)
	
	if ( this.fadeLevel <= 0 )
	{
		clearInterval( this.nextInterval );
		this.nextInterval = 0;
		
		// swapping src causes some flickering.  So, lets just swap details
		var tempId = fadeElement.id
		var tempZ = fadeElement.style.zIndex;
		var tempOnLoad = fadeElement.getAttribute("onload");
		
		fadeElement.setAttribute( "id", loadElement.id );
		fadeElement.setAttribute( "onload", loadElement.getAttribute("onload") );
		fadeElement.style.zIndex = loadElement.style.zIndex;
		fadeElement.style.marginLeft = "0px";

		loadElement.setAttribute( "id", tempId );
		loadElement.setAttribute( "onload", tempOnLoad );
		loadElement.style.zIndex = tempZ;
		
		Element.show( this.name + "_displayArea" );
		Element.show( this.name + "_loadingArea" );

		this.fadeLevel = 100;
		setFadeLevel(fadeElement,0);
		setFadeLevel(loadElement,this.fadeLevel);
		
		if ( this.playing )
			this.next();
	}
}

function setFadeLevel( fadeElement, level )
{
	if ( typeof fadeElement.style.MozOpacity != "undefined" ) 	
		fadeElement.style.MozOpacity = level / 100;
	else if ( typeof fadeElement.style.opacity != "undefined" ) 		
		fadeElement.style.opacity = level / 100;
	else if ( typeof fadeElement.filters == "object" ) 
		fadeElement.filters.alpha.opacity = level;
	else
		return false;
		
	return true;
}

function ImageHolder(src, href)
{
	this.src = src;
	this.href = href;
	
	if ( this.href == undefined )
		this.href = "";
		
	this.isLinked = ( this.href != "" );
		
	this.imageObject = new Image();

	this.loadImage = ImageHolder_loadImage;
}

function ImageHolder_loadImage()
{
	this.imageObject.src = this.src;
}