var carousel;
                    
    // 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
                return el.src.replace(/thumb/, "medium");
            }
            el = el.nextSibling;
        }
        
        return "";
    }
    function getBig(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
                return el.src.replace(/\.renditions(.*)$/, "");
            }
            el = el.nextSibling;
        }        
        return "";
    }
    function center_image() {
       imageSpaceWidth = 300;
       imageSpaceHeight = 350;
       var region = YAHOO.util.Dom.getRegion('current_image');
       var elmHeight = region.bottom - region.top;
       var elmWidth = region.right - region.left;
       imagePaddingLeft = (imageSpaceWidth - elmWidth)/2;
       imagePaddingTop = (imageSpaceHeight - elmHeight)/2;
       YAHOO.util.Dom.setStyle("img-center","padding-left", imagePaddingLeft+"px");
       YAHOO.util.Dom.setStyle("img-center","padding-top", imagePaddingTop+"px");
       YAHOO.util.Dom.setStyle("img-center","visibility", "visible");
 //      alert("Left: "+region.left+" Right: "+region.right+" Width: "+elmWidth + "Pad Left: "+imagePaddingLeft);
    }
            
    YAHOO.util.Event.onDOMReady(function (ev) {
	var thumbImages = YAHOO.util.Dom.getElementsByClassName('image_hover', 'img');
	YAHOO.util.Event.addListener(thumbImages, "mouseover", function(){YAHOO.util.Dom.addClass(this, 'thumb_hover');});
        YAHOO.util.Event.addListener(thumbImages, "mouseout", function(){YAHOO.util.Dom.removeClass(this, 'thumb_hover');});
        var images_list = YAHOO.util.Dom.getChildren('carousel');
        var el, item,
            spotlight   = YAHOO.util.Dom.get("spotlight"),
            large   = YAHOO.util.Dom.get("large-image"),
            carousel    = new YAHOO.widget.Carousel("container", {isCircular: true, numVisible: images_list.length});
  //      carousel.set("navigation", {next:right_arrow, prev:left_arrow}); 
        carousel.render(); // get ready for rendering the widget
        carousel.show();   // display the widget
        /* center the navigation area */
        var region = YAHOO.util.Dom.getRegion('carousel');
        var carouselWidth = region.right - region.left;
        // var carouselWidth = YAHOO.util.Dom.getStyle("carousel", "width");
  //      alert(carouselWidth);
        imageSpaceWidth = 310;
        arrowSpace = 15*2 + 4;
        navMargin = (imageSpaceWidth - carouselWidth - arrowSpace)/2
       YAHOO.util.Dom.setStyle("navigation_container","margin-left", navMargin+'px');
 //       YAHOO.util.Dom.setStyle("gallery_container","visibility", "hidden");
        // display the first selected item in the spotlight
        item = carousel.getElementForItem(carousel.get("selectedItem"));
        if (item) {
                spotlight.innerHTML = "<div id='img-center'  style='visibility:hidden'><div class='img-shadow' id='current_image'><img src=\"" + getImage(item) + "\" id='image_load' title='Click for larger image'></div></div>";
                YAHOO.util.Event.on("image_load", "load", center_image);
                large.innerHTML = "<div id='hd'></div><div id='bd'><img src='" + getBig(item) + "' /></div><div id='ft'></div>";
        }                       
        carousel.on("itemSelected", function (index) {
            // item has the reference to the Carousel's item
            item = carousel.getElementForItem(index);

            if (item) {
                spotlight.innerHTML = "<div id='img-center' style='visibility:hidden'><div class='img-shadow' id='current_image'><img src=\"" + getImage(item) + "\" id='image_load' title='Click for larger image'></div></div>";
               YAHOO.util.Event.on("image_load", "load", center_image);
               large.innerHTML = "<div id='hd'></div><div id='bd'><img src='" + getBig(item) + "' /></div><div id='ft'></div>";
               panel_init();
            }
        });
    });

function panel_init() {
	var imagePanel = new YAHOO.widget.Panel("large-image", { visible:false, constraintoviewport:false, close:true, underlay:"none", zIndex:"1000", modal:false,  monitorresize:false, x:'50px', y:'200px' } );
	imagePanel.render();
	YAHOO.util.Event.addListener("spotlight", "click", imagePanel.show, imagePanel, true);
}

YAHOO.util.Event.addListener(window, "load", panel_init);