$(function() {
  var totalPanels     = $(".scrollContainer").children().size();
    
  var regWidth      = $(".panel").css("width");
  var regHeight     = $(".inside").css("height");
  var regImgWidth     = $(".inside img").css("width");
  var regTitleSize    = $(".panel h2").css("font-size");
  var regParSize      = $(".panel p").css("font-size");
  
  var movingDistance      = 0;
  
  var curWidth      = 40;
  var curImgWidth     = 200;
  var curTitleSize    = "20px";
  var curParSize      = "15px";

  var $panels       = $('#slider .scrollContainer > div');
  var $container      = $('#slider .scrollContainer');

  $panels.css({'float' : 'left','position' : 'relative'});
    
  $("#slider").data("currentlyMoving", false);

  $container
    .css('width', ($panels[0].offsetWidth * $panels.length) + 100 )
    .css('padding', "0 20px"  )
    .css('left', "20px");

  var scroll = $('#slider .scroll').css('overflow', 'hidden');

  function returnToNormal(element) {
    var fiveback = "#panel_"+(element.substr(7,2)-5)
    var fiveback = "#panel_"+(element.substr(7,2)-5)
    var fiveback = "#panel_"+(element.substr(7,2)-5)
    var fourback = "#panel_"+(element.substr(7,2)-4)
    var threeback = "#panel_"+(element.substr(7,2)-3)
    var twoback = "#panel_"+(element.substr(7,2)-2)
    var oneback = "#panel_"+(element.substr(7,2)-1)
    var curent = "#panel_"+element.substr(7,2)
    var onenext = "#panel_"+(parseInt(element.substr(7,2))+1)
    var twonext = "#panel_"+(parseInt(element.substr(7,2))+2)
    var threenext = "#panel_"+(parseInt(element.substr(7,2))+3)
    var fournext = "#panel_"+(parseInt(element.substr(7,2))+4)
    var fivenext = "#panel_"+(element.substr(7,2)+5)
    
    
    //Set elements 3, 4 and 5 back
    $(fiveback).css({"visibility":"visible"})
    $(fourback).css({"visibility":"visible"})
    $(threeback).css({"visibility":"visible"})
    
    
    //Set element 2 back
    $(twoback).css({"width":"30","margin-top":"10px","z-index":"-2"})
    $(twoback+" .inside").css({"height":"30px"})
    
    
    
    //Set element 1 back
    $(oneback).css({"margin-top":"5px","z-index":"-1"})
    $(oneback+" .inside").css({"height":"40px"})
    
    
    
    //Set curent element
    $(curent).css({"z-index":"1"})
    
    
    
    //Set element 1 next
    $(onenext).css({"margin-top":"5px","z-index":"-1"})
    $(onenext+" .inside").css({"height":"40px"})
    
    
    
    //Set element 2 next
    $(twonext).css({"width":"30","margin-top":"10px","z-index":"-2","background":"transparent","margin-top":"10px"})
    $(twonext+" .inside").css({"height":"30px"})
  
  
  
    //Set elements 3, 4 and 5 next
    $(threenext).css({"visibility":"visible"})
    $(fournext).css({"visibility":"visible"})
    $(fivenext).css({"visibility":"visible"})
    
    
    
    $(element).css({"margin":"20px -10px 0 -10px"})
    $(element+" .inside").css({"height":regHeight})
    $(element)
      .css({ width: regWidth })
      .find("p")
      .css({ fontSize: regParSize });
  };
  
  
  
  function growBigger(element) {
    var fiveback = "#panel_"+(element.substr(7,2)-5)
    var fourback = "#panel_"+(element.substr(7,2)-4)
    var threeback = "#panel_"+(element.substr(7,2)-3)
    var twoback = "#panel_"+(element.substr(7,2)-2)
    var oneback = "#panel_"+(element.substr(7,2)-1)
    var curent = "#panel_"+element.substr(7,2)
    var onenext = "#panel_"+(parseInt(element.substr(7,2))+1)
    var twonext = "#panel_"+(parseInt(element.substr(7,2))+2)
    var threenext = "#panel_"+(parseInt(element.substr(7,2))+3)
    var fournext = "#panel_"+(parseInt(element.substr(7,2))+4)
    var fivenext = "#panel_"+(element.substr(7,2)+5)
    
    
    //Set elements 3, 4 and 5 back
    $(fiveback).css({"visibility":"hidden","display":"none"})
    $(fourback).css({"visibility":"hidden","display":"none"})
    $(threeback).css({"visibility":"hidden","display":"none"})
    
    
    //Set element 2 back
    $(twoback).css({"width":"20","margin-top":"10px","z-index":"-2","display":"inline","margin":"10px -20px"})
    $(twoback+" .inside").css({"height":"33px"})
    $(twoback+" .inside .month").css({"font-size":"8px"})
    $(twoback+" .inside .content").css({"height":"17px","margin-top":"0"})
    $(twoback+" .inside .content .nr").css({"font-size":"7px","padding-top":"0px"})
    $(twoback+" .inside .content .text").css({"font-size":"7px"})
    
    
    
    //Set element 1 back
    $(oneback).css({"margin-top":"5px","z-index":"-1","display":"inline","margin":"5px -10px"})
    $(oneback+" .inside").css({"height":"43px"})
    $(oneback+" .inside .month").css({"font-size":"10px"})
    $(oneback+" .inside .content").css({"height":"27px","margin-top":"0"})
    $(oneback+" .inside .content .nr").css({"font-size":"12px","padding-top":"0px"})
    $(oneback+" .inside .content .text").css({"font-size":"8px"})
    
    
    
    //Set curent element
    $(curent).css({"z-index":"1","display":"inline","margin":"0 5px"})
    
    
    
    
    //Set element 1 next
    $(onenext).css({"margin-top":"5px","z-index":"-1","display":"inline"})
    $(onenext+" .inside").css({"height":"43px"})
    $(onenext+" .inside .month").css({"font-size":"10px"})
    $(onenext+" .inside .content").css({"height":"27px","margin-top":"0"})
    $(onenext+" .inside .content .nr").css({"font-size":"12px","padding-top":"0px"})
    $(onenext+" .inside .content .text").css({"font-size":"8px"})
    
    
    
    //Set element 2 next
    $(twonext).css({"width":"20","margin-top":"10px","z-index":"-2","display":"inline","margin":"10px -20px"})
    $(twonext+" .inside").css({"height":"33px"})
    $(twonext+" .inside .month").css({"font-size":"8px"})
    $(twonext+" .inside .content").css({"height":"17px","margin-top":"0"})
    $(twonext+" .inside .content .nr").css({"font-size":"7px","padding-top":"0px"})
    $(twonext+" .inside .content .text").css({"font-size":"7px"})
  
  
  
    //Set elements 3, 4 and 5 next
    $(threenext).css({"visibility":"hidden","display":"none"})
    $(fournext).css({"visibility":"hidden","display":"none"})
    $(fivenext).css({"visibility":"hidden","display":"none"})
    
    
    
    
    
    
    $(element).css({"margin":"0"});
    $(element).css({"z-index":"1"});
    $(element+" .inside").css({"height":"50px"});
    $(element+" .inside .month").css({"font-size":"13px"});
    $(element+" .inside .content").css({"height":"33px"});
    $(element+" .inside .content .nr").css({"font-size":"16px","padding-top":"2px"});
    $(element+" .inside .content .text").css({"font-size":"0.5em"});
    
    $(element)
      .css({ width: curWidth })
      .find("p")
      .css({ fontSize: curParSize });
  }
  
  //direction true = right, false = left
  function change(direction) {
     
      //if not at the first or last panel
    if((direction && !(curPanel < totalPanels)) || (!direction && (curPanel <= 1))) { return false; } 
        
        //if not currently moving
        if (($("#slider").data("currentlyMoving") == false)) {
            
      $("#slider").data("currentlyMoving", true);
      
      var next         = direction ? curPanel + 1 : curPanel - 1;
      var leftValue    = $(".scrollContainer").css("left");
      var movement   = direction ? parseFloat(leftValue, 10) - movingDistance : parseFloat(leftValue, 10) + movingDistance;
    
      $(".scrollContainer")
        .stop()
        .animate({
          "left": movement
        }, function() {
          $("#slider").data("currentlyMoving", false);
        });
      
      returnToNormal("#panel_"+curPanel);
      growBigger("#panel_"+next);
      
      curPanel = next;
      
      //remove all previous bound functions
      $("#panel_"+(curPanel+1)).unbind(); 
      
      //go forward
      $("#panel_"+(curPanel+1)).click(function(){ change(true); });
      
            //remove all previous bound functions                             
      $("#panel_"+(curPanel-1)).unbind();
      
      //go back
      $("#panel_"+(curPanel-1)).click(function(){ change(false); }); 
      
      //remove all previous bound functions
      $("#panel_"+curPanel).unbind();
    }
  }
  
  // Set up "Current" panel and next and prev
  var ob = new Date();
  curMonth = parseInt(ob.getMonth())+1;
  growBigger("#panel_"+curMonth);
  var curPanel = curMonth;
  
  $("#panel_"+(curPanel+1)).click(function(){ change(true); });
  $("#panel_"+(curPanel-1)).click(function(){ change(false); });
  
  //when the left/right arrows are clicked
  $(".right").click(function(){ change(true); }); 
  $(".left").click(function(){ change(false); });
  
  /*$(window).keydown(function(event){
    switch (event.keyCode) {
      case 13: //enter
        $(".right").click();
        break;
      case 32: //space
        $(".right").click();
        break;
      case 37: //left arrow
        $(".left").click();
        break;
      case 39: //right arrow
        $(".right").click();
        break;
    }
  });*/
  
});