/*
Author: Dominik Paszun
Date: 11-08-2010
-----------------------
dependency: JQuery must be included before this file

description:
custom image slider. 
displays images in a loop with smooth transitions (JQuery)
Has OnBegining and OnDone functions that are treated as callbacks for before image fades out and after it fades out.


Usage:
holder_id is an id of element with collection of images in it
id is 0-based index of an image, e.g. 4 images are indexed 0,1,2,3,4 
	initialize: mySlides = new Slider('holder_id');
	setup:      mySlider.Prepare();
	start:      mySlider.Start();
		or		mySlider.Run();
	stop: 		mySlider.Stop();
	go to:		mySlider.ReplaceWith(id);
	
	

*/


function Slider(sliderId)
{
	// private members
	var delim_slide = '<-!->';
	var delim = '<--!DELIM!-->';
	
	// public members
	this.id=sliderId
	// current picture
	this.picId=0;
	// number of pictures
	this.picsNo=0;
	this.speed=1000; // transition speed
	this.delay=5000; // swap image every this.delay milliseconds
	this.slideSrcs = new Array(); // picture sources array
	this.slideAlts = new Array(); // images alternative texts
	this.slideWidths = new Array(); // iamges width
	this.slideHeights = new Array(); // images height
	this.curTimeout=0; // current timeout
	
	
	// methods
	
	/*
		fetch all img tags in it and store all sources in an array
	*/
	this.Prepare = function()
	{
		tmp = 'undefined';
		data = '';
		obj = this;
		$('#'+this.id+' img').each(function(){
			obj.picsNo = obj.slideSrcs.push($(this).attr('src'));
			obj.slideAlts.push($(this).attr('alt'));
			obj.slideWidths.push($(this).attr('width'));
			obj.slideHeights.push($(this).attr('height'));
			data += $(this).attr('src')+delim_slide+$(this).attr('alt')+delim_slide+$(this).attr('width')+delim_slide+$(this).attr('height')+delim;
			if(obj.picsNo==1)
			{
				$('#'+obj.id).css('background-image','url('+obj.slideSrcs[0]+')');
				tmp = $(this); // save this one so we append img after the loop is done
			}
			$(this).remove();
		});
		if(tmp != 'undefined')
		{
			$('#'+this.id).append(tmp);
			$('#'+this.id+' img').attr('id','active-slide');
		}
		if(data.length > 0)
		{
			index_holder = $('<input type="hidden" id="'+this.id+'_index" name="'+this.id+'_index" value="'+this.picId+'" />')
			data_holder = $('<input type="hidden" id="'+this.id+'_data" name="'+this.id+'_data" value="'+data+'" />')
			$('#'+this.id).prepend(data_holder);
			$('#'+this.id).prepend(index_holder);
		}
	}

	/*
	input: picId

	steps:

	1) replace background image with picId-th header image
	2) fadeOut img
	3) set background image to img
	4) display image
	*/
	this.ReplaceWith = function(picId)
	{
		this.picId = picId;
		if(this.picsNo<=this.picId) // reset picId is out of bounds so we cycle through
			this.picId = 0; 
		if(this.picId >= this.slideSrcs.length)
			return;
		$('#'+this.id+'_index').val(this.picId);
		$('#'+this.id).css('background-image','url('+this.slideSrcs[this.picId]+')');
		tmp=$('<img id="temp-slide" src="'+this.slideSrcs[this.picId]+'" alt="'+this.slideAlts[this.picId]+'" width="'+this.slideWidths[this.picId]+'" height="'+this.slideHeights[this.picId]+'" />');
		tmp.css('display','none');
		$('#'+this.id).append(tmp);
		// before fading out do some custom things
		this.OnBegin();
		// fade out and on complete run OnDone
		$('#active-slide').fadeOut(this.speed,this.OnDone);
	}
	
	// just before switching slides
	this.OnBegin = function()
	{
		$('#nav h1').fadeOut(this.speed);		
	}
	
	// When previous slide is faded out
	this.OnDone = function()
	{
		// STANDARD - DON't TOUCH THIS
		$('#temp-slide').css('display','block'); 
		$('#active-slide').remove();
		$('#temp-slide').attr('id','active-slide');
		// -- END EDIT BELOW
		
		data = $('#header_data').val().split(delim);
		ind = $('#header_index').val();
		alts = new Array();
		srcs = new Array();
		// loop through images 
		for(i=0;i<data.length;i++)
		{
			dat_ = data[i].split(delim_slide);
			srcs.push(dat_[0]);
			alts.push(dat_[1]);
			delete dat_;
		}
		// update thumbs and message
		// reset thumbs
		$('#nav .thumb').removeClass('active');
		$('#thumb_'+ind).addClass('active');
		$('#nav h1').text(alts[ind]);
		Cufon.replace('h1', { fontFamily: 'MyriadPro' });
		$('#nav h1').fadeIn(300);
	}
	
	this.Run = function()
	{
		this.ReplaceWith(++this.picId);
		obj=this;
		this.curTimeout = setTimeout("obj.Run()",obj.delay);
	}
	
	this.Start = function()
	{
		obj=this;
		this.curTimeout = setTimeout("obj.Run()",obj.delay);
	}
	this.Stop = function()
	{
		clearTimeout(this.curTimeout);
	}
	
	this.Next = function()
	{
		clearTimeout(this.curTimeout);
		this.ReplaceWith(++this.picId);
		this.Start();
	}

	
}