Mars.Carousel = {
    initialize: function(el) {
        this.container = $(el);
        if (!this.container) return false; //exit if there is no slider on the page

        var mask = this.container.children('#slide-mask');
        var slideContainer = mask.children('ul');
        var slides = slideContainer.children('li');
        var trgLeft = $('#slide-arrow-left');
        var trgRight = $('#slide-arrow-right');
        var ratings = {
            key: ['0_star', '1_star', '2_star', '3_star', '4_star', '5_star'],
            desc: ['0_stars', '1 star', '2 stars', '3 stars', '4 stars', '5 stars'],
            url: ['i/icon/stars_l_0.gif', 'i/icon/stars_l_1.gif', 'i/icon/stars_l_2.gif', 'i/icon/stars_l_3.gif', 'i/icon/stars_l_4.gif', 'i/icon/stars_l_5.gif']
        }
        var slideDesc = $('#slide-desc');
            slideDesc.css('background-color', '#ffffff');

        $('img.pngfix').pngfix();
        
        // need to move the last element to the beginning and reset the left position
        // didn't plan properly for right click sliding -- needs an xtra recipe slide
        // on the left side off screen for the animation on right click
        slides.filter(':last-child').prependTo(slideContainer);
        slideContainer.css('left', parseInt(slideContainer.css('left')) + -(slides.eq(0).width()));

        var startIdx = 1;
        var leftPos = slideContainer.css('left');

        var curSlide = slides.eq(startIdx);

        var updateSlideData = function() {
            var slideImg = slides.eq(startIdx).find('img:first');
            var slideLink = slides.eq(startIdx).find('a:first');
            var slideBtn = $('#slide-btn');
            var slideRating = $('#slide-rating');

            // update the description from the image alt tag
            slideDesc.html(slideImg.attr('alt'))
            if (slideDesc.not(':animated').length > 0) slideDesc.fadeIn('350');
            slideDesc.removeClass('sIFR-replaced');
            Mars.do_sIFR();

            // update the href of the "how to make" button to the current slide
            var slideLinkHref = slideLink.attr('href');
            slideBtn.attr('href', slideLink.attr('href'));

            // update the star rating
            var slideLinkHash = slideLinkHref.split('#');
            slideLinkHash = slideLinkHash[slideLinkHash.length - 1]; // make sure it's the last hash
            for (var key in ratings.key) {
                if (ratings.key[key] == slideLinkHash) slideRating.attr('src', ratings.url[key]);
            }
        }
        updateSlideData();

        trgLeft.click(function(event) {
            event.preventDefault();
            var slidePos = -1335;

            if (slideContainer.is(':animated')) return false; // don't animate if it's already in the process
            if (slideDesc.not(':animated').length > 0) slideDesc.fadeOut('150');
            slideContainer.animate({
                left: slidePos
            }, 'normal', 'swing', function() {
                slides.filter(':first-child').appendTo(slideContainer);
                slideContainer.css('left', leftPos);
                startIdx++;
                if (startIdx >= slides.length) startIdx = 0;
                updateSlideData();
            });
        });

        trgRight.click(function(event) {
            event.preventDefault();
            var slidePos = -280

            if (slideContainer.is(':animated')) return false; // don't animate if it's already in the process
            if (slideDesc.not(':animated').length > 0) slideDesc.fadeOut('150');
            slideContainer.animate({
                left: slidePos
            }, 'normal', 'swing', function() {
                slides.filter(':last-child').prependTo(slideContainer);
                slideContainer.css('left', leftPos);
                if (startIdx == 0) startIdx = slides.length;
                startIdx--;
                updateSlideData();
            });
        });
    }
};