/* jQuery image flipper - by Jon Rogers */
jQuery.fn.imageFlip = function() {
	return this.each(function() {
		var timer = null;
		
		$elem = jQuery(this);
		
		//collect images
		imgs = jQuery('img', this);
		
		if(imgs.length) {
			//hide all but selected (default the first)
			selIndex = 0;
			imgs.not(':eq(' + selIndex + ')').addClass('hidden');
			imgs.not(':eq(' + selIndex + ')').parent().addClass('hidden');
			imgs.eq(selIndex).addClass('selected');
			imgs.eq(selIndex).parent().addClass('selected');
			
			//create bottom bar
			barHtml = "<div class='bar'><table cellpadding='0' cellspacing='0' align='center'><tr><td><ul>";
			barHtml += "<li class='first'><a href='#back'><img src='../jquery_imageflipper/images/btn_left.gif' alt='Back' /></a></li>";
			for ( i = 0; i < imgs.length; i++ ) {
				x = i + 1;
				barHtml += "<li class='btn";
				if(selIndex == i) 
					barHtml += " selected";
				barHtml += "'><a href='#" + x + "'>" + x + "</a></li>";
			}
			barHtml += "<li class='last'><a href='#forward'><img src='../jquery_imageflipper/images/btn_right.gif' alt='Forward' /></a></li>";
			barHtml += "</ul></td></tr></table></div>";
			
			$elem.append(barHtml);
			
			timer = setTimeout(nextImage, 5000);
		}
		
		$elem.hover( 
			function() { clearTimeout(timer); timer = 0; }, 
			function() { timer = setTimeout(nextImage, 5000); }
		);
		
		jQuery('div.bar a', this).click( function() {
			if(jQuery.browser.msie)
				href = jQuery(this).attr('href').substring(jQuery(this).attr('href').indexOf('#') + 1);
			else
				href = jQuery(this).attr('href').substring(1);
				
			currImgIndex = getSelectedImageIndex(); //imgs.filter('.selected');
			
			if(Number(href)) {
				nextImgIndex = href - 1;
			}
			else {
				if(href == "forward") {
					if(currImgIndex == imgs.length - 1)
						nextImgIndex = 0;
					else
						nextImgIndex = currImgIndex + 1;
				}
				else if(href == "back") {
					if(currImgIndex == 0)
						nextImgIndex = imgs.length - 1;
					else
						nextImgIndex = currImgIndex - 1;
				}
			}
			
			nextImg = imgs.eq(nextImgIndex);
			
			jQuery('div.bar li.btn').removeClass('selected');
			jQuery('div.bar li.btn:eq(' + nextImgIndex + ')').addClass('selected');
			
			imgs.removeClass();
			imgs.parent().removeClass();
			imgs.not(nextImg).addClass('hidden');
			imgs.not(nextImg).parent().addClass('hidden');
			nextImg.addClass('selected');
			nextImg.parent().addClass('selected');
			
			//alert(nextImg.attr('src'));
			return false;
		} );
		
		function nextImage() {
			currImgIndex = getSelectedImageIndex();
			if(currImgIndex == imgs.length - 1)
				nextImgIndex = 0;
			else
				nextImgIndex = currImgIndex + 1;
				
			nextImg = imgs.eq(nextImgIndex);
			
			jQuery('div.bar li.btn').removeClass('selected');
			jQuery('div.bar li.btn:eq(' + nextImgIndex + ')').addClass('selected');
			
			imgs.removeClass();
			imgs.parent().removeClass();
			imgs.not(nextImg).addClass('hidden');
			imgs.not(nextImg).parent().addClass('hidden');
			nextImg.addClass('selected');
			nextImg.parent().addClass('selected');
			
			timer = setTimeout(nextImage, 5000);
		}
		
		function getSelectedImageIndex() {
			var selImgIndex = 0;
			imgs.each(function(i) {
				if(imgs.eq(i).hasClass('selected'))
					selImgIndex = i;
			} );
			
			return selImgIndex;
		}
		
	} );
}