$(function() {
  //----------------------------------//
  // Setup Rel attribute on Areas     //
  //----------------------------------//    
  $("#cards area").each( 
    function(intIndex){
      $(this).attr("rel", $(this).attr("class") );
    }
  );

  //----------------------------------//
  // Setup Overlay                    //
  //----------------------------------//
  $(".cardLinks[rel]").overlay({
    expose: '#ffffff',
    onBeforeClose: function(){
      $('img[overlay="true"]').attr("src", '/incl/images/card_bg.png');
    }
  });
  $("#cards area[rel]").overlay({
    expose: '#ffffff',
    onBeforeClose: function(){
      $('img[overlay="true"]').attr("src", '/incl/images/card_bg.png');
    }
  });
  
  //----------------------------------//
  // Postcards
  //----------------------------------//
  $('#CntCardsWrapper area').hover(function() {
    var imgSrc = 'incl/images/'+$(this).attr("id")+'.jpg';
    $('#cardsImg').attr("src", imgSrc);
  });
  $('.overlay .toggle').click(function() {
    if($(this).hasClass("front")) {
      $(this).removeClass('front').addClass('back');
      var overlaySrc = '/incl/images/card3.png';
      $('img[overlay="true"]').attr("src", overlaySrc);
    }else{
      $(this).removeClass('back').addClass('front');
      var overlaySrc = '/incl/images/card3.png';
      $('img[overlay="true"]').attr("src", overlaySrc);
    }
  });

  //----------------------------------//
  // Logo link
  //----------------------------------//
  $('#logoLink').hover(
    function(){ 
     $(this).css({cursor: 'pointer'}); 
    },
    function(){ 
     $(this).css({opacity: 'default'}); 
    }
   );
  
  $('#logoLink').click(function() {
    window.open('http://www.hireserve.nl');
    return false;
  });
  $('.logoLink').hover(
    function(){ 
     $(this).css({cursor: 'pointer'}); 
    },
    function(){ 
     $(this).css({opacity: 'default'}); 
    }
   );
  
  $('.logoLink').click(function() {
    window.open('http://www.hireserve.nl');
    return false;
  });
 //$('img').pngFix();
});