/* Desaturate */      
      
      var paircount = 0;

      function initImage(obj)
      {
        obj.onload = null;
        var $newthis = $(obj);
        
        if ($.browser.msie)
        {
          // You need this only if desaturate png with aplha channel
          $newthis = $newthis.desaturateImgFix();
        }
        

        // class for easy switch between color/gray version
        $newthis.addClass("pair_" + ++paircount);
        var $cloned = $newthis.clone().attr('id', '');
        // reset onload event on cloned object
        $cloned.get(0).onload = null;
        // add cloned after original image, we will switch between
        // original and cloned later
        $cloned.insertAfter($newthis).addClass("color").hide();
        // desaturate original
        $newthis = $newthis.desaturate();
        // add events for switch between color/gray versions
        $newthis.bind("mouseenter mouseleave", desevent);
        $cloned.bind("mouseenter mouseleave", desevent);
      };

      function desevent(event) 
      {
        var classString = new String($(this).attr('class'));
        var pair = classString.match(/pair_\d+/);
        // first I try was $("."+pair).toggle() but IE switching very strange...
        $("."+pair).hide();
        if (event.type == 'mouseenter')
          $("."+pair).filter(".color").show();
        if (event.type == 'mouseleave')
          $("."+pair).filter(":not(.color)").show();
      }


var img = null;

var top = 0;
var left = 0;
var speed = 300;

$(document).ready(function(){
     $(".portfolioGallery img").desaturate();

    $('.portfolioGallery li').bind("mouseover", function(){
        if ($(this).hasClass("two") || $(this).hasClass("five"))
            left = -74;
            
        if ($(this).hasClass("three") || $(this).hasClass("six"))
            left = -148; 
            
        if ($(this).hasClass("one") || $(this).hasClass("two") || $(this).hasClass("three"))
            top = -90;             

        if ($(this).hasClass("four") || $(this).hasClass("five") || $(this).hasClass("six"))
            top = -30;                      

        $(this).addClass("top");        
        $(this).stop().animate({"width": "222px", "height": "222px", "margin-top": top, "margin-left": left}, speed);}).mouseout(function(){
            $(this).stop().animate({"width": "74px", "height": "74px", "margin-top": 0, "margin-left": 0}, speed).removeClass("top");
            left = 0; 
            top = 0;          
    });
});