jQuery(function($)
{
    ensure( { js: "/js/jquery.cycle.all.pack.js" }, function()
    {
        initPromoCycle();
    }); 

    ensure( { js: "/js/jquery.jcarousel.pack.js", css: "/css/global.css" }, function()
    {
        initCarousel();
    }); 

    ensure( { test: "jsc1" }, function()
    {
        initLearnMore();
        initSquareNav();
    });    
});

function initPromoCycle()
{
    $('#promo_container').cycle(
		  {
		      sync: 1,
		      speed: 1000,
		      timeout: 6000,
		      pause: 1,
		      after: updateSquareNav
		  });
}

function initLearnMore()
{
    var insertPromoNav;
    
    insertPromoNav = '<div id="promo_nav_container">';
    insertPromoNav += '<ul id="square_nav">';
    insertPromoNav += '<li><a id="promo_1" class="active" href="#"></a></li>';
    insertPromoNav += '<li><a id="promo_2" href="#"></a></li>';
    insertPromoNav += '</ul>';
    insertPromoNav += '<a id="btn_learn_more" href="#">Learn More</a>';
    insertPromoNav += '</div>';
    
    $('#promo_container').after(insertPromoNav);
}

function updateSquareNav()
{
    ensure( { test: "jsc1" }, function()
    {
       var curr_url = $(this).attr('id');  //this is handed to us by jquery.cycle
	      var nav_arr = $('#square_nav li a');
       var img_arr = $('#promo_container img');
       var curr_img = $('#' + curr_url + ' img');

	      nav_arr.removeClass('active');
      	
	      $.each(img_arr, function(i, obj)
	      {
		         if ($(obj).attr('src') == curr_img.attr('src')) 
			            $(nav_arr[i]).addClass('active');
	      });
      	
	      var activePromo = $('#square_nav li a.active').attr('id');
      	
       switch (activePromo)
       {
           //use url from active promotion in promo_container to populate the learn more button
           case "promo_2":
               $('#promo_nav_container #btn_learn_more').attr('href', $('#promo_container #promo2').attr('href'));
               break;
           case "promo_1":
           default:
               $('#promo_nav_container #btn_learn_more').attr('href', $('#promo_container #promo1').attr('href'));
               break;
       }   
   }); 
}

function initSquareNav()
{
   var promo_img_arr = $('#promo_container img');
   var sq_nav_arr = $('#square_nav li a');
  	
   sq_nav_arr.click(function(e){
	   var theLink = $(this);
	   sq_nav_arr.removeClass('active');
  		
	   $.each(sq_nav_arr, function(i, obj){
		   if($(obj).attr('id') == theLink.attr('id'))
		   {
			   $(this).addClass('active');
			   $('#promo_container').cycle(i);
			   return false;
			   e.preventDefault();
		   }
	   }); 
    return false;
   });
}

function initCarousel()
{
    var ul = document.getElementById('feature_carousel');
    if (ul != undefined)
    {
        ul.style.visibility = 'visible';
    }
    
    var item_width = 298;
    var feature_carousel = $('#feature_carousel');

    feature_carousel.jcarousel({
        scroll: 3
    });
    
    //need to set a fixed width based on the number of items for Chrome and Safari
    var num_items = feature_carousel.find('li');
    var w = (num_items.length * (item_width + 2));
    feature_carousel.width(w);
    
    //Turn off arrows when at beginning or end
    $('.jcarousel-prev-horizontal').hide(); //default
    
    $('.jcarousel-next-horizontal').click(function()
    {
        $('.jcarousel-prev-horizontal').show();
        $('.jcarousel-next-horizontal').hide();
    });
    
    $('.jcarousel-prev-horizontal').click(function()
    {
        $('.jcarousel-next-horizontal').show();
        $('.jcarousel-prev-horizontal').hide();
    });
    
    $("div.jcarousel-skin-custom").attr("id", function (arr)
    {
          return "jsc" + arr;
    });

}