$(document).ready(function() {
        // Timer
        var timer = $.timer(10000, next);

        $(".pic:first").addClass("active");

        // Handle thumb click
        $(".pic, .pic.active").click(function() {
		timer.stop();
		$("#control").attr("class",  "play");
                $(".pic.active").removeClass("active");
                $(this).addClass("active");

                var name = $(".pic.active").attr("name");

		$("#main").stop().fadeOut("fast", function(){ 
	               $("#main").attr("src", name);
		       $("#main").fadeIn(2000);
		});
        });
        // Handle next click
        $("#next").click(next);

        // Handle prev click
        $("#prev").click(function(){
                var id = $(".pic.active").attr("id").substr(1);
                id--;
                if(id < 1)
                        id = 15;
                setImage(id);
        });

        // Handle pause/play click
        $("#control").click(function() {
                if($(this).attr("class") == "pause"){
                        timer.stop();
                        $(this).removeClass("pause").addClass("play");
                }else{
                        timer.reset(5000);
                        $(this).removeClass("play").addClass("pause");
                }
        });
        // Slideshow Helpers

        function next(){
                var id = $(".pic.active").attr("id").substr(1);
                id++;
                if(id > 15)
                        id = 1;
                setImage(id);
        }

        function setImage(id){
                id = "#t" + id;
                $(".pic").attr("class", "pic");
                $(id).addClass("active");
                var name = $(".pic.active").attr("name");
		
		$("#main").stop().fadeOut("fast", function(){ 
	               $("#main").attr("src", name);
		       $("#main").fadeIn(400);
		});

        }
});