/*******************************************************************************
 * Constant Variable Initialization (change these variables to match your site)
 *     - CONTAINER_ID: the id of the scroller's container 
 *     - SCROLLER_ID:  the id of the actual scroller
 *     - WIDTH:        the width of each page 
 *     - HEIGHT:       the height of each page 
 *     - VERTICAL:     `true` if this is a vertical scroller, `false` otherwise
 *     - TOGGLE_MODE:  `true` or `false` for if ?mode= can change scrolling mode
 ******************************************************************************/
CONTAINER_ID = 'scroller-container';
SCROLLER_ID = 'scroller';
WIDTH = 405;
HEIGHT = 320;
VERTICAL = true;
TOGGLE_MODE = false;

/******************************************************************************
 * No need to edit below this line!
 ******************************************************************************/
 
window.onload = init;
 

function init() {
    var scrollerElement = document.getElementById(SCROLLER_ID); 
    var pageElements = scrollerElement.getElementsByTagName('li');
    var pages = new Array();
    for (var i = 0; i < pageElements.length; i++) {
        pages[i] = pageElements[i].getAttribute('id');
    }

    if (TOGGLE_MODE) {
        var locString = new String(window.location);
        if (locString.indexOf('?mode=horizontal') != -1) {
            VERTICAL = false;
        } else if (locString.indexOf('?mode=vertical') != -1) {
            VERTICAL = true;
        }
    }
    
    scrollerElement.style.listStyleType = 'none';
    scrollerElement.style.height = (VERTICAL ? HEIGHT * pageElements.length : HEIGHT) + 'px';
    scrollerElement.style.width = (VERTICAL ? WIDTH : WIDTH * pageElements.length) + 'px';
    
    var scroll_obj = new PageScroller(CONTAINER_ID, pages, WIDTH, HEIGHT, VERTICAL);
}

function PageScroller(id, pages, width, height, vertical) {
    this.id = id;
    this.pages = [];
    this.width = width;
    this.height = height;
    this.vertical = vertical;
    this.current_page = 0;
    this.animation = null;
    this.scrollLeft = 0;
    
    // set up container style 
    this.container = document.getElementById(this.id); 
    this.container.style.overflow = 'hidden'; 
    this.container.style.height = this.height + 'px'; 
    this.container.style.width = this.width + 'px';
    
    // set up page style
    for (var i = 0; i < pages.length; i++) {
        var page = document.getElementById(pages[i]);
        var divs = page.getElementsByTagName('div');
        page.style.display = VERTICAL ? 'block' : 'inline';
        for (var j = 0; j < divs.length; j++) {
            var div = divs[j];
            if (!VERTICAL) {
                div.style.float = 'left';
            }
            div.style.width = width + 'px';
            div.style.height = height + 'px';
        }
    }
    
    // set up prev link 
    this.prev = document.createElement('a'); 
    this.prev.href = '#';
    YAHOO.util.Dom.addClass(this.prev, 'previous');
    this.prev.appendChild(document.createTextNode('Previous'));
    this.prev_insensitive = document.createElement('span');
    YAHOO.util.Dom.addClass(this.prev_insensitive, 'previous');
    this.prev_insensitive.appendChild(document.createTextNode('Previous'));
    YAHOO.util.Event.addListener(this.prev, 'click', function (e) {
                YAHOO.util.Event.preventDefault(e); this.prevPage(); 
            }, this, true); 
            
    // set up next link 
    this.next = document.createElement('a'); 
    this.next.href = '#'; 
    YAHOO.util.Dom.addClass(this.next, 'next');
    this.next.appendChild(document.createTextNode('Next'));
    this.next_insensitive = document.createElement('span');
    YAHOO.util.Dom.addClass(this.next_insensitive, 'next');
    this.next_insensitive.appendChild(document.createTextNode('Next'));
    YAHOO.util.Event.addListener(this.next, 'click', function (e) {
    YAHOO.util.Event.preventDefault(e); this.nextPage(); }, this, true); 
    
    // add pagination to page 
    var divider = document.createElement('span');
    divider.appendChild(document.createTextNode(' | '));
    YAHOO.util.Dom.addClass(divider, 'divider'); 
    var pagination = document.getElementById('pagination');
    pagination.appendChild(this.prev); 
    pagination.appendChild(divider);
    pagination.appendChild(this.next);
     
    // add pages 
    for (var i = 0; i < pages.length; i++) {
        this.addPage(new Page(pages[i]));
    }
        
    // initialize to first page 
    this.setPage(0);
}

PageScroller.prototype.addPage = function(page) { 
    var page_number = this.pages.length;
    page.setPageHeight(this.height); 
    page.setPageWidth(this.width);
    this.pages.push(page); 
    if (page.nav) {
        YAHOO.util.Event.addListener(page.nav, 'click', function (e) {
                YAHOO.util.Event.preventDefault(e); this.setPage(page_number); 
            }, this, true); 
    } 
} 

PageScroller.prototype.prevPage = function() {
    this.setPage(this.current_page - 1); 
} 

PageScroller.prototype.nextPage = function() { 
    this.setPage(this.current_page + 1); 
}

PageScroller.prototype.setPage = function(page_number) { 
    // deselect current (old) page 
    this.pages[this.current_page].setNavHighlight(false);
    
    // wrap page number 
    if (page_number >= this.pages.length)
        this.current_page = 0; 
    else if (page_number < 0) 
        this.current_page = this.pages.length - 1; 
    else 
        this.current_page = page_number; 
        
    // select current (new) page 
    this.pages[this.current_page].setNavHighlight(true);
    
    // set prev link sensitivity
    this.setPrevLinkSensitivity(this.current_page != 0); 
    
    // set next link sensitivity 
    this.setNextLinkSensitivity(this.current_page != this.pages.length - 1); 
    
    // scroll to the page
    this.scrollToCurrentPage(); 
}

PageScroller.prototype.setPrevLinkSensitivity = function(sensitive) { 
    if (sensitive) { 
        if (this.prev_insensitive.parentNode) {
            this.prev_insensitive.parentNode.replaceChild(this.prev, this.prev_insensitive); 
        } 
    } else { 
        if (this.prev.parentNode) {
            this.prev.parentNode.replaceChild(this.prev_insensitive, this.prev); 
        }
    } 
} 

PageScroller.prototype.setNextLinkSensitivity = function(sensitive) { 
    if (sensitive) { 
        if (this.next_insensitive.parentNode) {
            this.next_insensitive.parentNode.replaceChild(this.next, this.next_insensitive); 
        } 
    } else { 
        if (this.next.parentNode) {
            this.next.parentNode.replaceChild(this.next_insensitive, this.next); 
        }
    } 
} 

PageScroller.prototype.scrollToCurrentPage = function() { 
    var old_scroll_pos_x = this.container.scrollLeft; 
    var old_scroll_pos_y = this.container.scrollTop;
    
    // works because all pages are the same width and height
    var new_scroll_pos_x = this.vertical ? 0 : this.width * this.current_page; 
    var new_scroll_pos_y = this.vertical ? this.height * this.current_page : 0;
    
    if (this.animation && this.animation.isAnimated())
        this.animation.stop(); 
    this.animation = new YAHOO.util.Scroll(this.container, 
        { scroll: 
            {  
                from: [old_scroll_pos_x, old_scroll_pos_y],
                to: [new_scroll_pos_x, new_scroll_pos_y] 
            } 
        }, 0.5, YAHOO.util.Easing.easeOut);
    this.animation.animate(); 
} 

/** 
 * Page 
 */ 
function Page(id) { 
    this.id = id; 
    this.nav = null; 
    var nav_element = document.getElementById('nav-' + this.id); 
    for (var i = 0; i < nav_element.childNodes.length; i++) { 
        if (nav_element.childNodes[i].nodeName == 'A') { 
            this.nav = nav_element.childNodes[i]; break; 
        } 
    } 
    this.page = document.getElementById(this.id); 
    this.page.style.overflow = 'hidden'; 
} 

Page.prototype.setPageHeight = function(height) {
    this.page.style.height = height + 'px'; 
} 

Page.prototype.setPageWidth = function(width) {
    this.page.style.width = width + 'px';
}

Page.prototype.setNavHighlight = function(highlight) { 
    if (this.nav) { 
        if (highlight)
            YAHOO.util.Dom.addClass(this.nav, 'current'); 
        else
            YAHOO.util.Dom.removeClass(this.nav, 'current'); 
    } 
}