/**
* Frontpage carousel, based on image carousel widget
* @author a.weeber, Clockwork
* @date 03-2010
* @namespace YAHOO.widgets 
* @module carousel
* @static
* @requires yahoo, dom, element, carousel, animation  from YUI Library 2.x
*/ 


YAHOO.namespace("widgets");
YAHOO.widgets.carousel = (function () {

    /**
    * Yui shortcut variables 
    * @final 
    */

    var Dom = YAHOO.util.Dom,
		Event = YAHOO.util.Event;

    /**
    * Module settings object 
    * @final 
    */

    var settings = {
        frontpageCarouselId: "frontpageCarousel",
        frontpageCarouselEl: "frontpageCarouselElement",
        containerClass: "carouselContainer",
        carouselClass: "imageCarousel",
        thumbAnchorClass: "thumbAnchor",
        carouselItemClass: "carouselItem",
        autoPlayInterval: 10000, /* ms*/
        scaleCarouselItems: false,
        animSpeed: 3.2, /* seconds */
        maxNavButtons: 1,
        defaultVisibleItems: 1,
        defaultAspectRatio: '4:3',
        defaultAutoPlay: false,
        defaultStartIndex: 0
    };


    /**
    * Initializes the module based on CSS (carousel) context 
    * @method init
    */

    var init = function () {
        YAHOO.util.AnimMgr.fps = 12;
        initCarousel(Dom.get(settings.frontpageCarouselEl));

    };

    /**
    * Initializes the yui carousel based on a carousel container
    * @method initCarousel
    * @private
    * @param el {HTMLElement} carousel container
    */

    var initCarousel = function (el) {
        var nav = Dom.getElementsByClassName("yui-carousel-nav", "div", el)[0];
        var contentFrames = Dom.getElementsByClassName("contentFrame", "div");
        var carousel;

        if (el.title) {
            eval("var carouselConfig = " + el.title);
            el.removeAttribute("title");
        } else {
            var carouselConfig = {
                aspectRatio: settings.defaultAspectRatio,
                autoPlay: settings.defaultAutoPlay,
                startIndex: settings.defaultStartIndex
            };
        }

        if (settings.scaleCarouselItems) {
            setCarouselImages(el, carouselConfig);
        }

        carousel = new YAHOO.widget.Carousel(el, {
            animation: { speed: settings.animSpeed, effect: YAHOO.util.Easing.easeBoth }
        });

       
        if (carouselConfig.autoPlay) {
            carousel.set("autoPlayInterval", 1000);
            carousel.set("isCircular", true);
        }
       
        carousel.set("numVisible", settings.defaultVisibleItems);
        carousel.set("selectedItem", carouselConfig.startIndex);
        carousel.CONFIG.MAX_PAGER_BUTTONS = settings.maxNavButtons;

        carousel.on("beforeScroll", function (ref) {

            if (!carousel.isAnimating()) {
                var targetFrame;
                var activeElement = Dom.getElementsByClassName("active", "div")[0];
                Dom.removeClass(contentFrames, "selectedFrame");
                Dom.removeClass(contentFrames, "active");
                if (contentFrames.length === 4) {

                    switch (ref.first) {
                        case 3:
                            if (ref.dir === "backward") { targetFrame = 1; }
                            else { targetFrame = 1; }
                            break;

                        case 2:
                            if (ref.dir === "backward") { targetFrame = 2; }
                            else { targetFrame = 0; }
                            break;

                        case 1:
                            if (ref.dir === "backward") { targetFrame = 3; }
                            else { targetFrame = 1; }
                            break;

                        case 0:
                            if (ref.dir === "backward") { targetFrame = 0; }
                            else { targetFrame = 2; }
                            break;
                    };
                }

                if (contentFrames.length === 3) {

                    switch (ref.first) {
                        case 2:
                            if (ref.dir === "backward") { targetFrame = 1; }
                            else { targetFrame = 1; }
                            break;

                        case 1:
                            if (ref.dir === "backward") { targetFrame = 2; }
                            else { targetFrame = 0; }
                            break;

                        case 0:
                            if (ref.dir === "backward") { targetFrame = 0; }
                            else { targetFrame = 1; }
                            break;
                    };
                }


                if (activeElement) {
                    targetFrame = activeElement;
                } else {
                    targetFrame = contentFrames[targetFrame];
                }

                Dom.addClass(targetFrame, "selectedFrame");
                Cufon.replace('div#contentFrame_0 h2', { fontFamily: 'Mic 32 New Medium', hover: true });
                Cufon.replace('div#contentFrame_1 h2', { fontFamily: 'Mic 32 New Medium', hover: true });
                Cufon.replace('div#contentFrame_2 h2', { fontFamily: 'Mic 32 New Medium', hover: true });
                Cufon.replace('div#contentFrame_3 h2', { fontFamily: 'Mic 32 New Medium', hover: true });
            }

        });


        carousel.render();
        carousel.show();

        if (carouselConfig.autoPlay) {
            carousel.startAutoPlay();
        }

        // move the navigation to the outer container
        var mainCarouselContainer = el.parentNode;
        mainCarouselContainer.insertBefore(nav, mainCarouselContainer.firstChild);

        Event.on(contentFrames, "mousemove", function (e) { highLightFrame(this, carousel); });
        Event.on(contentFrames, "click", function (e) { highLightFrame(this, carousel); });

        // remove the loading class
        var timeLoader = window.setTimeout(function () { Dom.removeClass(settings.frontpageCarouselId, "loading"); }, 1000);
    };

    /**
    * Custom carousel scroll highlighter, scrolls to the selected frame
    * @method highLightFrame
    * @private
    * @param  target {HTMLElement} HTML element
    * @param dir {String} direction in/out
    * @param carousel {Object} yui carousel object
    */

    var highLightFrame = function (target, carousel) {
        if (!carousel.isAnimating()) {
            var targetFrame = parseInt(target.id.split("_")[1]);
            carousel.scrollTo(targetFrame, true);
        }
    };

    /**
    * Sets the carousel items height and width to fit it's container's dimensions
    * @method setCarouselImages
    * @private
    * @param el {HTMLElement} HTML element
    * @param carouselConfig {Object} The carousel's configuration object
    */

    var setCarouselImages = function (el, carouselConfig) {

        var carouselList = Dom.getElementsByClassName(settings.carouselClass, null, el)[0];
        var carouselAnchors = Dom.getElementsByClassName(settings.thumbAnchorClass, "a", carouselList);
        var carouselRegion = Dom.getRegion(carouselList);
        var realWidth = carouselRegion.right - carouselRegion.left;
        var aspTemp = carouselConfig.aspectRatio.split(":");
        var aspectRatio = parseInt(aspTemp[1], 10) / parseInt(aspTemp[0], 10);
        var calculatedHeight = aspectRatio * realWidth;

        // set thumbnail anchors dimensions
        for (var i = 0; i < carouselAnchors.length; i++) {
            Dom.setStyle(carouselAnchors[i], "width", realWidth + "px");
            Dom.setStyle(carouselAnchors[i], "height", calculatedHeight + "px");
        }
    };

    /**
    * @return {Object} collection of public methods
    */

    return {
        init: init
    };

})();

YAHOO.util.Event.onDOMReady(YAHOO.widgets.carousel.init, YAHOO.widgets.carousel, true);