$(document).ready(function(){
  fixLists(); // fix margins for displaying the lists correctly
  
  initNavigation(); // set positions and :active for navigation elements
  handleNavigation(); // handle animations and content switch
  orderNavigation(); // order if predefined category
  onImageError(); // replace broken image links with placeholders
  initPictureOverlay();
  
  initArtistDescription();
  
  initPlaylist();
  makeTracksAddable(); // bind click-event to "add" button (for each track)
  
  initTrackAndArtistLists();
  navigateTopMusic();
  
  initPlayer();
  
  playTrack();

});

$(window).load(function() {
  initSearchDropdown(); // dropdown for the search input
    
  
  fitImages(".artists.big img"); // resize and resposition images (artists, album)
  fitImages(".artists.small img"); 
  fitImages(".artists.ultrasmall img");
  fitImages("#artist .side .img img");
});


function playTrack(){
  $('.tracks .play').live('click',function(){
    $id = $(this).attr("videoid");
    loadVideo($id);
    $('#track .artist').text($(this).parents('li').children('a').text());
    $('#track .track').text($(this).parents('li').children('span').text());
  });
}


function initPlaylist() {

  // TODO: reload Playlist form localStorage
  storage = $.store.get("9minutesPlaylist");
  if(storage !== undefined) {
    size = storage.length;
    for(i = 0; i < size; i++) {
      $('#playlist').append('<li videoid="'+ storage[i].videoid + '"><span>'+ storage[i].title + '</span> by <a href="#">' + storage[i].artist + '</a></li>');
      $listElement = $('#playlist li:eq('+i+')');
      $listElement.prepend('<img class="delete-handle" src="/images/ico/delete.png" />');
      $listElement.append('<img class="drag-handle" src="/images/ico/drag.png" />');
    }
  }

  $('ul#playlist').dragsort({
      dragSelector: '.drag-handle',
      dragEnd: savePlaylist,
      placeHolderTemplate: '<li class="placeholder">',
      scrollContainer: '#playlist-container'
  });
  
  $('#playlist .delete-handle').live("click", onRemoveTrackFromPlaylist);
  
  $('#player #icons .playlist').live("click", function(){
    $('#playlist-container').toggle();
  });
  
  $('#playlist-navigation .clear').live('click', function(){
    $('#playlist li').remove();
    $.store.clear();
  });
}

function savePlaylist() {
  var tracks = [];
  $('ul#playlist li').each(function(i) {
    tracks[i] = {
      title     : $(this).children('span').text(),
      artist    : $(this).children('a').text(),
      videoid   : $(this).attr('videoid')
    }
  });
  
  //console.log(tracks);
  $.store.set("9minutesPlaylist", tracks);
  //console.log("playlist saved ;)");
}

function makeTracksAddable() {
  $('.tracks li .add').live("click", onAddTrackToPlaylist);
}

function onAddTrackToPlaylist(event) {
  // if already in playlist
  $listElement = $(event.target).parents('li').clone();
  $vuid = $listElement.children('.play').attr('videoid');

  
  if ($('#playlist li[videoid='+$vuid+']').html() != null)
  {
    alert("Already in playlist!");
    return;
  }
  
  $listElement.children('img').remove();
  $listElement.attr('data-itemidx', 0); // important for dragsort plugin
  $listElement.attr('videoid', $vuid);
  $listElement.prepend('<img class="delete-handle" src="/images/ico/delete.png" />');
  $listElement.append('<img class="drag-handle" src="/images/ico/drag.png" />');
  $listElement.appendTo('#playlist');
  $listElement.hide(0, function() {
    $(this).slideDown(500);
  });
  savePlaylist();
}

function onRemoveTrackFromPlaylist(event) {
  $listElement = $(event.target).parent();
  $listElement.fadeTo(300, 0.1, function() {
    $(this).hide("blind", function() { 
      $(this).remove();
      savePlaylist();
    });
  });
}

function initPictureOverlay(){
  $('#artist .gallery a').live("click", function(){
    $src = $(this).attr("picture");
    $original = $(this).attr("original");
    $('#overlayGallery .original').hide().attr('href', $original);
    $('#overlayGallery .content .galleryimage').hide().attr('src', $src)
      .bind("load", function() {    
        $(this).fadeIn(300, function(){
          $('#overlayGallery .original').fadeIn(300);
        });
    });   
  }).hover(function(){
    $(this).append('<img src="/images/ico/gallery-fullscreen.png" class="fscreen" />');
    $posy = $(this).children("img").height() / 2 - $(this).children('.fscreen').height() / 2 + 8;
    $(this).children('.fscreen').css('top', $posy).fadeTo(400, 0.8);
  }, function(){
    $(this).children('.fscreen').remove();
  });
  $('#overlayGallery .close').click(function(){
    setTimeout(
      "$('#overlayGallery .content .galleryimage').attr('src', '/images/placeholder/gallery.png');"
    , 450);
  });
}

function sliderValueUpdate(b, u){
  if(b.parent().find("input").hasClass("vol"))
  {
    setVideoVolume(u.val());
    stopDraggingTime();
  }
  else seek(u.val());
}

function initPlayer(){
  $('#scrubbar input').rangeinput({
    progress: true,
    speed: 200
  });
  $('#volume input').rangeinput({
    progress: true,
    speed: 200
  });
  
  $('#player .play').live('click', function(){
    if($(this).hasClass('pause')) pauseVideo();
    else playVideo();
    
    $(this).toggleClass('pause');
  });
  
  
  $('#icons .volume').live('click', function(){
    $('#player #volume').fadeToggle(300);
  });
}


function getTimeFromInt(number) {
  var t = parseInt(number, 10);
  t %= 3600;
  var m = Math.floor(t / 60);
  var s = Math.floor(t % 60);
  return ((m >= 10) ? '' : '0') + m + ":" + ((s >= 10) ? '' : '0') + s;
}

function initTrackAndArtistLists(){
  $('.tracks li').each(function() {
    $count = parseInt($(this).parent().attr("count"));
    if($(this).parent().children().index(this)>=$count) $(this).hide();
  });
  $('#home .artists li').each(function() {
    $count = parseInt($(this).parent().attr("count"));
    if($(this).parent().children().index(this)>=$count) $(this).hide();
  });
}

function navigateTopMusic(){
  $('#home .navigate a').live('click', function(){
    $selector = $(this).closest("h2").next("ul");
    $id = $selector.children("li:visible").first();
    $start = $id.parent().children().index($id);
    $count = parseInt($selector.attr("count"));
    $size = $selector.children().size();
        
    if($(this).hasClass("left")) {
      $start -= $count;
      if($start < 0) return;
    }
    else {
      $start += $count;
      if($start >= $size) return;
    }
    
    $selector.children().hide();
    for($i=$start;$i<$start+$count;$i++)
      $selector.children("li:eq("+$i+")").show();
  });
}

function ajj(){
/*
  $('#myajax').load('/artists', function() {
    $(this).prepend("<b color='green'>FERTIG</b>");
  });*/
}


function initArtistDescription(){
  $("#artist .description .text a").each(function(){
    $text = $(this).html();
    $(this).after($text).remove();
  });
}


function fitImages(selector) {
  switch(selector)
  {
    case ".artists.big img": divWidth = 252, divHeight = 166; $x=true; break;
    case ".artists.small img": divWidth = 230, divHeight = 152; $x=true; break;
    case ".artists.ultrasmall img": divWidth = 170, divHeight = 112; $x=true; break;
    case "#artist .side .img img": divWidth = 363, divHeight = 241; break;
  }
	$(selector).each(function() {
		$(this).wrap("<div />");
		// use this instead of $(this).width(); because .width() of hidden images is zero!
		width = this.width;
		height = this.height;
    
		if( width < divWidth ) {
			scaleRatio = width / divWidth;
			width = divWidth;
			height /= scaleRatio;
		}
    else {
      scaleRatio = width / divWidth;
			width = divWidth;
			height /= scaleRatio;
    }
    
		if ( height < divHeight ) {
			scaleRatio = height / divHeight;
			height = divHeight;
			width /= scaleRatio;
		}
				
		posX = - (width - divWidth) / 2;
		posY = - (height - divHeight) / 8;
				
		$(this).css({
			"position" : "absolute",
			"width" : width,
			"height" : height,
			"top" : posY,
			"left" : posX
		});
    

      $(this).parent().parent().append('<div class="borderwrap"></div>');
      $(this).parent().parent().find(".borderwrap").css({
        "position" : "absolute",
        "width" : divWidth,
        "height" : divHeight,
        "top" : 0,
        "left" : 0
      });
	});
}


// search dropdown
function initSearchDropdown()
{
  // hover and out
  $("div[dropping]").hoverIntent(function(){
    $(this).children(".box").fadeIn(300);
  }, function(){
    $(this).children(".box").fadeOut(300);
  });
  
  // fade out if selected
  $("div[dropping] .box").live("click", function(){
    $(this).fadeOut(300);
  });
  
  $fm = $("#search_form").attr("action");
  $fm = $fm.split("#",1);
  $("div[dropping] .box li").live("click", function(){
    $("div[dropping] > span").html($(this).html());
    $("#search_form").attr("action", $fm+"#tab="+$(this).html().toLowerCase());
  });

}

// list fixes
function fixLists()
{
  $(".artists.small li:nth-child(4n)").css("marginRight", 0);
  $(".artists.ultrasmall li:nth-child(3n)").css("marginRight", 0);
  $(".tracks.tab li:nth-child(2n)").css("marginRight", 0);
  $("#artist .gallery a:nth-child(6n)").css("marginRight", 0);
  $("#home .artists li:nth-child(2n)").css("marginRight", 0);
}

// set positions for navigation elements
function initNavigation()
{
  // set hash if submitted by search form
  $str = $.deparam.fragment(window.location.href);
  $("#predefinedTab").text($str.tab);
  $searchTab = $("#predefinedTab").text();
  if($searchTab != "")
  {
    $fm = $("#search_form").attr("action");
    $fm = $fm.split("#",1);
    $("#search_form .selection .selected").text($searchTab);
    $("#search_form").attr("action", $fm+"#tab="+$searchTab.toLowerCase());
  }
  // add positions and hash control
  $(".navigation").each(function(){
    $i = 0;
    $(this).children().each(function(){
      $(this).attr("position", $i);
      $(this).attr("hashcontrol", $(this).text().replace(" ","+").toLowerCase());
      $i++;
    });
  });
  
  // add actives
  $i = 0;
  $('.navigation').each(function(){
    if($(this).hasClass("hash"))
    {
      $searchTab = $("#predefinedTab").text();
      if($(this).hasClass("main") && $searchTab != "")
      {
        $str = $searchTab;
        $("#search_form .selection .selected").text($searchTab);
      }
      else 
      {
        $str = $.deparam.fragment(window.location.href);
        $str = $str.tab;
      }
      $active = $(".navigation li[hashcontrol="+$str+"]");
      if($active.text() == "" || $active == null) $id = 0;
      else $id = $active.parent().children().index($active);
    }
    else $id = 0;
    
    $(this).children('li:eq('+$id+')').addClass('active');
    $('div[wheel]:eq('+$i+') > div:eq('+$id+')').addClass('active').css("opacity", 1.0).show();
    $i++;
  });
}


// order if predefined category
function orderNavigation(){
  $(".navigation.hash").each(function(){
    $str = $.deparam.fragment(window.location.href);
    $active = $(this).children("[hashcontrol="+$str.tab+"]");
    if($active.text() == "" || $active == null) return;
    
    $id = $active.parent().children().index($active);
    $size = $(this).children().size();
  
    for($i=0;$i<$id;$i++){
      $element = $(this).children(":eq("+$i+")");
      $(this).append("<li hashcontrol='"+$element.attr('hashcontrol')
      +"' position='"+$element.attr('position')+"'>"+$element.text()+"</li>");
    }
    for($i=0;$i<$id;$i++){
      $(this).children().first().remove();
    }
  });
}

// navigation handling
function handleNavigation()
{
  $("ul[steering] li").live("click", function(){
    if($(this).is('.active') || $(this).is(':animated')) return;
    
    // VARS
    $settings           = [];
    $fadeOutWidth       = 0;
    $settings['nav']    = $(this).parent();
    $settings['newpos'] = $settings['nav'].children().index(this);
    $settings['oldpos'] = $(this).attr("position");
    $settings['wheel']  = $settings['nav'].attr("steering");
    $settings['hash']   = $(this).attr("hashcontrol");
    $settings['speed']  = 300;
    $settings['range']  = 50;
    
    // for search bar
    if($(this).parent().hasClass("main"))
    {
      $fm = $("#search_form").attr("action");
      $fm = $fm.split("#",1);
      $("#search_form .selection > span").text($settings['hash']);
      $("#search_form").attr("action", $fm+"#tab="+$(this).html().toLowerCase());
    }
    
    // get the width of the navigation elements which will fade out
    for(var i=0; i<$settings['newpos'];i++){ 
      $fadeOutWidth += $settings['nav'].children("li:eq("+i+")").width(); 
    }
    
    // change :active
    $settings['nav'].children().removeClass("active");
    $(this).addClass("active");
    
    // change URL
    if(!$settings['nav'].hasClass('sub')){
      $str = $.param.fragment(window.location.href, 'tab='+$(this).attr("hashcontrol"));
      window.location.href = $str;
    }
    
    // move navigation container
    $settings['nav'].animate({
      marginLeft: -$fadeOutWidth-5
    }, $settings["speed"]*1.25);

    // move navigation elements
    for(var i=0; i<$settings['newpos'];i++){
      $element = $settings['nav'].children("li:eq("+i+")");
      $element.animate({
        opacity: 0
      }, $settings["speed"]*1.5, function(){
        $settings['nav'].css("marginLeft", 0);
        $(this).remove();
      });
      
      $settings['nav'].append("<li style='opacity:0;margin-left: 20px;' hashcontrol='"+$element.attr('hashcontrol')+"' position='"+$element.attr('position')+"'>"+$element.text()+"</li>");
      $settings['nav'].children().last().animate({
        opacity: 1, marginLeft: 0
      }, $settings["speed"]*2);
    }
    
    // animation for content
    $("div[wheel="+$settings['wheel']+"] > .active").css("left", 0).animate({
      left: -$settings["range"], opacity: 0
    }, $settings["speed"], function(){
      $(this).hide();
      $("div[wheel="+$settings['wheel']+"] > div:eq("+$settings['oldpos']+")")
        .css("left", $settings["range"])
        .show().addClass("active")
        .animate({
          left: 0, opacity: 1
        }, $settings["speed"]);
      })
      .removeClass("active");
      $("div[wheel="+$settings['wheel']+"] > div:eq("+$settings['oldpos']+") ul").each(function(){
        $x = 0;
        $size = $(this).children("li").size() / 10;
        $(this).children("li").hide().each(function(){
          showBox(this, $x, $settings["speed"]);
          $x+= 70 / $size;
        });
      });
  });
}
function showBox(onebox, y, speed)
{
  setTimeout(function(){
    $(onebox).fadeIn(speed+200);
  }, y);
}

// Overlay
function overlay(id)
{
    $.blockUI({ 
      message:   $(id), 
      timeout:   0,
	    fadeIn:    200, 
	    fadeOut:   300
    });     
    $(id+" .close").click(function() {
        $.unblockUI(); 
        return false; 
    });
}



function onImageError(){
  $("img").error(function () {
    if($(this).width() < 60) $src = "/images/placeholder/album.png";
    else $src = "/images/placeholder/artist.png"
    
    $(this).unbind("error").attr("src", $src);
  });
}