var bm = {
    config: {
        SLIDER_IMG_WIDTH: 62,
        SLIDER_IMG_MAX_HEIGHT: 60,
        MAX_IMG_NO_SCROLL: 6,
        SLIDER_IMG_SPACING: 2
    },
    init: function() {
        document.fire("bm:init", null);
        //$("content").setStyle({visibility: "visible"});
    },
    slider: {
        init: function() {
            /*
                do some validation and hide slider if required stuff is not present
            */
            if ($("slider") === null) {
               return;
            }
            if (window["sliderImages"] === undefined) {
               $("slider").setStyle({display: "none"});
               return;
            }

            //initialize lightbox here, so it's not init'ed on other pages
            new Lightbox();

            bm.slider.imgArr = $A(sliderImages);
            var viewerCode = '<a href="#{src}" title="#{title}" rel="lightbox">'+
                             '<img src="#{src}" alt="#{title}" width="#{width}" height="#{height}" /></a>';
            bm.slider.viewerTpl = new Template(viewerCode);
            bm.slider.debug = [];
            //counter
            bm.slider.numImagesLoaded = 0;
            //photo slider width
            bm.slider.sliderWidth = 0;

            document.observe("bm:slider-imgLoaded", bm.slider.setFinalSliderWidth);

            //preload slider images
            bm.slider.imgArr.each(function(img, iter) {
                var preImg = new Image();
                preImg.id = "slider"+iter;

                var a = document.createElement("a");
                    a.setAttribute("href", img.src);
                    a.setAttribute("title", img.title);
                    a.setAttribute("order", iter);
                    a.appendChild(preImg);
                $("slider").appendChild(a);
                $(a).observe("click", bm.slider.sliderClickHandler);

                //ugly way but doesn't seem to work otherwise in IE
                preImg.onload = function() {
                    bm.slider.processSliderImg(preImg.id);
                }
                preImg.src = img.srcLoRes;
                preImg.setAttribute("title", img.title);
                preImg.setAttribute("alt", img.title);
            });

            bm.slider.setViewerImg(bm.slider.imgArr[0]);

            //set initial width for sliderWrapper
            var roughSliderWidth = (bm.slider.imgArr.length * bm.config.SLIDER_IMG_MAX_HEIGHT);
            $("slider").setStyle({width: roughSliderWidth+"px"});

            if (bm.slider.imgArr.length < bm.config.MAX_IMG_NO_SCROLL) {
                $$(".photoSliderWrapper")[0].addClassName("narrowNoScroll");
            }
        },
        sliderClickHandler: function(evt) {
            try {
                var cellNum = evt.element().parentNode.getAttribute("order");
                bm.slider.setViewerImg(bm.slider.imgArr[cellNum]);
            } catch (e) {}
            Event.stop(evt);
        },
        setViewerImg: function(img) {
            $("imgViewer").innerHTML = bm.slider.viewerTpl.evaluate(img);
            $("imgViewerCaption").innerHTML = img.title;
        },
        processSliderImg: function(id) {
            var el = $(id);
            var imgRatio = el.width / el.height;
            var imgHeight = bm.config.SLIDER_IMG_MAX_HEIGHT;
            var imgWidth = Math.ceil(imgHeight * imgRatio);
            el.setStyle({width: imgWidth+"px", height: imgHeight+"px"});

            bm.slider.sliderWidth += (imgWidth+bm.config.SLIDER_IMG_SPACING);

            bm.slider.numImagesLoaded += 1;
            document.fire("bm:slider-imgLoaded", null);
        },
        setFinalSliderWidth: function() {
            if (bm.slider.numImagesLoaded == bm.slider.imgArr.length) {
                $("slider").setStyle({width: bm.slider.sliderWidth+"px"});
            }
        }
    },
    UI: {
        init: function() {
            bm.slider.init();

            document.fire("bm:UI-initialized", null);
        }
    }
}
//self invocation
document.observe("dom:loaded", bm.init);
document.observe("bm:init", bm.UI.init);
