$(function() {
  $('a[rel=lightbox]').facebox({
    loading_image : 'loading.gif', 
    close_image : 'closelabel.gif',
    opacity: 0.6
  });
  
  $('div.controls a .hover').css('opacity', 0);
  
  // work widget
  $('#controls li a').hover(function() {

    // Stuff that happens when you hover on + the stop()
    $('.hover', this).stop().animate({
      'opacity': 1
      }, 700)

    },function() {

      // Stuff that happens when you unhover + the stop()
      $('.hover', this).stop().animate({
        'opacity': 0
        }, 500)

      })

  $('#controls a.control').click(function() {
    var img = $(this).attr('rel').split('|')[0],
    link = $(this).attr('rel').split('|')[1],
    title = $(this).attr('title');
    // background image
    imgSrc = '/img/work_widget/' +  img + '_shot.jpg';
    
    // set bg's and text and link
    $('div.shot-panel img').attr('src', imgSrc);
    $('div.shot-panel a.img-link').attr('href', link);
    $('div.shot-panel a.img-link').attr('title', title);
    
  });
       
  var url = window.location.href.split('#');
  
  // services page, if the url already has a # in it
  if (url[0].split('/')[3] != 'summary') {
    if (url.length == 2) {
      if (url[1].match(/-page$/)) {
        $('#' + (url[1].replace(/\-page$/, ''))).click();
        
      } else {
        $('div.service').animate({'border': '0'}, 500, null, function() {
          $('div.service').removeAttr('style');
        });
        $('h3.' + url[1]).parent().animate({'border': '1px #f58220 solid'}, 500);
        $('body').animate({scrollTop: $('h3.' + url[1]).offset().top - ($(window).height() / 3)}, 1000);
      }
    }
  }
  
  // services page, when the li's at the top are clicked
  $('body.services a.services').click(function() {
    var link = $(this).attr('rel');
    $('div.service').animate({'border': '0'}, 500, null, function() {
      $('div.service').removeAttr('style');
      // alert('This happened!');
    });
    $('h3.' + link).parent().animate({'border': '1px #f58220 solid'}, 500);
    $('body').animate({scrollTop: $('h3.' + link).offset().top - ($(window).height() / 3)}, 1000);
  });
  
  // services page, click on a "top" link
  $('body.services a.top').click(function(event) {
    event.preventDefault();
    $('div.service').animate({'border': '0'}, 500, null, function() {
      $('div.service').removeAttr('style');
    });
    $('body').animate({scrollTop: 0}, 1000);
  });
  
  $('form.styled input[type="text"], form.styled textarea, form.styled input[type="text"]').focus(function() {
    $(this).addClass('active');
  }).blur(function() {
    $(this).removeClass('active');
  });
  
  //page peel
  $('.pageFlip').hover(function() { //On hover...
  	$('.pageFlip img, .message').stop()
  		.animate({ //Animate and expand the image and the msg_block (Width + height)
  			width: '307px',
  			height: '319px'
  		}, 500);
  	} , function() {
  	$('.pageFlip img').stop() //On hover out, go back to original size 50x52
  		.animate({
  			width: '50px',
  			height: '52px'
  		}, 220);
  	$('.message').stop() //On hover out, go back to original size 50x50
  		.animate({
  			width: '50px',
  			height: '50px'
  		}, 200); //Note this one retracts a bit faster (to prevent glitching in IE)
  });
  
  // basket proceed buttons
  $('.basket-proceed').click(function(event) {
    event.preventDefault();
    $('.basket').submit();
  });
  
  // callback submit button
  $('.callback-submit').click(function(event) {
    event.preventDefault();
    $('.callback-form').submit();
  });
});