PageSlider = Class.create();
PageSlider.prototype = {
	    
	    initialize: function (pageid, options){
	        
	        var pageLoader = true;
	        this.pageid = $(pageid);
            
            /* -- debugging
            console.log ("this.scrollwindow: " + this.scrollwindow);*/
            /* -- end debugging */
	        this.scrollwindow = this.pageid.down('div#scrollwindow'); /* go "down" into the dom */
	        
            /* 
             * Setup some sensible defaults for the options 
             */     
	        this.options = Object.extend({ duration: 1.0 }, options || {});

	        this.events = {
	          click: this.click.bindAsEventListener(this)
	        };

	        this.__btn_Click();
	        
	        /*
	         * Hide the preloader
	         */
	        if (pageLoader){
	            this.slideTo('sub_home', this.scrollwindow, { duration:this.options.duration });
	            $('tab_home').down(0).addClassName('active');
	            //Effect.Fade('preload'); 
	        } 
        },
	
        __btn_Click: function() {
            
            /*
             * Find all internal anchors that start with #sub_
             */
            var subAnchors = $$('a[href^=#sub_])');
            subAnchors.invoke('observe', 'click', this.events.click);
           
        },	

        click: function(event) {
		    //this.stop();
            var element = Event.findElement(event, 'a');
            
            /*
             * get the name of the element, and highlight the tab associated
             * with that subdivision 
             */
            var elementName = element.href.split("#")[1];
            var rootName = elementName.split("_")[1]; 
            var tabName = "tab_" + rootName; 

            /*
             * Loop through the navigation tabs and remove "active" classes
             */     
            var activeList = $('nav_tabs').getElementsByClassName('active');
            var activeNodes = $A(activeList);
            
            activeNodes.each(function(activeNode){
                activeNode.removeClassName('active');
            });
            
            /*
             * Is the new tab name in the actual navigation? If not, don't try to add a classname, or it'll
             * toss an error
             */
            var tabNodeList = $('nav_tabs').immediateDescendants();
            if(tabNodeList.include($(tabName))){
                $(tabName).down(0).addClassName('active');
            }
          
            if (this.slider){
                this.slider.cancel();
            }
            this.slideTo(elementName, this.scrollwindow, { duration:this.options.duration });     
            Event.stop(event);
        },

	    slideTo: function(currentElement, slideWindow, options){
	        var windowOffset = Position.cumulativeOffset(slideWindow), elementOffset = Position.cumulativeOffset($(currentElement));

            /*
		     * subtract 20px to make up for left padding
             */ 
		    var elementAdjustX = elementOffset[0]-20;
		    
		    /* 
             * Call scroll effect - script.aculo.us extended effect
             */
		    this.slider = new Effect.Hscroller(slideWindow, {duration:options.duration, x:(elementAdjustX-windowOffset[0])});
		}
};

Effect.Hscroller = Class.create();
Object.extend (Object.extend (Effect.Hscroller.prototype, Effect.Base.prototype), {
        
        initialize: function(element) {
            
            this.element = $(element);
            var options = Object.extend({
                x:    0
            } , arguments[1] || {}  );
            
            this.start(options);
          },
          setup: function() {
            this.originalLeft = this.element.scrollLeft;
            this.options.x -= this.originalLeft;
          },
          update: function(position) {   
            this.element.scrollLeft = this.options.x * position + this.originalLeft;
          }
});