dL.contentSlider = (function namespace() { 
    
    var contentPages =[]; 
    var menuItems = [];    
    var elementWidth = 600; // includes elementMargin!
    // var elementMargin = 30;
    var contentWrapper;
    var contentWrapperMinHeight = 250;
    var navigationMarker;
    var menuItemPadding = 15;
    var pageWidth = ((dL.isIE7 || dL.isIE8) ? 0 : 2) * menuItemPadding + elementWidth;
    var isSliding = false;         
    var currentPage;
    var onfinish; 
    var currentHash;
    var currentOffset;
    var imageCount = 9;
    
    function preLoadImages () {
        for (var i = 1; i < imageCount; i++) {
            var image = new Image();
            image.src = "/images/banner" + i + ".jpg";
        }
    }
    
    function slide(nextPage) {  
        if (nextPage == currentPage)
            return;

        if (isSliding) {
            onfinish = function () { slide(nextPage) };            
            return;
        }

        isSliding = true;

        var createOnFinish = function (node, height) {
            return function () {
                isSliding = false;
                height = (height > contentWrapperMinHeight) ? height: contentWrapperMinHeight;
                node.tween({height: height, easing: "cubic"});                                        
                if (onfinish) {                    
                    onfinish();
                    onfinish = null;
                }
            };
        }                     
        
        //var menuOffsetLeft = document.getElementById("menu").offsetLeft;        
        var contentHeight = contentPages[nextPage].getStyle("height"); 
        
        if (nextPage < currentPage) { // slide next page in from the left;
            contentPages[nextPage].style({left: - pageWidth});
            if (currentPage !== undefined)
                contentPages[currentPage].tween({left: pageWidth, easing: "cubic"});
            contentPages[nextPage].tween({left: 0, easing: "cubic", onfinish: createOnFinish(contentWrapper, contentHeight)});            
        } else { // slide next page in from the left;        
            contentPages[nextPage].style({left: pageWidth});                                               
            if (currentPage !== undefined) 
                contentPages[currentPage].tween({left: - pageWidth, easing: "cubic"});
            contentPages[nextPage].tween({left: 0, easing: "cubic", onfinish: createOnFinish(contentWrapper, contentHeight)});
        }
        currentPage = nextPage;
                
        var navigationMarkerWidth = dL(menuItems[nextPage]).getStyle("width") + ((dL.isIE7 || dL.isIE8) ? 0: 2) * menuItemPadding;
        if ((nextPage === contentPages.length - 1) && !dL.isIE7 && !dL.isIE8)
            navigationMarkerWidth += menuItemPadding + 1;
                
        dL(navigationMarker).tween({left: menuItems[nextPage].offsetLeft, 
            easing: "cubic", width: navigationMarkerWidth})
                    // the conditional is required because IE7 calculates padding differently;
        // change URL
        //var windowYOffset = window.pageYOffset || 0;
        window.location.hash = "page" + nextPage; //menuItems[nextPage].id;
        
        var number = Number(nextPage) + 1;
        
        $("#header").css({"backgroundImage": "url(/images/banner" + number + ".jpg)"});
        $("#header").css({"backgroundPosition": "right center"});
        
        //if (!dL.isIE7)
        //    window.scrollTo(window.pageXOffset, windowYOffset)
        
        
                    
    }  
    
    function createNavigationMarker () {        
        var navigationBar = document.getElementById("menu");
        navigationMarker = document.createElement("div");
        var initialMarkerWidth = dL(navigationBar.getElementsByTagName("li")[0]).getStyle("width")
            + (((dL.isIE7 || dL.isIE8) ? 0 : 2) * menuItemPadding);
        dL(navigationMarker).style({position: "relative", 
            width: initialMarkerWidth, height: 46, backgroundColor: "#4271FF"}); 
        navigationBar.insertBefore(navigationMarker, navigationBar.getElementsByTagName("ul")[0]);
        //console.debug(initialMarkerWidth);
    }    
    
    function createWrapper () { 
        var content = document.getElementById("content");
        var parentNode = content.parentNode;
        var wrapper = document.createElement("div");
        wrapper.id = "contentWrapper";
        parentNode.insertBefore(wrapper, content);
        wrapper.appendChild(content);
        contentWrapper = dL(wrapper).style({height: contentWrapperMinHeight, width: elementWidth , overflow: "hidden"});
    }    
    
    function setMenuClickListeners() { 
        
        var createClickListener = function (nextpage) {
            return function () {                
                slide(nextpage);   
            };        
        }   
            
        var menu = document.getElementById("menu");
        var menuLinks = menu.getElementsByTagName("li");
        for (var i = 0; i < menuLinks.length; i++) {
            dL(menuLinks[i]).addEventListener("click", createClickListener(i));
        }            
    }

    var yOffsetHasChanged = function () {
        if (getWindowScrollOffset().y !== currentOffset) {            
            currentOffset = getWindowScrollOffset().y;            
            return true;
        }
        return false;
    }

    var hashHasChanged = function () {        
        if (window.location.hash !== currentHash) {            
            currentHash = window.location.hash;
            return true;
        }
        return false;
    }
    
    var scrollHandler = function (event) {       
        if (dL.isIE7 && yOffsetHasChanged()) 
            alert("Y offset changed!")
        if (dL.isIE7) {
            //alert(window.event.cancelBubble);
            window.event.cancelBubble = true;
        }
        if (hashHasChanged())
            return false;        
        return false;
    }
    
    var getWindowScrollOffset = function () {
        if (window.pageXOffset !== null)
            return {x: window.pageXOffset, y: window.pageYOffset};
        else if (document.compatMode === "CSS1Compat")      { alert("css1!")      ;
            return {x: window.document.documentElement.scrollLeft, y: window.document.documentElement.scrollTop};}
        else { alert("asdfasdfa"); 
            return {x: window.document.body.scrollLeft, y: document.body.scrollTop}; }
        
    }
    
    return {
    
        initialize: function  () {     
            preLoadImages();
            var hashNumber;
            var contentItems = document.getElementsByClassName("contentItem");        
            for (var i = 0; i < contentItems.length; i++) {  
                contentPages[i] = dL(contentItems[i]).style({ left: elementWidth, display: "block", width: elementWidth});
            }     
            menuItems = document.getElementById("menu").getElementsByTagName("li");                        
            
            createWrapper();
            setMenuClickListeners();
            createNavigationMarker();  

            
            if (hashNumber = /#page(\d)/.exec(window.location.hash))
                slide(hashNumber[1]);
            else
                slide(0);
            
            //var number = hashNumber[1] || 0;
            
            
            //alert(window.location.hash + ", " + hashNumber[1]);
            
            //window.scrollTo(0,0);
            //dL.addEventListener("scroll", window, scrollHandler);         
            //window.onscroll = scrollHandler;
        }
    }
}());

dL.addEventListener("load", window, dL.contentSlider.initialize);