$(document).ready(function() {
  
  var mediaContent = $('a.autoplayMusic').attr('href');           
  
  calculateAndSetPageWidths(); 
  
  $(window).resize(function() {
    calculateAndSetPageWidths();
  });
  
  $('#brandingSection #navigationSection a img').hover(
      function() {
      $(this).stop().fadeTo('fast', 0.3);
      },
      function() {
      $(this).stop().fadeTo('slow', 1.0);
    }); 

  $('div#images .rowImage a').hover(
           
  //Mouseover, fadeIn the hidden hover class    
    function() {
        $(this).children('div').stop(true, true).fadeIn('700');
        $(this).children('img').stop(true, true).fadeOut('700');
    },

    //Mouseout, fadeOut the hover class  
    function() {  

      $(this).children('div').stop(true, true).fadeOut('350');
      $(this).children('img').stop(true, true).fadeIn('350');
 
    });
    
    $('div#showTheLove').click(
           
      //Mouseover, fadeIn the hidden hover class    
      function() {
      
    
        $('#galleryItemWrapper').cycle({
    		  fx: 'fade' // choose your transition type, ex: fade, scrollUp, shuffle, etc...
    	  });
    	  
        $('#showTheLove .galleryWrapper').stop(true, true).fadeIn('700');
        $('#showTheLoveGalleryStop').css('display', 'block');
        
        calculateAndSetPageWidths();
            
        if ($.cookie("muteSound") == null || 
            $.cookie("muteSound") == "" || 
            $.cookie("muteSound") == "muteOff") 
        {
          $('#mediaContainerWrapper').toggle();
          $('#mediaContainerWrapper embed').remove();
          $('#mediaContainerWrapperForSlideshow').toggle();
          try {
            $('#mediaContainerForSlideshow').append('<embed src="' + "http://www.yourownapplication.com/TakeAimPhotography/wp-content/uploads/2010/10/02TheOJaysLoveTrain.mp3" + '"  TYPE="audio/mp3" width="' + '220' + '" height="24" autoplay="true" hidden="true" loop="false" volume="100" />');
          } catch (e) {
            alert('caught exception ' + e);
          }
        } else {
        }
      }
    );   
    
  $('div#showTheLoveGalleryStop, #CloseGalleryButton a').click(
      //Mouseout, fadeOut the hover class  
      function(event) {
        event.stopPropagation();
        $('#showTheLove .galleryWrapper').stop(true, true).fadeOut('350');
        $('#showTheLoveGalleryStop').stop(true, true).fadeOut('350');
        if ($.cookie("muteSound") == null || 
            $.cookie("muteSound") == "" || 
            $.cookie("muteSound") == "muteOff") 
        {
          $('#mediaContainerWrapper').toggle();
          $('#mediaContainerWrapperForSlideshow').toggle();
          $('#mediaContainerWrapperForSlideshow embed').remove();
          $('#mediaContainer').append('<embed src="' + mediaContent + '"  TYPE="audio/mp3" width="' + '220' + '" height="24" autoplay="true" hidden="true" loop="false" volume="100" />');
        } else {
        }
      }
    );
    
    // Remove the height and width from the gallery-item tags. 
    $('div#showTheLove .gallery .gallery-item').css('height', '');
    $('div#showTheLove .gallery .gallery-item').css('width', '');
    
    // Remove the height and width from the image tags. 
    $images = $('div#showTheLove .gallery .gallery-item img');
    $images.css('height', '');
    $images.css('width', '');
    $images.removeAttr('height');
    $images.removeAttr('width');
    
    $gallery = $('div#showTheLove .gallery');
    $gallery.append($('<div id="galleryItemWrapper"></div>'));
    $('#galleryItemWrapper').append($('div#showTheLove .gallery .gallery-item'));
    $gallery.children('br').remove();
    // $('#images').append($gallery);
    
    
    /*Animate the Show the Love Logo */
    $('#showTheLoveHoverAnchor').hover(
           
      //Mouseover, fadeIn the hidden hover class    
      //Mouseover, fadeIn the hidden hover class    
      function() {  
        $(this).children('#showTheLoveImage').stop(true, true).animate({
          width: '100%',
          //left: '-35px',
        }, 400, function() {
          // Animation complete.
        });
  
      },
  
      //Mouseout, fadeOut the hover class  
      function() {
        $(this).children('#showTheLoveImage').stop(true, true).animate({
          width: '85%',
          //left: '-35px',
        }, 50, function() {
          // Animation complete.
        });
      }
    );
    
});

function calculateAndSetPageWidths() {    
    
  var galleryHeight = $(window).height() - 5;
  var calculatedWidth = galleryHeight * 1.45;
  
  var galleryWidth = $(window).width();
  var calculatedHeight = galleryWidth / 1.45;
  
  if (calculatedHeight < galleryHeight) {
    galleryHeight = calculatedHeight;
  } else {
    galleryWidth = calculatedWidth;
  }
  
  var pageHeight = galleryHeight;
  var pageWidth = galleryWidth; 
  
  galleryHeight = (galleryHeight / 1.3012);
  galleryWidth = (galleryWidth / 1.2506);
  
  $('#row1').css('line-height', '' + (galleryHeight * .394) + "px");
  $('#row2').css('line-height', '' + (galleryHeight * .39) + "px");
  $('#row3').css('line-height', '' + (galleryHeight * .199) + "px");
  $('#image8, #image9').height(galleryHeight * .199);
  $('#showTheLove').css('line-height', '' + (galleryHeight * .199) + "px");
                                                           
  $('#images').height(galleryHeight).width(galleryWidth).css('top', '' + galleryHeight * 0.1506 + 'px');
  
  //Image 3 height = (row2 height - margin (2%)) / 2;
  var image3Height = (galleryHeight * (.4) ) / 2 ;
  
  $('#image3 .rowImage').height(image3Height).css('line-height', '' + image3Height + 'px');
  
  var image9Margin = (image3Height - 50) / 2;
  if (image9Margin < 0) {
     image9Margin = 0;
  }
  $('#image9 div').css('padding', '' + image9Margin + 'px 0 ' + (image9Margin + 5) + 'px 0');       
  
  var image7Height = galleryHeight * .198;
  
  $('#image7 .rowImage').height(image7Height).css('line-height', '' + image7Height + 'px');
                                                                   
  $('#content').height(pageHeight).width(pageWidth);              
        
  $('#galleryItemWrapper .gallery-item').css('height', '' + (0.47 * galleryHeight) + 'px') 
    .css('width', '' + (0.51 * galleryWidth) + 'px');
}