var focused = true;
var running = true;

$(function(){
    
    
        
$("#slideshow").prepend("<div id='slideTitleHolder'></div>");
$("#slideshow").append("<div id='ssNav'><span id='prev'>&lt;</span><span id='otherSlides'></span><span id='next'>&gt;</span></div>");

var x=0;
var y=0;
$("#sbImages").children("li").each(function(){
   $(this).addClass("sketchbookImage");
   $(this).attr("id","slide"+x);
   y = x+1;
   $("#otherSlides").append("<span class='slideChooser' id='chooser"+x+"'>"+y+"</span>");
   if(x!=0){
    $(this).addClass("hiddenImage");
    $("#chooser0").addClass("active");
   }else{
  
   }
   x++;
});

var t=0;
var z=0;
$("#sbTitles").children("li").each(function(){
   //$(this).addClass("sketchbookImage");
   $(this).attr("id","title"+t);
   z = t+1;

   t++;
});


    $("#slideTitleHolder").html($("#sbTitles li:first").html());
 //   $("#sbTitles li:first").slideDown("fast");

$("#next").click(function(){
   clearInterval(tim);
    $("#sbImages li:first").next("li").fadeIn("slow").removeClass("hiddenImage");
    //$("#sbTitles li:first").hide("fast");
    $("#sbTitles").append($("#sbTitles li:first"));
   
    //$("#sbTitles li:first").show("fast");
    $("#slideTitleHolder").html($("#sbTitles li:first").html());
    $("#sbImages li:first").fadeOut("fast").addClass("hiddenImage");
    $("#sbImages").append($("#sbImages li:first"));
    $(".slideChooser").removeClass("active");
    var newID = $("#sbImages li:first").attr("id");
    newID = newID.replace("slide","");
    
    $("#chooser"+newID).addClass("active");
    tim = setInterval("autoSlide()",6000);
})
$("#prev").click(function(){
   clearInterval(tim);
    $("#sbImages li:last").fadeIn("slow").removeClass("hiddenImage");
 //$("#sbTitles li:first").hide("fast");
    $("#sbTitles").prepend($("#sbTitles li:last"));
 
   // $("#sbTitles li:first").show("fast");   
     $("#slideTitleHolder").html($("#sbTitles li:first").html()); 
    $("#sbImages li:first").fadeOut("fast").addClass("hiddenImage");
    $("#sbImages").prepend($("#sbImages li:last"));
        $(".slideChooser").removeClass("active");
        var newID = $("#sbImages li:first").attr("id");
   newID = newID.replace("slide","");
    $("#chooser"+newID).addClass("active");
    tim = setInterval("autoSlide()",6000);
})


$(".slideChooser").click(function(){
    clearInterval(tim);
    var newID = $(this).attr("id");
    newID = newID.replace("chooser","");
    var slideID = "slide"+newID;
    var titleID = "title"+newID;
  
    $("#"+slideID).fadeIn("slow").removeClass("hiddenImage");
     $("#sbTitles li:first").slideUp("fast");
       $("#slideTitleHolder").html($("#"+titleID).html());
     //$("#"+titleID).slideDown();
  var nume = $("#sbImages li").size();
   
      for(i=1;i<nume;i++){
        if($("#sbImages li:first").attr("id")!=slideID){
            $("#sbImages li:first").hide().addClass("hiddenImage");
            $("#sbImages").append($("#sbImages li:first"));
        }
        if($("#sbTitles li:first").attr("id")!=titleID){
           $("#sbTitles").append($("#sbTitles li:first")); 
        }
      }
      

     $(".slideChooser").removeClass("active");
        var newID = $("#sbImages li:first").attr("id");
   newID = newID.replace("slide","");
    $("#chooser"+newID).addClass("active");
    tim = setInterval("autoSlide()",6000); 
});







function sbTWidth(f){
    if(f==0){
    var wi = $("#sbImages li:first").next("li").width();
    var mar = $("#sbImages li:first").next("li").css("marginLeft");
    }else{
         var wi = $("#sbImages li:first").width();
    var mar = $("#sbImages li:first").css("marginLeft");
    }
    mar = mar.replace("px","");
   
    wi = parseInt(wi-16);
    mar = parseInt(mar-8);
    return(Array(mar,wi));
}

var tim = window.setInterval("autoSlide()",6000);
    window.addEventListener('focus', function() {
        focused = true;
        window.clearInterval(tim);
        tim = window.setInterval('autoSlide()', 6000);
    },false);

    window.addEventListener('blur', function() {
        focused = false;
        window.clearInterval(tim);
    },false)



})
function autoSlide(){
    
   // 
   if ( running == true){
            if ( focused = true){
                //forwardSlide();
                $("#next").click();
            }


        }

        else {

            running = true;

        }

}