var $cards=new Array();
var $first=new Array();
var hoversize=5;

$(function() {
 switcInit();
});


function switcInit(){
  $("#switch_container .cards").each(function(i){
    $(this).attr("rel",i);
        $cards[i]=$(this);
        $first[i]=new Array();
        $first[i]['id']=$(this).attr("id");
        $first[i]["top"]=$(this).css("top");
        $first[i]["topnum"]= $(this).position().top;
        $first[i]["left"]=$(this).css("left");
        $first[i]["leftnum"]= $(this).position().left;
        $first[i]["z-index"]=$(this).css("zIndex");
    binding(i);
  });
}

function binding(i){
      var $item=$cards[i];
      if (!$item.hasClass('first')){
          $item.css({'cursor':'pointer'});
          $item.bind({
            mouseenter: function(){
              hovereventOn(i);
            },
            mouseleave: function(){
              hovereventOff(i);
            },
            click: function(){
              clickevent(i);
            }
          });
    }
}

function bindall(){
   $("#switch_container .cards").each(function(i){ 
      if (!$(this).hasClass('first')){
          $(this).css({'cursor':'pointer'});
          $(this).bind({
              mouseenter: function(){
                hovereventOn(i);
              },
              mouseleave: function(){
                hovereventOff(i);
              },
              click: function(){
                clickevent(i);
              }
          });
      }
   });
}


function unbindall(){
    $item=$("#switch_container .cards");
    $item.css({'cursor':'default'});
    $item.unbind("mouseenter");
    $item.unbind("mouseleave");
    $item.unbind("click");

}

function unbinding(i){
      var $item=$cards[i];
      $item.css({'cursor':'default'});
      $item.unbind("mouseenter");
      $item.unbind("mouseleave");
      $item.unbind("click");
}

function hovereventOn(i){
  var $item=$cards[i];
  var $t=$first[$item.attr("rel")]["topnum"]-hoversize+"px";
  if (!$item.hasClass('first')){
          $item.stop(true, false).animate(
           {
            top:$t
           },
           300
          );
      }
}
    
function hovereventOff(i){
  var $item=$cards[i];
  var $t=$first[$item.attr("rel")]["topnum"]+"px";
      if (!$item.hasClass('first')){
          $item.stop(true, false).animate({
           top:$t
          },300);
      }
}

function clickevent(i){
    var $current=$cards[i];
    var speed=400;
    if (!$current.hasClass('first')){
       unbindall();
       var $fz=$current.css("zIndex");
       var npos=$current.attr("rel");
       
       //amire kattiontottam
       
       if (!$.browser.msie ) {
         $current.css({opacity: 0.25,"z-index":$first[0]["z-index"]});
       }else $current.css({opacity: 0.25,"z-index":$first[0]["z-index"],"background":"#fff"});
       
       $current.animate({
         "top":$first[0]["top"],
         "left":$first[0]["left"] 
        },
        speed,
        'linear',
        function(){
           $current.css({'cursor':'default'});
           $current.toggleClass('first');
           $current.attr('rel',0);
        });

       //ami a legelső pozícióban van
       if (!$.browser.msie ) {
            $("#"+$first[0]['id']).css({opacity: 0.25,"z-index":0});
       }else $("#"+$first[0]['id']).css({opacity: 0.25,"z-index":0,"background":"#fff"});
       
       $("#"+$first[0]['id']).animate({
               "top":$first[npos]["top"],
               "left":$first[npos]["left"],
               "z-index": $fz
            },
            speed,
            'linear',
            function(){
               $("#"+$first[0]['id']).toggleClass('first');
               if (!$.browser.msie ) {
                   $("#"+$first[0]['id']).fadeTo(
                      100, 
                      1
                   );

                        $current.fadeTo(
                          100, 
                          1, 
                          function(){
                            bindall();
                          }
                        );


               }else{
                 $("#"+$first[0]['id']).css({opacity: 1,"filter":"","background":"transparent" });
                 $current.css({opacity: 1,"filter":"","background":"transparent" });
                 bindall();
               } 
               $("#"+$first[0]['id']).attr("rel",npos);
               $first[0]['id']=$current.attr("id");
            }
        ); 
        
    }else {
      return false;
    }
}