$(function(){

  //slideshow
  
  $("#slides").cycle({
    timeout: 5000,
    after : changeName,
    next: "#next-slide",
    prev: "#prev-slide"
  });

  Cufon.replace("h1, h2, h3, h4, h5, nav a, #slideshow-info",{hover:true});
  
  /* Jquery Tools overlay programmatic call */
  
  if($(".launch-overlay").size()){

    $(".launch-overlay").overlay();
  }
  
  /* Video media element */
  
  if($("video").size()){
    
    if(	navigator.userAgent.match(/iPhone/i) || navigator.userAgent.match(/iPod/i) || navigator.userAgent.match(/iPad/i)){
    	    var video = new MediaElementPlayer("video", {
    	        success: function (video) {
    	            $(".video-overlay .close").live("click", function(){
    	                video.pause();
    	            });
                }
    	    });
    	} else {
    	    var video = new MediaElementPlayer("video", { 
    	        mode: 'shim', 
    	        success: function (video) {
    	            $(".video-overlay .close").live("click", function(){
    	                video.pause();
    	            });
                }
            });
        }
  }

  /* ----------  Custom scrolling using jquery tools ---------- */
  
  
  $(".genre").each(function(){//apply to each genre
  
    var pagewidth = 940; //the width of the content area 
    var shows = $(this).children("ul.shows");//the element to be scrolled back and forth
    var scrollbar = $(this).children(".scrollbar");//the scrollbar element (an HTML5 range input)
  
    //first check whether or not we need a scrollbar
    
    if(shows.children("li.show").size() > 4){    
    

      //set the width of the ul
      var ulwidth = 240*shows.children("li.show").size() - 20;
      shows.width(ulwidth);
    
      // initialize rangeinput
      scrollbar.rangeinput({
      
      	// slide the DIV along with the range using jQuery's css() method
      	onSlide: function(ev, step)  {
      		shows.css({marginLeft: -step});
      	},
      
      	// initial value. also sets the DIV's initial scroll position
      	value: 0,
      	
      	//the maximum scroll value (the width of all shows minus the content width)
      	max: (shows.width() - pagewidth),
      
      	// this is called when the slider is clicked. we animate the DIV
      	change: function(e, i) {
      		shows.animate({marginLeft: -i}, "fast");
      	},
      
      	// disable drag handle animation when when slider is clicked
      	speed: 0
      
      });
      
      scrollbar.show();
    }
    
    else{
      
      //scrollable area is too narrow, hide the range input
      scrollbar.remove();
    
    }
    
    
  });
  
   /* ----------  Gallery overlay ---------- */


  $("#view-gallery").one("click", function(){
      galleryInit();
  });
  
  //selecting another image
  $("#gallery ul li").live("click", function(){
      
    
    //change the selected thumb
    $(this).siblings().removeClass("selected");
    $(this).addClass("selected");
    
    var clickedImg = $(this).html();
    var clickedCap = $(this).children("img").attr("alt");
        
    setGalleryImg(clickedImg, clickedCap);
    
  });
  
  //prev/next image
  
  $("#gallery #gallery-viewer").live("click", function(){
  
    nextGalleryImg();
  
  });
  
  $("#gallery a#next-image").click(function(){  nextGalleryImg();  });
  $("#gallery a#prev-image").click(function(){  prevGalleryImg();  });
  
});


//gallery init function

function galleryInit(){
   
   var _firstImg = $("#gallery ul li:first-child").addClass("selected").find("img");
   _firstImg.clone().appendTo("div#gallery-viewer");
   
   
   $("#gallery-viewer").css({ height: _firstImg.attr("naturalHeight") + 40 });
   //$("p#gallery-caption").text(_firstImg.attr("alt"));
   
  
  //first image
  //getters
  /*var firstImg = $("#gallery ul li:first-child").addClass("selected").html();
  var firstCap = $("#gallery ul li:first-child img").attr("alt");
  
  //setters
  $("p#gallery-caption").html(firstCap);
  $("div#gallery-viewer").html(firstImg).css({ height: firstImg.height() });*/
    
}

function setGalleryImg(img, cap){

    $("div#gallery-viewer").prepend(img);
    //$("p#gallery-caption").html(cap);

    $("div#gallery-viewer img").not(":first").fadeOut(function(){
    
      $(this).remove();
      
      //size the overlay window appropriately
      var viewerheight = $("#gallery-viewer img").height() + 40;
      $("#gallery-viewer").animate({ height: viewerheight}, 250 );
    });
  
}

function nextGalleryImg(){
    
  if($("#gallery ul li.selected").next().html()){//if we're not at the end

    var nextImg = $("#gallery ul li.selected").next().html();
    var nextCap = $("#gallery ul li.selected").next().children("img").attr("alt"); 
    
    //add selected class
    $("#gallery ul li.selected").removeClass("selected").next().addClass("selected");
  }
  else{
     
    var nextImg = $("#gallery ul li:first").html();
    var nextCap = $("#gallery ul li:first").children("img").attr("alt"); 
    
    //add selected class
    $("#gallery ul li").removeClass("selected");
    $("#gallery ul li:first").addClass("selected");
  }
  
  setGalleryImg(nextImg, nextCap);
}


function prevGalleryImg(){
    
  if($("#gallery ul li.selected").prev().html()){//if we're not at the end

    var prevImg = $("#gallery ul li.selected").prev().html();
    var prevCap = $("#gallery ul li.selected").prev().children("img").attr("alt"); 
    
    //add selected class
    $("#gallery ul li.selected").removeClass("selected").prev().addClass("selected");
  }
  else{
       
    var prevImg = $("#gallery ul li:last").html();
    var prevCap = $("#gallery ul li:last").children("img").attr("alt"); 
    
    //add selected class
    $("#gallery ul li").removeClass("selected");
    $("#gallery ul li:last").addClass("selected");
  }
  
  setGalleryImg(prevImg, prevCap);
}

//function to change the slide title and link after image has cycled
function changeName(){
  
  var title = $(this).attr("title");
  var link = $(this).html();
  $("#slide-title").html(title);
  $("#read-more").html(link);
  Cufon.replace("#slide-title, #read-more");
}