/*!
 * Earthlogic, Inc. Sequential Image Rotator
 * http://www.earthlogic.com/
 *
 * Copyright 2010, Earthlogic, Inc.
 * Developer: William Charlton
 * 
 * Requires jQuery.js
 * http://jquery.com/
 *
 * Date: Thur Sept 9 14:33:48 2010
 * 
 * To ease implementation for non javascript developers the properties for this plug-in are extracted from custom
 * attributes on a div tcontainer tag. This div element is also the element to bind the plugin too. Place a default
 * image in the div. If the image is to initially be random you can pass the random option as a custom attribute as well.
 * 
 * It is important to set the WIDTH and HEIGHT of the image as the plug-in reads the size to set the size of the DIV tag.
 * This helps in eliminating unwanted padding. It is also acceptable to apply css class or styles to the DIV element as well.
 * 
 * Custom tag attributes are:
 * - imgpath | Path to image directory. Can ommit and use absolute path on each image
 * - delay | The amount of time in milliseconds to wait before displaying a new image. 5000 = 5 seconds
 * - fadeout | Speed of the image fadeout animation
 * - fadein | Speed of the image fadein. This animation is not visible but is used to restore the overlay image. Set to a very fast speed like 100
 * - imgs | comma delimited string of images. If using imgpath do not use complete image urls. The image element is to be "^" delimited with the first
 *          element being the image source and the second element a href url. This allows each random image to link to a unique location. A href value 
 *          of false will result in a non linking image
 * 
 * EXAMPLE:
 *    <div id="home_image1" class="random_image"imgpath='./other/' 
 *     imgs="home-01.gif^false,other-02.gif^false,other-03.gif^false,other-04.gif^false" 
 *     delay="2500" fadeout="2000" fadein="100"
 *    >
 *       <img width="940" height="139" class="test" name="test1" id="test1" src="./other/other-01.gif" border="0"  />
 *   </div>
 */
 jQuery.fn.elsequentialimage = function(){
	this.each(function(){
		/* Load Parameters From Custom Attributes */
		var thisObj = jQuery(this);
		var imgs = thisObj.attr('imgs'); /* Get images attribute from tag */
		var imgs_array = imgs.split(','); /* initial split of image data */
		var preload = ( thisObj.attr('preload') && jQuery.trim( thisObj.attr('preload') ) != "" )?jQuery.trim( thisObj.attr('preload') ):true;
		var delay = ( thisObj.attr('delay') && jQuery.trim( thisObj.attr('delay') ) != "" )?jQuery.trim( thisObj.attr('delay') ):5000;
		var fadeout = ( thisObj.attr('fadeout') && jQuery.trim( thisObj.attr('fadeout') ) != "" )?jQuery.trim( thisObj.attr('fadeout') ):1200;
		var fadein = ( thisObj.attr('fadein') && jQuery.trim( thisObj.attr('fadein') ) != "" )?jQuery.trim( thisObj.attr('fadein') ):100;
		var dom_image = jQuery('img', thisObj);
		var imgpath = ( thisObj.attr('imgpath') && jQuery.trim( thisObj.attr('imgpath') ) != "" )?jQuery.trim( thisObj.attr('imgpath') ):'';
		var w = dom_image.width();
		var h = dom_image.height();
		var exclude = dom_image.attr('src');
		thisObj.css({'padding':'0px', 'width':w+'px', 'height':h+'px','background-repeat':'no-repeat'});	
		var href = false;
		
		var index = 0;
		var firstpass = true;
		
		/* Now loop data structure to split out the image and the url parameters */
		for( var i=0; i<imgs_array.length; i++ ){
			var tmp = imgs_array[i].split('^');
			imgs_array[i] = {'image':imgpath+tmp[0],'href':tmp[1]};	
		}
		
		/* LOOP START: Preload */
		if( preload ){ var tmp = false; for( var i=0; i<imgs_array.length; i++ ){tmp=new Image; tmp.src=imgs_array[i].image;} }
		/* LOOP STOP: Preload */
		
		/* FUNCT START: Get Random Image From Array Excluding Current Image */
		var getNextSrc = function(){ ++index; if( index >= imgs_array.length ){ index = 0; } return imgs_array[index]; /* return exclude; */ };
		/* FUNCT STOP: Get Random Image From Array Excluding Current Image */
		
		
		var run = function(){ /* runner process */
			
			if( firstpass ){ firstpass = false; s=imgs_array[0]; }else{ var s = getNextSrc(); }
			thisObj.css({'background-image':'url('+s.image+')'});
			href = s.href;
			setTimeout( function(){
				dom_image.fadeOut(fadeout,function(){
					dom_image.attr('src',s.image).fadeIn(fadein, function(){
						run();	
					});
				});
			}, delay );	
		};
		
		thisObj.mouseover(function(){
			var lnk = href && href != 'false';
			if( lnk ){ thisObj.css('cursor','pointer' ); }else{thisObj.css('cursor','default' );}
			return;
		}).mouseout(function(){
			thisObj.css('cursor','default' );
			return;
		}).click(function(){
			if( href && href != 'false' ){ document.location = href; }
			return;
		});
		
		run(); /* start the whole process */ 
	 });
	return this;
};