/**
 * XenTan homepage enhancement
 *
 * @author Jim Tunstall <jtunstall@doc-net.com>
 * @copyright Copyright &copy; 2009, Doctor Net Limited
 * @package XenTan
 */
$(document).ready(function(){
   //image_text_slide();

   // Homepage image cycle can be implemented in different ways according to requirements
   //banner_cycle();
   //inner_fade_banner_cycle();

   $('#banner').cycle({
		fx: 'fade'
	});

   // Highlight input text on first select
   $('#email_signup').focus( function() {
      if(this.value == this.defaultValue) {
         this.select();
      }
   });


   // 4 boxes on homepage
   $('#quad_menu2 .overlay_background').fadeTo(0, 0.5);
});

inner_fade_banner_cycle = function() {
   //$('#banner').append('<li><img src="/images/home/banner2.jpg" alt="The perfect tan doesn\'t have to be a fairytale" /></li>');
   $('#banner').append('<li><img src="/images/home/elle_quote.jpg" alt="" /></li>');
   $('#banner').append('<li><img src="/images/home/this_morning_quote.jpg" alt="" /></li>');
   $('#banner').innerfade({ speed: 'slow', timeout: 4000, type: 'sequence', containerheight: '330px' });
}

/**
 * Enhancements for the homepage image menus.
 *
 * A text tip (on a transparent background) slides in out on image hover. The image area is a clickable link.
 */
image_text_slide = function() {
   // The area that slides in is transparent
   $('.quad_image_dropdown_background').fadeTo(0, 0.5);

   // Slide an area in/out on hover
   $(".quad_menu_section").hover(
      function () {
         $(".quad_image_dropdown", this).stop(true, true).slideDown("slow");
      },
      function () {
         $(".quad_image_dropdown", this).stop(true, true).slideUp("slow");
      }
   );

   // Show a hand on image hover.
   $('.quad_image_outer').hover(function(){
      $(this).css('cursor', 'pointer');
   }, function () {
      $(this).css('cursor', 'auto');
   });

   // Redirect on image click
   $('.quad_image_outer').click(function(){
       var obj_parent_div = $(this).parent();
       window.location =  $('h2 a', obj_parent_div).attr('href');
   });
};

/**
 * Banner image transition
 */
banner_cycle = function() {
   // Images to cycle and click href (empty string means not clickable)
   /*
   var arr_images = [
      {src:'banner_nb_quote.jpg', url:'/item/Xen-Tan-Dark-Lotion-236ml-with-FREE-TRANSFORM-177ml/2L'},
      {src:'banner_offer.jpg', url:'/item/Xen-Tan-Dark-Lotion-236ml-with-FREE-TRANSFORM-177ml/2L'},
      {src:'banner_elle_quote.jpg', url:'/item/Xen-Tan-Dark-Lotion-236ml-with-FREE-TRANSFORM-177ml/2L'}
   ];
*/

   /*
   var arr_images = [
      {src:'banner_nb_quote.jpg', url:'/item/Xen-Tan-Dark-Lotion-236ml-with-FREE-TRANSFORM-177ml/2L'},
      {src:'banner_elle_quote.jpg', url:'/item/Xen-Tan-Dark-Lotion-236ml-with-FREE-TRANSFORM-177ml/2L'}
   ];
   */

   var arr_images = [
      {src:'this_morning_quote.jpg', url:''},
      {src:'elle_quote.jpg', url:''}
   ];

   // Start image index
   var int_image_index = 1;

   // Set the background, this has no visible effect
   $('#banner').css('background-image', "url('/images/home/" + arr_images[int_image_index].src + "')");

   // Transition timings
   var obj_banner_settings = {
      int_interval_time: 4000,
      int_transition_time: 1500
   };

   // Reference for Image transition setInterval event
   var int_interval_handle;

   // Banner image opacity
   var int_opacity = 0;

   // Change image event handler
   rotate_image = function () {
      // Clear image transition event
      clearInterval(int_interval_handle);

      // When int_opacity is 0 fade out the foreground image and fade in the background. When it's 1 do the opposite.
      $("#banner img").fadeTo(obj_banner_settings.int_transition_time, int_opacity,
         // fadeTo transition complete callback
         function(){

            // Set banner hover pointer (for the new image)
            set_banner_hover_pointer();


            if(int_opacity) {
               // Get the next image, if the next image is out of bounds, reset the index.
               int_image_index = (int_image_index + 1) % arr_images.length;
               $('#banner').css('background-image', "url('/images/home/" + arr_images[int_image_index].src + "')");
            }

            // Toggle opacity, new value will be what it fadeTo's on the next transition
            int_opacity = int_opacity ? 0: 1;

            // Schedule the next transition
            int_interval_handle = setInterval(rotate_image, obj_banner_settings.int_interval_time);
         }
      );
   };

   /**
    * Handle banner hover event.  Set pointer choice.
    */
   $('#banner').hover(function(){
      set_banner_hover_pointer();
   }, function () {
      set_banner_hover_pointer();
   });

   /**
    * Handle banner click event
    */
   $('#banner').click(function(){
      // Is there a click url for this banner
      if(arr_images[int_image_index].url !== '') {
         // Redirect to new page
         window.location = arr_images[int_image_index].url;
      }
   });

   /**
    * Set banner pointer
    */
   set_banner_hover_pointer = function() {
      // Does the displayed banner image have a url?
      if(arr_images[int_image_index].url === '') {
         // No, normal cursor
         $('#banner').css('cursor', 'auto');
      } else {
         // Yes, hand pointer
         $('#banner').css('cursor', 'pointer');
      }
   };

   // Start the transition cycle
   int_interval_handle = setInterval(rotate_image, obj_banner_settings.int_interval_time);
};