$(function(){
	var gallery = {
		slideImg:"#slideImg",
		thumb:"#thumb"
	}
	var Imgs = "img";
	var num = "num";
	var active = "active";

	$("li" , gallery.slideImg).each(function(i){
		$(this).attr("id" , Imgs + i);
		$(gallery.thumb).append("<li id='"+(num+i)+"'><a href='#"+ Imgs +"'>"+ (i + 1) +"</a></li>");
	});
	$("a" , gallery.thumb).each(function(i){
		 $(this).attr("href" , "#"+ Imgs + i);
	});
	$("li:first-child" , gallery.thumb).addClass(active);


	var focusList = "focusList";
	var focusNon = "focusNon";
	var active = "active";

	$("li:first-child" , gallery.slideImg).addClass(focusList);	
	$("li:not(:first-child)" , gallery.slideImg).hide();	

	$("a" , gallery.thumb).click(function(){
		var ID = $(this).attr("href");
		$("li" , gallery.slideImg).hide();
		$("." + focusList).removeClass().addClass(focusNon);
		$(ID).addClass(focusList).fadeIn(300);
		$($("a" , gallery.thumb).parent()).removeClass(active);
		$($(this).parent()).addClass(active);
		return false;
	});
	
	var control = {
		Play:"#play",
		Stop:"#stop"
	}
	var slideLength = $("li" , gallery.slideImg).length;
	var Interval = 4000;

	$(gallery.thumb).css({/*left: 410-(24*(slideLength-1))+"px"*/});
	$(control.Play).click(function(){
		$(gallery.thumb).hide();
		var playGallery = setInterval(function(){
			$("li" , gallery.slideImg).hide();
			$("." + focusList).each(function(){
				$(this).removeClass().addClass(focusNon);
				$(this).next("li").addClass(focusList).fadeIn(300);
				$(this).prev("li." + focusNon).removeClass();
			});
			if($("li:last-child" , gallery.slideImg).attr("class") == focusNon){
				$("li." + focusNon , gallery.slideImg).removeClass();
				$("li:first-child" , gallery.slideImg).addClass(focusList).fadeIn(300);
			}

			$("li." + active , gallery.thumb).each(function(){
				$(this).removeClass();
				$(this).next("li").addClass(active);
			});
			var lastThumb = $("li:last-child" , gallery.slideImg).css("display");
			var firstThumb = $("li:first-child" , gallery.slideImg).css("display");
			if(lastThumb == "list-item" || lastThumb == "block"){
				$("li:last-child" , gallery.thumb).addClass(active);
				$("li:first-child" , gallery.thumb).removeClass();
			} else if (firstThumb == "list-item" || firstThumb == "block"){
				$("li:first-child" , gallery.thumb).addClass(active);
				$("li:last-child" , gallery.thumb).removeClass();
			}

		},Interval);
		
		$(control.Stop).click(function(){
			$(gallery.thumb).show();
			clearInterval(playGallery);
			return false;
		});
		
		return false;
	});

	$(control.Stop).click(function(){
		return false;
	});
});