// -*- coding:utf-8 -*-



function animateWork(object, topValue, leftValue){
  object.animate({ top: topValue + "px", left: leftValue + "px"}, 1000);
  object.addClass("displaced");
}


function animateToFirst(objects){
  var animated = [];
  objects.each(function(index) {
      workId = getSelector($(this), "work");

      if(!animated.find(".work-" + workId)){
	animated[animated.length] = ".work-" + workId;
	$current = $(".work-" + workId).random();
	topValue = getSelector($current, "top");
	leftValue = getSelector($current, "left");

	$(".work-" + workId).each(function(index) {
	    animateWork($(this), topValue, leftValue);
	  });
      }
    });
  $("#panel").removeClass("animate");
}

function resetPanel(){

  $("#panel .displaced").each(function(index) {
      topValue = getSelector($(this), "top");
      leftValue = getSelector($(this), "left");
      $(this).css("top", topValue + "px");
      $(this).css("left", leftValue + "px");
    });
  $("#panel .work").removeClass("hide");
  $("#panel").addClass("animate");


}


function getSelector(object, classname){
  var classes = object.attr("class").split(' ');
  var i;
  for (i in classes){
    var s = classes[i].toString().split('-');
    if (s.length == 2){
      if (s.slice(-2, -1) == classname){
	return s.slice(-1);
      }
    }
  }
}


Array.prototype.find = function(searchStr) {
  var returnArray = false;
  for (i=0; i<this.length; i++) {
    if (typeof(searchStr) == 'function') {
      if (searchStr.test(this[i])) {
        if (!returnArray) { returnArray = []; }
        returnArray.push(i);
      }
    } else {
      if (this[i]===searchStr) {
        if (!returnArray) { returnArray = []; }
        returnArray.push(i);
      }
    }
  }
  return returnArray;
}



$(document).ready(function(){

    var work_list = [];
    $('ul#work-list li').each(function() {
        key = parseInt($(this).attr('id'));
        work_list[key] = $(this).text();
    });


    $("#panel a").click(function(event){

    if($("#panel").hasClass("animate")){

	  event.preventDefault();
	  event.stopPropagation();


	  workId = getSelector($(this).find("div"), "work");
	  yearId = getSelector($(this).find("div"), "year");
	  topValue = getSelector($(this).find("div"), "top");
	  leftValue = getSelector($(this).find("div"), "left");


	  $(".work").not(".year-"+ yearId).addClass("hide");

	  $("#year-list .year").removeClass("selected");
	  year_link = $("#year-list #year-" + yearId);
      year_link.addClass("selected");
      year_link.text(year_link.attr("id").substring(5, 9));

	  $(".work-" + workId).each(function(index) {
	      animateWork($(this), topValue, leftValue);
	    });

	  animateToFirst($(".year-"+ yearId).not(".work-" + workId));
      return;
	}
    window.location = $(this).attr('href');
      });




    $("#year-list .year").click(function(event) {
        resetPanel();
        var yearSelector = $(this).attr("id");
        $("#year-list .year").each(function() {
            $(this).removeClass("selected");
            $(this).not("#all-years").text($(this).attr("id").substring(7, 9));
            if ($(this).text() == '00') {
                $(this).text('<00');
            }
        });
        $(this).addClass("selected");
        if ($(this).attr("id") != "all-years") {
            $(this).text($(this).attr("id").substring(5, 9));
            if ($(this).text() == '2000') {
                $(this).text('<2000');
            }
            animateToFirst($("#panel ."+ yearSelector));
            $(".work").not("." + yearSelector).addClass("hide");
        }
    });

    $("#year-list .year").hover(
        function() {
            if ($(this).attr("id") != "all-years") {
                $(this).text($(this).attr("id").substring(5, 9));
                if ($(this).text() == '2000') {
                    $(this).text('<2000');
                }
            }
        },
        function() {
            if (!$(this).hasClass('selected')) {
                $(this).not("#all-years").text($(this).attr("id").substring(7, 9));
                if ($(this).text() == '00') {
                    $(this).text('<00');
                }
            }
        }
    );

    $("#panel a").hover(
        function() {
            workId = getSelector($(this).find("div"), "work");
            $('#work-title').html(work_list[workId]);
        },
        function() {
            $('#work-title').html('&nbsp;');
        }
    );

    $('.scrollable').scrollable()
    var api = $(".scrollable").data("scrollable");
    api.end(0);

});