//Global vars
//Defaults for image size variables
var next_frame_x=0;
var next_frame_y=0;	
var next_frame_ready=0;
var first_frame_ready=0;
var theDiv=""
var gblObj;
var strFootNote;
//Based on code by Bauduin Raphael (http://www.madb.net/slideshow/)
//Changes include dynamic sizing of the holding div, all items read from passed array with intial slide set up through scripting, waiting for image loading before advancing


YAHOO.namespace("SeeITSlides");
//YAHOO.SeeITSlides.slideshow = function (container, frames, effect) {
YAHOO.SeeITSlides.slideshow = function (container, o) {
	gblObj=this;
	this.container = YAHOO.util.Dom.get(container);
	theDiv=this.container;
	this.effect = o.effect;
	var frames = o.frames;
	this.frames = [];
	
	//Find frames dropped onto page as HTML
	var cached_frames = YAHOO.util.Dom.getElementsByClassName("yui-sldshw-frame", null, this.container);
	
	for (var i=0; i<cached_frames.length; i++)
	{
		this.frames[i] = { id: i, type: 'cached', value: cached_frames[i]};
	}
	//Find frames passed through constructor
	if (frames != null && frames!=undefined)
	{
		for (var i=0; i<o.frames.length; i++)
		{
			this.frames[i+cached_frames.length] = o.frames[i];
		}
	}

	//set slide selector function (modulus will loop when end of slide show reached)
	if (! o.slide_selector)
	{
		this.slide_selector = function(number_of_slides, current_index)
			{
				//return Math.floor( Math.random()*number_of_slides);
				return (current_index+1)%number_of_slides;
			}

	}
	else
	{
		this.slide_selector = o.slide_selector;
	}

	//Set default interval if none given
	if (o.interval)
		this.interval = o.interval
	else
		this.interval = 5000

		
	//Initiliase Slideshow
	this.init();

}


YAHOO.SeeITSlides.slideshow.prototype = {
	init: function()
		{
			//If no effect given then set default
			if (! this.effect)
			{
				this.effect= YAHOO.SeeITSlides.slideshow.effects.slideUp;
			}
			//Establish Control Buttons
			//this.getControls();

			//Find which frame is first
			this.choose_first_frame();

			//Find which frame is active
			this.active_frame = this.get_active_frame();
		},
	get_active_frame: function()
		{
			//Find currently active frame by searching for specific class name.
			var current_frame =  YAHOO.util.Dom.getElementsByClassName("yui-sldshw-active", null,  this.container)[0];
			return current_frame;
		},
	get_frame_index: function(frame)
		{
			//For a given frame ref find the id in the stack
			for(var i=0; i<this.frames.length;i++)
			{
				if (this.frames[i].value==frame)
					return i;
			}
			return -1;
		},
	choose_first_frame : function()
		{
			//Get the index of the current active frame
			var current_index = 0;
			var all_frames = this.frames;
			var current=all_frames[0];
			//Set total frame count to all_frames
			var all_frames = this.frames;
			var next_index = 1;
			var next = all_frames[next_index];
			var current_frame;
			//images have been passed via the frames option in the constructor
			if ( current.type=='image_url')
			{
				first_frame_ready=0;
				//Preload image into object
				var myfirstImage = new Image();
				myfirstImage.onload= function() {
				var targetx=this.width; 
				var targety=this.height;
				first_frame_ready=1;
				//console.log("Ready: "+this.src+"");
				next_frame_x=targetx;
				next_frame_y=targety;
				//First Load Only
				YAHOO.util.Dom.setStyle(theDiv,'width',targetx+'px');
				YAHOO.util.Dom.setStyle(theDiv,'height',targety+'px');	
				YAHOO.util.Dom.setStyle(theDiv,'display','block');	
				//divNotes = YAHOO.util.Dom.get('sldshw-footnotes');
				//divNotes.style.opacity=1;				
				};
				myfirstImage.src = current.value;
				//Create an image from the given url and set the correct classes for the slideshow
				current_frame = document.createElement('img');
				current_frame.setAttribute('src',current.value);
				//next_frame.setAttribute('id','frame_'+next.id);
				current_frame.legend=current.legend;
				current_frame.title=current.title;
				current_frame.id=current.id;
				current_frame.onclick=function(){
					document.location.href="ShowCaseDetail.cfm/ID/"+current_frame.id;
				}				
				//divNotes = YAHOO.util.Dom.get('sldshw-footnotes');
				strFootNote="<div><a href='ShowcaseDetail.cfm/ID/"+current_frame.id+"'><strong>"+current_frame.title+"</strong></a><br>"+current_frame.legend+"<br><a href='ShowcaseDetail.cfm/ID/"+current_frame.id+"'>read more ...</a></div>";
				//divNotes.innerHTML=strHTML;
				current.type='cached';
				current.value=current_frame;
				YAHOO.util.Dom.addClass(current_frame, "yui-sldshw-frame");
				YAHOO.util.Dom.addClass(current_frame, "yui-sldshw-active");
				this.container.appendChild(current_frame);
				this.current_frame = current_frame;
				this.effect.setup(this.current_frame);
				this.end_first_load();
			}
		},
	choose_next_frame : function( reverse )
		{
		//console.log("choose_next_frame");
			//Establish if the slideshow is in reverse
			var reverse = (reverse ==null) ? false : true ;
			//Get the index of the current active frame
			var current_index = this.get_frame_index(this.get_active_frame());
			//Set total frame count to all_frames
			var all_frames = this.frames;
			//If there is no active frame, make it frame 0 (the 1st one)
			if (current_index<0)
				{current_index=0;}
			if (reverse)
			{
			    var next_index = current_index -1;
				if (next_index < 0)
					next_index = all_frames.length + next_index;
				YAHOO.util.Dom.replaceClass(YAHOO.util.Dom.getElementsByClassName("yui-sldshw-next")[0], "yui-sldshw-next", "yui-sldshw-cached");
			}
			else
			{
				//Call slide_selector function to add 1 to frame or return to 0 if end already reached

				var next_index = this.slide_selector(all_frames.length, current_index);

				if (next_index>=all_frames.length){next_index=0};
			}
			//console.log("current is "+current_index+" ; next is "+next_index+"");
			var next = all_frames[next_index];
			var next_frame;
			//possible infinite loop....
			//where the process will fail step it forward by one
			while (next.value==this.active_frame || next.type=="broken")
			{   
				next = all_frames[this.slide_selector(all_frames.length, next_index)];
			}
			//cached images are loaded into the browser before JS
			if (next.type=='cached')
			{
				//console.log(next.type);
				next_frame = next.value;
				YAHOO.util.Dom.replaceClass(next_frame, "yui-sldshw-cached", "yui-sldshw-next");
				this.next_frame = next_frame;
				//Don't have to check for image loading as they are now cached.
				//Do have to check if naturalHeight is available though (IE doesn't support)
			    if( next_frame.naturalHeight ) {
					next_frame_x=next_frame.naturalWidth;
					next_frame_y=next_frame.naturalHeight;
			    } else {
			        lgi = new Image();
			        lgi.src = next_frame.src;
					next_frame_x=lgi.width;
					next_frame_y=lgi.height;
					lgi=null;
			    }
				this.effect.setup(this.next_frame);
			}
			//images have been passed via the frames option in the constructor
			else if ( next.type=='image_url')
			{
				next_frame_ready=0;
				//Preload image into object
				var myImage = new Image();
				myImage.onload= function() {
				var targetx=this.width; 
				var targety=this.height;
				next_frame_ready=1;
				//console.log("Ready: "+this.src+"");
				next_frame_x=targetx;
				next_frame_y=targety;
				};
				myImage.src = next.value;
				//Create an image from the given url and set the correct classes for the slideshow
				next_frame = document.createElement('img');
				next_frame.setAttribute('src',next.value);
				//console.log("Next is:"+next.value);
				//next_frame.setAttribute('id','frame_'+next.id);
				next_frame.legend=next.legend;
				next_frame.title=next.title;
				next_frame.id=next.id;	
				next_frame.onclick=function(){
					document.location.href="ShowCaseDetail.cfm/ID/"+next_frame.id;
				}								
				next.type='cached';
				next.value=next_frame;
				//console.log("Next is:"+next.value);
				YAHOO.util.Dom.addClass(next_frame, "yui-sldshw-frame");
				YAHOO.util.Dom.addClass(next_frame, "yui-sldshw-next");
				this.container.appendChild(next_frame);
				this.next_frame = next_frame;
				//Prepare for transition (see effect functions)
				this.effect.setup(this.next_frame);
			}
		},
	end_first_load : function()
		{
		/*
		divInfo = YAHOO.util.Dom.get('Info');
		if(first_frame_ready==1)
			{divInfo.innerHTML='First frame ready';}
		else
			{divInfo.innerHTML='First frame not ready';}
		*/
		if(first_frame_ready==1)
		   {	
		    if(this.delay2){
			clearInterval(this.delay2);
			}	
			//Reset the class names on played frames
			divNotes = YAHOO.util.Dom.get('sldshw-footnotes');
			divNotes.innerHTML=strFootNote;						
			divNotes.style.opacity=1;			
			this.choose_next_frame();
		    
		   //Since we are proceeding re-engage delay
			var self;
			self =this;	
			if (this.mode=='play')
				{this.loop_interval = setInterval( function(){self.transition();}, this.interval );}
			}
		else
			{
		   var self;
		   self =this;
		   if(this.delay2){clearInterval(this.delay2);}
		   this.delay2=setInterval( function(){self.end_first_load();}, 500 );	
			}
		},		
	clean_up_transition : function() 
		{ 
			//Reset the class names on played frames
			YAHOO.util.Dom.replaceClass(this.active_frame, "yui-sldshw-active", "yui-sldshw-cached");
			YAHOO.util.Dom.replaceClass(this.next_frame, "yui-sldshw-next", "yui-sldshw-active");
			this.active_frame = this.next_frame; 
			divNotes = YAHOO.util.Dom.get('sldshw-footnotes');
			divNotes.innerHTML=strFootNote;		
			//divNotes.style.opacity=1;	
			//var FootNoteIn = new YAHOO.util.Anim(divNotes, { opacity: { to: 1 }}, 1);
			//FootNoteIn.animate();										
		    this.choose_next_frame();
			var self;
			self =this;	
			if (this.mode=='play')
				{this.loop_interval = setInterval( function(){self.transition();}, this.interval );}			
		},
	transition: function( o )
		{
		//Clear the interval that brought us here:
	 	clearInterval(this.loop_interval);		
		//console.log("transition");
		//alert("next_frame_ready: "+next_frame_ready);
		   if(next_frame_ready==1)
		   {
		   if(this.delay){clearInterval(this.delay);}
			var o = (o ==null) ? {} : o ;
			var previous = (o.reverse ==null)?false:o.reverse;
			if (previous)
			{
			  this.choose_next_frame(true);
			}
			var AnimAttributes = {
			   width: { to: next_frame_x },
			   height: { to: next_frame_y }
			};

			var AnimResize = new YAHOO.util.Anim(this.container, AnimAttributes);
			AnimResize.animate();
			//divNotes = YAHOO.util.Dom.get('sldshw-footnotes');
			//divNotes.style.opacity=0;	
			//var FootNoteOut = new YAHOO.util.Anim(divNotes, { opacity: { to: 0 }}, 1, YAHOO.util.Easing.easeOut);
			//FootNoteOut.animate();
			strFootNote="<div><a href='ShowcaseDetail.cfm/ID/"+this.next_frame.id+"'><strong>"+this.next_frame.title+"</strong></a><br>"+this.next_frame.legend+"<br><a href='ShowcaseDetail.cfm/ID/"+this.next_frame.id+"'>read more ...</a></div>";						
			//console.log(this.active_frame);
			var hide = this.effect.get_animation(this.active_frame);
			hide.onComplete.subscribe(this.clean_up_transition, this, true);
		    hide.animate();
		   }
		   else
		   {
		   //alert("Not Ready");
		   //console.log("Not Ready");
		   var self;
		   self =this;
		   if(this.delay){clearInterval(this.delay);}
		   this.delay=setInterval( function(){self.transition();}, 500 );
		   }
		},
	getControls: function() {
	this.controls = YAHOO.util.Dom.get("slideshow-buttons");
	var buttons = ['play', 'pause', 'previous', 'next'];
	this.btn = {};
	for (var i = 0; i < buttons.length; i++) {
		this.btn[buttons[i]] = YAHOO.util.Dom.getElementsByClassName(this.controls, 'li', 'slideshow-'+ buttons[i]);
	}
	//this.btn.pause.style.display = 'none';
	//this.disable('full-expand');
	},		
	play: function()
		{
		this.mode='play';		
			var self;
			self =this;
			this.loop_interval = setInterval( function(){self.transition();}, this.interval );
		}
 }	


YAHOO.SeeITSlides.slideshow.effects = {
	slideRight :{
			setup: function(frame){
				YAHOO.util.Dom.setStyle(frame, 'top', '0'); 
				YAHOO.util.Dom.setStyle(frame, 'left', '0'); 
			},
			get_animation: function(frame){
					var region = YAHOO.util.Dom.getRegion(frame);
					return new YAHOO.util.Motion(frame, { points: { by: [region.right-region.left,0] } }, 1, YAHOO.util.Easing.easeOut);
			}
		},
	slideLeft: {
			setup: function(frame){
					YAHOO.util.Dom.setStyle(frame, 'top', '0'); 
					YAHOO.util.Dom.setStyle(frame, 'left', '0'); 
			},
			get_animation: function(frame){
					var region = YAHOO.util.Dom.getRegion(frame);
					return new YAHOO.util.Motion(frame, { points: { by: [region.left-region.right,0] } }, 1, YAHOO.util.Easing.easeOut);
			}
		},
	squeezeLeft: {
			setup: function(frame){
					YAHOO.util.Dom.setStyle(frame, 'width', '100%'); 
			},
			get_animation: function(frame){
					var region = YAHOO.util.Dom.getRegion(frame);
					return new YAHOO.util.Anim(frame, { width: { to: 0 } }, 1, YAHOO.util.Easing.easeOut);
			}
		},
	squeezeRight: {
			setup: function(frame){
					YAHOO.util.Dom.setStyle(frame, 'width', '100%'); 
					YAHOO.util.Dom.setStyle(frame, 'right', '0px'); 
			},
			get_animation: function(frame){
					var region = YAHOO.util.Dom.getRegion(frame);
					YAHOO.util.Dom.setStyle(frame, 'right', '0px'); 
					return new YAHOO.util.Anim(frame, { width: { to: 0 }}, 1, YAHOO.util.Easing.easeOut);
			}
		},
	squeezeUp: {
			setup: function(frame){
					YAHOO.util.Dom.setStyle(frame, 'height', '100%'); 
			},
			get_animation: function(frame){
					var region = YAHOO.util.Dom.getRegion(frame);
					return new YAHOO.util.Anim(frame, { height: { to: 0 }}, 1, YAHOO.util.Easing.easeOut);
			}
		},
	squeezeDown: {
			setup: function(frame){
					YAHOO.util.Dom.setStyle(frame, 'height', '100%'); 
			},
			get_animation: function(frame){
					var region = YAHOO.util.Dom.getRegion(frame);
					YAHOO.util.Dom.setStyle(frame, 'bottom', '0px'); 
					return new YAHOO.util.Anim(frame, { height: { to: 0 }}, 1, YAHOO.util.Easing.easeOut);
			}
		},
	fadeOut: {
			setup: function(frame){
					YAHOO.util.Dom.setStyle(frame, 'opacity', '1'); 
			},
			get_animation: function(frame){
					return new YAHOO.util.Anim(frame, { opacity: { to: 0 }}, 2, YAHOO.util.Easing.easeOut);
			}
		},
	fadeIn: {
			setup: function(frame){
					YAHOO.util.Dom.setStyle(frame, 'opacity', '0'); 
					YAHOO.util.Dom.setStyle(frame, 'z-index', '20'); 
			},
			get_animation: function(frame){
					var region = YAHOO.util.Dom.getRegion(frame);
					return new YAHOO.util.Anim(frame, { opacity: { to: 1 }}, 1, YAHOO.util.Easing.easeOut);
			}
		}  
}
YAHOO.SeeITSlides.slideshow.effects.slideUp={
			setup: function(frame){
					YAHOO.util.Dom.setStyle(frame, 'top', '0'); 
					YAHOO.util.Dom.setStyle(frame, 'left', '0'); 
			},
			get_animation: function(frame){
					var region = YAHOO.util.Dom.getRegion(frame);
					return new YAHOO.util.Motion(frame, { points: { by: [0,region.top-region.bottom] } }, 1, YAHOO.util.Easing.easeOut);
			}
}
//YAHOO.SeeITSlides.effect = {
//	setup: function(){
//			YAHOO.util.Dom.setStyle(next_frame, 'top', '0'); 
//			YAHOO.util.Dom.setStyle(next_frame, 'left', '0'); 
//	},
//	get_animation: function(frame){
//			return new YAHOO.util.Motion(frame, { points: { by: [-800,0] } }, 1, YAHOO.util.Easing.easeOut);
//	}
//}