// JavaScript Document
/*******************************************************************************

 * 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'); 

    } 

}