﻿// Define namespace object
YAHOO.namespace("CGC");

YAHOO.CGC.CarouselNoAjax = function() {
    //  Private Members
    //  Inner reference to YAHOO.widget.Carousel
    var _carousel;

    //  Four variable must be provided...
    var _divName = null;   // div id to be used as container
    var _contenId = null;
    var _carouselDivId = null;   // div id to be used as container
    var _sourceUrl = null;  // for data source - returns JSON
    var _formatItemFn = null;  // function (to be provided) for formatting carousel items

    //  Local variable that can have defaults
    var _navFormatId = 1;  // inline(default):1;bottom:2;
    var _itemsPerPage = 3;  //  how many items will be displayed at a time
    var _objectsPerItem = 1;  //  how many data 'objects' are in an 'item'
    var _objectsPerPage = _itemsPerPage * _objectsPerItem;

    var _totalObjects = 0;

    //  Identification & Formatting local variables
    var _containerDivStyle = "cgc-skin-inlinenav";
    var _inlineNavPrevId = "prev-nav-arrow";
    var _inlineNavNextId = "next-nav-arrow";
    var _inlineNavPageId = "pageNav";
    var _inlineNavButtonStyle = "cgc-nav-button";
    var _inlinePrevNavButtonStyle = "cgc-nav-button-prev";
    var _inlineDisabledPrevNavButtonStyle = "cgc-nav-button-prev-disabled";
    var _inlineNextNavButtonStyle = "cgc-nav-button-next";
    var _inlineDisabledNextNavButtonStyle = "cgc-nav-button-next-disabled";
    var _inlinePageNavStyle = "carousel-pages";

    var _navSectionStyle = "cgc-carousel-nav";
    var _navPagesStyle = "carousel-pages";

    // Listener for scroll prev requests
    var _handleInlineScrollBack = function(divName) {
        _carousel.set("scrollIncrement", _itemsPerPage);
        _carousel.scrollBackward();
        _controlNavClass();
    }

    // Listener for scroll next requests
    var _handleInlineScrollForward = function() {
        _carousel.set("scrollIncrement", _itemsPerPage);
        _carousel.scrollForward();
        _controlNavClass();
    }

    var _controlNavClass = function() {
        var sentinel = _carousel._firstItem + _carousel.get("numVisible");
        if (sentinel >= _carousel.get("numItems")) {
            $("#" + _divName + _inlineNavNextId).removeClass(_inlineNextNavButtonStyle).addClass(_inlineDisabledNextNavButtonStyle);
        }
        else {
            $("#" + _divName + _inlineNavNextId).removeClass(_inlineDisabledNextNavButtonStyle).addClass(_inlineNextNavButtonStyle);
        }
        if (_carousel._firstItem === 0) {
            $("#" + _divName + _inlineNavPrevId).removeClass(_inlinePrevNavButtonStyle).addClass(_inlineDisabledPrevNavButtonStyle);
        }
        else {
            $("#" + _divName + _inlineNavPrevId).removeClass(_inlineDisabledPrevNavButtonStyle).addClass(_inlinePrevNavButtonStyle);
        }
    }

    /**
    * The "click" handler for the pager navigation.
    *
    * @method handlePagerClick
    * @param {Event} ev The event object
    */
    var _handlePagerClick = function(ev) {
        var pos, target, val;

        target = YAHOO.util.Event.getTarget(ev);
        val = target.href || target.value;
        if (YAHOO.lang.isString(val) && val) {
            pos = val.lastIndexOf("#");
            if (pos != -1) {
                val = _carousel.getItemPositionById(val.substring(pos + 1));
                _carousel.scrollTo(val);
                YAHOO.util.Event.preventDefault(ev);
            }
        }
    };

    var _buildCarouselContainer = function() {
        switch (_navFormatId) {
            case 1:
                createInlineCarousel();
                break;
            case 2:
                createBottomCarousel();
                break;
        }
    };
    var createInlineCarousel = function() {
        _carouselDivId = _divName + "_Carousel";
        // Get the carousel container div/table/row
        var containerDiv = $("div#" + _divName);
        var navTable = $("<table>");
        var navFirstRow = $("<tr>");

        // Set up prev nav
        var navLeftDiv = $("<div>").attr('id', _divName + _inlineNavPrevId).addClass(_inlineNavButtonStyle).addClass(_inlineDisabledPrevNavButtonStyle);
        var navLeftCell = $("<td>").append(navLeftDiv).click(_handleInlineScrollBack);
        navFirstRow.append(navLeftCell);

        // Set up the carousel
        var carouselDiv = $("<div>").attr('id', _carouselDivId).append($("<ol>").attr('id', _carouselDivId + "_ol"));
        var carouselCell = $("<td>").append(carouselDiv);
        navFirstRow.append(carouselCell);

        // Set up next nav
        var navRightDiv = $("<div>").attr('id', _divName + _inlineNavNextId).addClass(_inlineNavButtonStyle).addClass(_inlineDisabledNextNavButtonStyle);
        var navRightCell = $("<td>").append(navRightDiv).click(_handleInlineScrollForward);
        navFirstRow.append(navRightCell);

        navTable.append(navFirstRow);
        containerDiv.append(navTable);
        if (_totalObjects > _objectsPerPage) {
            $("#" + _divName + _inlineNavNextId).removeClass(_inlineDisabledNextNavButtonStyle).addClass(_inlineNextNavButtonStyle);
        }
    };

    var createBottomCarousel = function() {
        _carouselDivId = _divName + "_Carousel";
        // Get the carousel container div/table/row
        var containerDiv = $("div#" + _divName);
        var carouselTable = $("<table>");
        var navFirstRow = $("<tr>");

        // First row - carousel
        var carouselFirstRow = $("<tr>").attr('id', "firstRow");
        var carouselDiv = $("<div>").attr('id', _carouselDivId).append($("<ol>").attr('id', _carouselDivId + "_ol"));
        var carouselCell = $("<td>").append(carouselDiv);
        carouselFirstRow.append(carouselCell);
        carouselTable.append(carouselFirstRow);

        if (_totalObjects > _objectsPerPage) {
            // Second row - navigation
            var carouselSecondRow = $("<tr>").attr('id', "secondRow");
            var navTable = $("<table align='center'>")
            var navRow = $("<tr>");
            // Set up prev nav
            var navLeftDiv = $("<div>").attr('id', _divName + _inlineNavPrevId).addClass(_inlineNavButtonStyle).addClass(_inlineDisabledPrevNavButtonStyle);
            var navLeftCell = $("<td>").append(navLeftDiv).click(_handleInlineScrollBack);
            navRow.append(navLeftCell);

            // Set up page navgation
            var navMiddleDiv = $("<div>").attr('id', _inlineNavPageId).addClass(_navPagesStyle);
            var navMiddleCell = $("<td>").append(navMiddleDiv);
            navRow.append(navMiddleCell);

            // Set up next nav
            var navRightDiv = $("<div>").attr('id', _divName + _inlineNavNextId).addClass(_inlineNavButtonStyle).addClass(_inlineNextNavButtonStyle);
            var navRightCell = $("<td>").append(navRightDiv).click(_handleInlineScrollForward);
            navRow.append(navRightCell);
            navTable.append(navRow);

            var carouselSecondRowCell = $("<td>").append(navTable);
            carouselSecondRow.append(carouselSecondRowCell);
            carouselTable.append(carouselSecondRow);

            //$("#" + _divName +_inlineNavNextId).removeClass(_inlineDisabledNextNavButtonStyle).addClass(_inlineNextNavButtonStyle);
        }
        containerDiv.append(carouselTable);
    };
    var _buildCarousel = function() {
        // Get total number of items

        _buildCarouselContainer();
        $("#" + _divName + "_Carousel_ol").append($("#" + _contenId).html());
        var totalItems = Math.ceil(_totalObjects / _objectsPerPage);
        // Initial definition of carousel
        _carousel = new YAHOO.widget.Carousel(_divName + "_Carousel",
                {
                    numVisible: _itemsPerPage,
                    animation: { speed: 0.15 },
                    scrollInc: _itemsPerPage,
                    numItems: totalItems
                }
            );
        _carousel.CONFIG.MAX_PAGER_BUTTONS = 20;
        _carousel.render();


        // Add navigational paging element
        var nav = document.getElementById(_inlineNavPageId);
        if (nav != null && _navFormatId == 2) {
            nav.appendChild(_carousel._pages.el);
            // Handle page navigation
            YAHOO.util.Event.addListener(nav, "click", _handlePagerClick);
        }

        // and render the Carousel
        _carousel.show();
        if (_totalObjects <= _objectsPerPage) {
            // Bottom nav w paging - Don't display nav controls if only 1 page
            $("div." + _navSectionStyle).addClass("no-nav");
            // Inline nav - disable next arrow
            $("#" + _inlineNavNextId).removeClass(_inlineNextNavButtonStyle).addClass(_inlineDisabledNextNavButtonStyle)
        }
    };

    return {
        // Public Members
        init: function(containerDivName, contentDiv) {
            _divName = containerDivName;
            _contenId = contentDiv;
            // Reset _objectsPerPage
            _objectsPerPage = _itemsPerPage * _objectsPerItem;
            _buildCarousel();
        },
        setNavigationFormat: function(navFormatId) {
            if (navFormatId == 2) {
                _navFormatId = 2;
            }
        },
        setItemsPerPage: function(itemsPerPage) {
            _itemsPerPage = itemsPerPage;
        },
        setObjectsPerItem: function(objectsPerItem) {
            _objectsPerItem = objectsPerItem;
        },
        setTotalObjectsCount: function(totalObject) {
            _totalObjects = totalObject;
        }
    }
};