// Prepare the DOM
$(function () {
    //Add classes to block that needs to be shown first, 
    //fade in corresponding list and fade out 2nd block.
    $('ul#storageItems-1').fadeIn(1200);
    $('ul#storageItems-2').addClass('hide');
    $('a.selector-2').children('img:nth-child(2)').animate({ opacity: '0' }, 0).parent().children('img:nth-child(1)').animate({ opacity: '.8' }, 0).parent().addClass('notActive');

    //Functions for first element
    $('a.selector-1').click(function () {
        $('ul#storageItems-2').fadeOut(1200).addClass('hide'); //Fade out then hide corresponding list
        $(this).children('img:nth-child(1)').animate({ opacity: '0' }, 1000).parent().removeClass('notActive');
        $(this).children('img:nth-child(2)').animate({ opacity: '1' }, 1000);
        $('a.selector-2').children('img:nth-child(2)').animate({ opacity: '0' }, 800).parent().addClass('notActive');
        $('a.selector-2').children('img:nth-child(1)').animate({ opacity: '.8' }, 200);
        $('ul#storageItems-1').removeClass('hide').fadeIn(1200); //Unhide and fade in the list
        return false;
    });

    //Functions for second element
    $('a.selector-2').click(function () {
        $('ul#storageItems-1').fadeOut(1200).addClass('hide'); //Fade out then hide corresponding list
        $(this).children('img:nth-child(1)').animate({ opacity: '0' }, 1000).parent().removeClass('notActive');
        $(this).children('img:nth-child(2)').animate({ opacity: '1' }, 1000);
        $('a.selector-1').children('img:nth-child(2)').animate({ opacity: '0' }, 800).parent().addClass('notActive');
        $('a.selector-1').children('img:nth-child(1)').animate({ opacity: '.8' }, 200);
        $('ul#storageItems-2').removeClass('hide').hide().fadeIn(1200); //Unhide and fade in the lis
        return false;
    });

    $("a.notActive").live('mouseenter', function () {
        $(this).children('img:nth-child(1)').stop().animate({ opacity: '1' }, 600);
    }).live('mouseleave', function () {
        $(this).children('img:nth-child(1)').stop().animate({ opacity: '.8' }, 600);
    });

    //Setup the carousel
    $(".scrollable").scrollable({ circular: true }).navigator();

    //Region Price Scrolling List
    $('.priceRegion li').bind('click', function () {
        // the currently selected li's class
        var regionID = '.' + $(this).attr('class');
        //an array of prices from the regionID ul's
        var regionPrices = $('ul' + regionID).find("li").map(function () { return $(this).text(); }).get();

        $('a.storagePrice span').empty();

        if ($(this).hasClass('region-1')) { $(this).parent().animate({ top: 0 }); }
        if ($(this).hasClass('region-2')) { $(this).parent().animate({ top: -52 }); }
        if ($(this).hasClass('region-3')) { $(this).parent().animate({ top: -104 }); }
        if ($(this).hasClass('region-4')) { $(this).parent().animate({ top: -156 }); }

        $('span#smallPrice').append(regionPrices[0]).stop().hide().fadeIn();
        $('span#mediumPrice').append(regionPrices[1]).stop().hide().fadeIn();
        $('span#largePrice').append(regionPrices[2]).stop().hide().fadeIn();
    });

    /* $('.section span.open').bind('click', function () {
    $(this).parents().siblings('.sectionInfo').slideToggle('slow');
    });*/

});