YAHOO.util.Event.addListener(window, 'load', function(){

// only add the carousel if one exists on the page.
if(document.getElementById('carousel')) {
    var myCarousel = new YAHOO.EU.widget.Carousel(	   
      { 
        vContainer: 'carousel',
        //sLoopMode: 'continuous',
        iNumSlidesVisible: 5,                                   
        iSlideAdvance: 5,
        vElmNextSlide: 'next',
        vElmPrevSlide: 'prev'
      }
    );
    // go to the active slide
    if(YAHOO.global && YAHOO.global.imageNumber) {
        var iImgNum = YAHOO.global.imageNumber - (YAHOO.global.imageNumber % 5);
        //console.log(iImgNum);
        myCarousel.toSlide(iImgNum, 0);
    }
    
    YAHOO.util.Event.addListener('carousel', 'click', 
        function(e, o) { 
            YAHOO.util.Event.stopEvent(e);
            var target = YAHOO.util.Event.getTarget(e);

            if(target && target.tagName && target.tagName.toLowerCase() == 'img') {
                var mainImg = document.getElementById('main-image');
                var matches = target.className.match(/.*img-size-w(\d+)-h(\d+).*/);
                
                var oDomActiveLi = YAHOO.util.Dom.getElementsByClassName('active', 'li', 'carousel')[0];
                if(oDomActiveLi) {
                    oDomActiveLi.className = '';
                }
                target.parentNode.parentNode.className = 'active';
                
                if(matches && matches.length == 3) {
                    var width = matches[1], 
                        height = matches[2];
                }
                var oImg = new Image();
                oImg.src = target.src.replace('thumbs/','');
                mainImg.src = '/images/transparent.png';
                
                // grab the next image, prev anchors
                var oDomPrevLink = YAHOO.util.Dom.getElementsByClassName('prev-img', 'a', 'main-img-wrapper');
                var oDomNextLink = YAHOO.util.Dom.getElementsByClassName('next-img', 'a', 'main-img-wrapper');
                
                var mainImgWrapper = document.getElementById('main-img-wrapper');
                
                var imgLoad = function() {
                    mainImg.style.paddingTop = ((475 - height) / 2) + 'px';
                    mainImg.width = width;
                    mainImg.height = height;
                    mainImg.src = oImg.src;
                    
                    var targetAnchor = target.parentNode;
                    var matches = targetAnchor.href.match(/img=(\d+)/);
                    var imgNumber = (matches && matches[1]) ? parseInt(matches[1]) : 0;
                                        
                    // get the correct href, if the link exists
                    if(oDomPrevLink && oDomPrevLink[0]) {
                        oDomPrevLink = oDomPrevLink[0];
                        
                        if(imgNumber > 0) {
                            oDomPrevLink.href = targetAnchor.href.replace(/img=(\d+)/, 'img=' + (imgNumber-1));
                        } else {
                            oDomPrevLink.parentNode.removeChild(oDomPrevLink);
                        }
                    } else if(imgNumber > 0) {
                        // create the link
                        oDomPrevLink = document.createElement('a');
                        oDomPrevLink.className = 'prev-img';
                        oDomPrevLink.href = targetAnchor.href.replace(/img=(\d+)/, 'img=' + (imgNumber-1));
                        oDomPrevLink.innerHTML = '« previous image'
                        mainImgWrapper.appendChild(oDomPrevLink);
                    }
                    
                    // set the styles
                    if(oDomPrevLink && oDomPrevLink.style) {
                        oDomPrevLink.style.width = Math.round(width/2) + 'px';
                        oDomPrevLink.style.height = height + 'px';
                        oDomPrevLink.style.left = Math.round((650 - width)/2) + 'px';
                        oDomPrevLink.style.top = Math.round((475 - height)/2) + 'px';
                    }
                    
                    // get the correct href, if the link exists
                    if(oDomNextLink && oDomNextLink[0]) {
                        oDomNextLink = oDomNextLink[0];
                        
                        if(imgNumber <= YAHOO.global.maxImageNumber - 2) {
                            oDomNextLink.href = targetAnchor.href.replace(/img=(\d+)/, 'img=' + (imgNumber+1));
                        } else {
                            oDomNextLink.parentNode.removeChild(oDomNextLink);
                        }
                    } else if(imgNumber <= YAHOO.global.maxImageNumber - 2) {
                        // create the link
                        oDomNextLink = document.createElement('a');
                        oDomNextLink.className = 'next-img';
                        oDomNextLink.href = targetAnchor.href.replace(/img=(\d+)/, 'img=' + (imgNumber+1));
                        mainImgWrapper.appendChild(oDomNextLink);
                    }
                    
                    if(oDomNextLink && oDomNextLink.style) {
                        oDomNextLink.style.top = Math.round((475 - height)/2) + 'px';
                        oDomNextLink.style.width = Math.round(width/2) + 'px';
                        oDomNextLink.style.height = height + 'px';
                        oDomNextLink.style.left = Math.round(width/2) + Math.round((650 - width)/2);
                    }
                };                
                oImg.onload = imgLoad;
                
            }
            
        }
    );
}

});