// curently displayed site number
var open_site;// = "site_0";

// function to slide boxes over by one
function slide_boxes(direction)
{
  // moving left
  if(direction == "left")
  {
    // acting on the first box in the chain
    var first_box = $("div#portfolio-site-choser div.inner a").eq(0);

    // give this box a higher z-index to keep it above while animting
    $(first_box).css("z-index", "1001");

    // animate margin left down to -115 (includes border)
    $(first_box ).animate({marginLeft: "-115px", opacity: "0"}, 1000, "linear", function()
    {
      // move this box to the end of the chain
      $(this).appendTo("div#portfolio-site-choser div.inner");
    
      // reset the left margin and opacity
      $(this).css({marginLeft: "0px", opacity: "1"});
    });

    // reverse the z-index of the boxes
    var z_index = 1000;
  
    // re-scale boxes while moving, treating index 1 as 0, as 0 will be moved to back
    $("div#portfolio-site-choser div.inner a").each(function(i)
    {
      if(i > 0)
      {
        i--;
        
        var scale_by = (4 - (i/4)) / 4;
        
        // scale internal image
        var new_width = Math.round(135*scale_by);
        
        // move boxes to vertical center
        var padding_top = Math.round((100 - (100 * scale_by)) / 2);
      
        // only animate visible boxes (0 - 7)
        if(i <= 7)
        {
          $(this).children("img").animate({width: new_width}, 1000, "linear");
          $(this).animate({paddingTop: padding_top}, 1000, "linear");
        }
        else
        {
          $(this).children("img").css({width: new_width});
          $(this).css("padding-top", padding_top);
        }

        // adjust boxes z-index
        $(this).css("z-index", z_index);
        z_index--;
      }
    });
  }
  
  else if(direction == "right")
  {
    // acting on the last box in the chain
    var last_box = $("div#portfolio-site-choser div.inner a").eq($("div#portfolio-site-choser div.inner a").length-1);

    // give this box a higher z-index to keep it above while animting
    $(last_box).css("z-index", "1001");

    // move this box to the beginning of the chain
    $(last_box).prependTo("div#portfolio-site-choser div.inner");
    
    // reset the left margin and opacity
    $(last_box).css({marginLeft: "-115px", opacity: "0", paddingTop: "0px"});
    
    // reset image size
    $(last_box).children("img").css("width", "135px");
    
    // animate margin left down to -135 (includes border)
    $(last_box ).animate({marginLeft: "0px", opacity: "1"}, 1000, "linear");

    // reverse the z-index of the boxes
    var z_index = 1000;

    // re-scale boxes while moving, treating index 1 as 0, as 0 will be moved to back
    $("div#portfolio-site-choser div.inner a").each(function(i)
    {
      if(i >= 0)
      {
        //i--;

        var scale_by = (4 - (i/4)) / 4;

        // scale internal image
        var new_width = Math.round(135*scale_by);

        // move boxes to vertical center
        var padding_top = Math.round((100 - (100 * scale_by)) / 2);

        // only animate visible boxes (0 - 7)
        if(i <= 7)
        {
          $(this).children("img").animate({width: new_width}, 1000, "linear");
          $(this).animate({paddingTop: padding_top}, 1000, "linear");
        }
        else
        {
          $(this).children("img").css({width: new_width});
          $(this).css("padding-top", padding_top);
        }

        // adjust boxes z-index
        $(this).css("z-index", z_index);
        z_index--;
      }
    });
  }
}

$("document").ready(function()
{
  // stop outer website chooser being scrollable
  $("div#portfolio-site-choser").css("overflow", "hidden");

  // make boxes overlap each other
  $("div#portfolio-site-choser div.inner a").css({marginRight: "-20px", position: "relative"});
  
  // reverse the z-index of the boxes
  var z_index = 1000;
  
  // resize link boxes based on their position in line
  $("div#portfolio-site-choser div.inner a").each(function(i)
  {
    var scale_by = (4 - (i/4)) / 4;
    // scale internal image
    $(this).children("img").width(133*scale_by);
    
    // move boxes to vertical center
    var padding_top = (100 - (100 * scale_by)) / 2;
    $(this).css("padding-top", padding_top);
    
    // adjust boxes z-index
    $(this).css("z-index", z_index);
    z_index--;
  });
  
  // add scroll buttons
  $("div#portfolio-site-choser").after("<div id=\"ball-nav\"><a href=\"#\" id=\"scroll_left\"><img src=\"img/left-ball.gif\" /></a>  <a href=\"#\" id=\"scroll_right\"><img src=\"img/right-ball.gif\" /></a></div>");
  $("#scroll_left").click(function(){slide_boxes("left"); return false;});
  $("#scroll_right").click(function(){slide_boxes("right"); return false;});


  // make all but the first portfolio entry hidden
  $("div.portfolio-site").each(function(i)
  {
    if(i > 0) $(this).css("display", "none");
    else
    {
      open_site = this.id;
      //alert(this.id);
    }
  });
  
  $("div#portfolio-site-choser div.inner a").click(function()
  {
    // get the id of the div to fade in
    var div_id = $(this).attr("alt");

    $("#"+open_site).fadeOut(300, function()
    {
      $("#"+div_id).fadeIn(500);
      open_site = div_id;
    });


    
    return false;
  });
  
});