var NumberVisible = 8; //set the number visible
var NextScrollItem = 5; //set the number visible
var PreviousScrollItem = 5;
var ScrollIncrement = 5;
   
    (function() {


        YAHOO.util.Event.onDOMReady(function(ev) {
            var spotlight = YAHOO.util.Dom.get("spotlight"),
            carousel = new YAHOO.widget.Carousel("container", { numVisible: 8, animation: { speed: 0.5} });

            carousel.on("itemSelected", function(index) {
                // item has the reference to the Carousel's item
                var item = carousel.getElementForItem(index);

                if (item) {
                    spotlight.innerHTML = "<img src=\"" + getImage(item) + "\"><div class='GalleryPhotoTitle'>" + getTitle(item) + "</div>";
                }

                if (index != 0) {
                    //in case the new image is bigger than the first image loaded this will resize the border frame, so the image
                    //does not spill over
                    YAHOO.util.Dom.setStyle(YAHOO.util.Selector.query('div.MainContent', 'ColumnHeight', true), 'height', 'auto')
                    YAHOO.util.Dom.setStyle(YAHOO.util.Selector.query('div.ColumnTwo', 'ColumnHeight', true), 'height', 'auto')
                    SetColumnHeightsToBeEven("ColumnHeight");
                }
            });

            carousel.on("afterScroll", function(index) {

                if (index.first > 0) {
                    YAHOO.util.Dom.addClass("Previous", "PreviousEnabled");
                } else {
                    YAHOO.util.Dom.removeClass("Previous", "PreviousEnabled");
                }

                //gets which li is the last one currently being shown in the carousel
                var indexOfLastVisibleItem = NumberVisible + NextScrollItem - ScrollIncrement

                if (indexOfLastVisibleItem >= carousel.get("numItems")) {
                    YAHOO.util.Dom.removeClass("Next", "NextEnabled");
                } else {
                    YAHOO.util.Dom.addClass("Next", "NextEnabled");
                }

            });


            carousel.render(); // get ready for rendering the widget
            carousel.show();   // display the widget

            //attach a mouseover, mouseout to the li's in the carousel
            var liNodes = YAHOO.util.Selector.query('ol.yui-carousel-element li');
            YAHOO.util.Event.on(liNodes, 'mouseover', carsMouseOver);
            YAHOO.util.Event.on(liNodes, 'mouseout', carsMouseOut);

            //only attach the listener if the buttons will be needed.    
            if (carousel.get("numItems") > NumberVisible) {
                YAHOO.util.Event.addListener("Next", "click", CarsNext, [carousel]);
                YAHOO.util.Event.addListener("Previous", "click", CarsPrevious, [carousel]);
                //then enable the next arrow
                YAHOO.util.Dom.addClass("Next", "NextEnabled");
            }

        });


        // Get the image link from within its (parent) container.
        function getImage(parent) {
            var el = parent.firstChild;

            while (el) { // walk through till as long as there's an element
                if (el.nodeName.toUpperCase() == "IMG") { // found an image
                    // flickr uses "_s" suffix for small, and "_m" for big
                    // images respectively
                    return el.src.replace(/_s\.jpg$/, "_m.jpg");
                }
                el = el.nextSibling;
            }

            return "";
        }

        function getTitle(parent) {
            var el = parent.firstChild;

            while (el) { // walk through till as long as there's an element
                if (el.nodeName.toUpperCase() == "IMG") { // found an image
                    // flickr uses "_s" suffix for small, and "_m" for big
                    // images respectively
                    return el.alt;
                }
                el = el.nextSibling;
            }

            return "";
        }


        function CarsNext(e, carParams) {
            cars = carParams[0];

            if (YAHOO.util.Dom.hasClass("Next", "NextEnabled")) {
                cars.scrollTo(NextScrollItem);

                NextScrollItem = NextScrollItem + ScrollIncrement

                if (PreviousScrollItem > 0) {
                    PreviousScrollItem = PreviousScrollItem - ScrollIncrement
                }
            }
        }

        function CarsPrevious(e, carParams) {
            cars = carParams[0];
            if (YAHOO.util.Dom.hasClass("Previous", "PreviousEnabled")) {
                cars.scrollTo(PreviousScrollItem);
                NextScrollItem = NextScrollItem - ScrollIncrement

                //If user went back to the beginning reset the init values
                if (PreviousScrollItem == 0) {
                    NextScrollItem = ScrollIncrement
                }

                if (PreviousScrollItem > 0) {
                    PreviousScrollItem = PreviousScrollItem - ScrollIncrement
                }



            }
        }

        function carsMouseOver(e) {
            YAHOO.util.Dom.addClass(this, "MouseOver");
        }

        function carsMouseOut(e) {
            YAHOO.util.Dom.removeClass(this, "MouseOver");
        }


    })();