var currentPosition = 0;
var slideWidth = 950;
var videosLength = 0;
var descriptions = [];

// Get Holocene Music videos
$(document).ready(function() {
	$.getScript('http://vimeo.com/api/v2/album/193774/videos.json?callback=getVideos');
});

function getVideoEmbed(url) {
	$.getScript('http://www.vimeo.com/api/oembed.json?url=' + url + '&width=790&height=444&byline=0&title=0&portrait=0&color=FFFFFF&callback=appendVideoEmbed');
}

function getVideos(videos) {	
    $('#slides').append('<div id="slideInner"></div>');
    
    // Insert left and right arrow controls in the DOM
    $('#slideshow')
    .prepend('<span class="control" id="left">Move left</span>')
    .append('<span class="control" id="right">Move right</span>');

    // Hide left arrow control on first load
    manageControls(currentPosition);
  
    // Create event listeners for .controls clicks
    $('.control')
    .bind('click', function(){
      // Determine new position
      currentPosition = ($(this).attr('id')=='right')
    ? currentPosition+1 : currentPosition-1;

      // Hide / show controls
      manageControls(currentPosition);
      // Move slideInner using margin-left
      $('#slideInner').animate({
        'marginLeft' : slideWidth*(-currentPosition)
      });
    });
    
    // Create event listener for KILL THE LIGHTS
    $('#killthelights').toggle(
    function(){
	    $('#navcontainer').fadeOut('slow');
	    $('#logo').fadeOut('slow', function() {
	    	$('body').animate( { backgroundColor:"black" }, 1000);
	    	$('.slide p').animate( { color: "white" }, 1000 );
	    	$('.slide h2').animate( { color: "white" }, 1000 );
	    });
	},
    function(){
    	    $('.slide p').animate( { color: "black" }, 1000 );
	    	$('.slide h2').animate( { color: "black" }, 1000 );
	    	$('body').animate( { backgroundColor:"white" }, 1000, function(){
			    $('#navcontainer').fadeIn('slow');
	 		    $('#logo').fadeIn('slow');
	    	});
	});
    	
	// Load each video
	for (var i = 0; i < videos.length; i++) {
	var id = videos[i].id; 
	descriptions[id] = videos[i].description;
	videosLength = videos.length;
	getVideoEmbed(videos[i].url);
	}
	
	$('#killthelights').fadeIn('slow');
}

function appendVideoEmbed(video) {
	var currentDiv = '#video' + video.video_id;
	
	// Add wmode transparent to object and embed tags so artist dropdown covers video
	videoembed = unescape(video.html).replace('</object>','<param name="wmode" value="transparent"></object>');
	videoembed = videoembed.replace('<embed','<embed wmode="transparent"');
	
	$('#slideInner').append('<div class="slide" id="video' + video.video_id + '"><div class="video">' + videoembed + '</div></div>');
	$('#slideInner').css('width', slideWidth * videosLength);
	$(currentDiv).append('<h2>' + video.title + '</h2>');
	$(currentDiv).append('<p>' + descriptions[video.video_id] + '</p>');
}
  
// manageControls: Hides and shows controls depending on currentPosition
function manageControls(position){
    // Hide left arrow if position is first slide
    if(position==0){ $('#left').hide() }
    else{ $('#left').show() }
    // Hide right arrow if position is last slide
    if(position==videosLength-1){ $('#right').hide() }
    else{ $('#right').show() }
}