/**---------------------------------
 * acelslide.js
 * 
 * ...
 * author	: kaminaly at SHIFTBRAIN
 *
 * @use jQuery 1.2.6 later
 ---------------------------------*/
;(function($){
	$(function(){
		
		//slide init
		$(".axelSlide").each(function(){
			var self = this;
			var intervalId;
			var selectedIndex = 0;
			var stage = $(this).find(".stage li");
			var playlist = $('<p class="playlist"></p>').appendTo(this);
			
			stage.each(function(index){
				$('<span><img src="img/btn_point_off.gif" alt="" /></span>')
					.appendTo(playlist)
							.mouseover(function(){
								$(this).find("img").stop().fadeTo(300, 0);
							}).mouseout(function(){
								$(this).find("img").stop().fadeTo(300, 1);
							}).click(function(){
								change(playlist.index(this));
								setSlide();
							});
				if(index == 0){
					$(this).addClass("selected");
				}else{
					$(this).animate({opacity: 0}, 0);
				}
			});
			
			var playlistSelected;
			setTimeout(function(){
				playlist = playlist.find("span");
				playlistSelected = $('<img class="selected" src="img/btn_point_on.gif" alt="" />')
					.appendTo(self)
						.css({top: $(self).find(".playlist").position().top + "px",left: playlist.eq(0).position().left+"px"});
			},0);
			
			//$(this).find(".stage").mouseover(function(){clearInterval(intervalId);}).mouseout(setSlide);
			setSlide();
			
			function change(index){
				if(selectedIndex == index) return;
				selectedIndex = index;
				
				playlistSelected.css("left", playlist.eq(selectedIndex).position().left + "px");
				
				stage.filter(".selected")
					.removeClass("selected")
						.animate({opacity: 0}, 1000);
				
				stage.eq(selectedIndex)
					.addClass("selected")
						.animate({opacity: 0}, 0)
							.animate({opacity: 1}, 1000);
			}
			
			function setSlide(){
				clearInterval(intervalId);
				intervalId = setInterval(function(){
						var index = selectedIndex + 1;
						index = stage.size() > index ? index : 0;
						change(index);
				}, 5500);
			}
		});
		
	});
})(jQuery);