jQuery(function ($) {

    initLearnMore();
    initPromoCycle();
    initSquareNav();
    initCarousel();

});

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 += '<li><a id="promo_3" href="#"></a></li>';
    insertPromoNav += '<li><a id="promo_4" href="#"></a></li>';
    insertPromoNav += '</ul>';
    insertPromoNav += '<a id="btn_learn_more" href="#">Learn More</a>';
    insertPromoNav += '</div>';

    $('#promo_container').after(insertPromoNav);
}

function updateSquareNav() {
    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_4":
//            $('#promo_nav_container #btn_learn_more').attr('href', $('#promo_container #promo4').attr('href'));
//            break;
        case "promo_3":
            $('#promo_nav_container #btn_learn_more').attr('href', $('#promo_container #promo3').attr('href'));
            break;
        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();
    });
}