// JavaScript Document
//********************************************************************//
//******  Auto Scroller class - scrolls with up/down buttons   *******//
//********************************************************************//
//This class creates a scroll bar and then attaches the bar with content
//All options listed in the options object (options: {}) are customizable during class instance creation
/*
var myScroller = new misoScroller("myElement");

*/
//Public Function are - 
	//myScroller.scroll(direction)  ::  direction = "up" or "down"
var misoScroller = new Class({
   	options:{
		//================= Editable Properties/Options
		//-------- WIDGET
		type: "vertical",							//the main Widget 
		contentClassName: "misoScrollerContent",	//content properties
		trackClassName: "misoScrollerTrack",//Track properties
		barHoverColor: "#6c002e",
		barHover: true,
		customBarSize: false,
		barClassName: "misoScrollerBar",//Track Bar properties
		steps: 100,//Steps in bar scrolling
		contentWidth: null,
		maxScrollBarWidth: null,
		
		//------- MISC
		logEvents: false,
		
		//------ METHODS
		onChange: function(){},
		onComplete: function(){}
	},
    initialize: function(element, options){
		var clss = this;
		
		//STEP 1: load the default or supplied options
		this.setOptions(options);				//set options if custom options are being supplied
		this.parseOptions(this.options);		//parse optionsand convert them into class properties
		
		//STEP 2: collect the elements and convert them into MooTools DOM objects
		this.element = $(element);								//The main widget container
		this.content = this.element.getElement('div[class=' + this.contentClassName + ']');
		this.track = this.element.getElement('div[class=' + this.trackClassName + ']');
		this.bar = this.track.getElement('div[class=' + this.barClassName + ']');
		this.barColor = this.bar.getStyle("background-color");
		this.complete = true;
		
		//STEP 3: Call the rendering + initialization functions
		this.render();
		
		//STEP 4: Handle mouse wheel and keyboard events
		this.element.addEvent('mousewheel', function(event) {
			event = new Event(event);
			if (event.wheel > 0) { clss.scroll('up'); } 		/* Mousewheel UP */
			else if (event.wheel < 0) { clss.scroll('down'); }	/* Mousewheel DOWN*/
		});
		this.element.addEvent('onkeydown', function(event) {
			event = new Event(event);
			if (key == "up" || (key == "space" && event.shift) || key == "$" || key == "!") { clss.scroll('up'); } 		/* Mousewheel UP */
			else if (key == "down" || key == "space" || key == '"' || key == "#") { clss.scroll('down'); }			/* Mousewheel DOWN*/
		});
		this.bar.addEvent('mouseenter', function(event) {
			event = new Event(event);
			//alert(clss.barHoverColor)
			if (clss.barHoverColor){
				if (clss.barColor){
					this.setStyle("background-color", clss.barHoverColor);
				}
			}
		});
		this.bar.addEvent('mouseleave', function(event) {
			event = new Event(event);
			if (clss.barColor){
				this.setStyle("background-color", clss.barColor);
			}
		});
    },
	parseOptions: function(optionsObj, ignoreUndefinedProps){
		if (!optionsObj){ return; } else {
			for (var optionName in optionsObj){
				if (ignoreUndefinedProps && optionsObj[optionName] == undefined){ continue; } else { this[optionName] = optionsObj[optionName]; }
			}
		}
	}
});
misoScroller.implement(new Options);
misoScroller.implement({
	render: function(){
		var clss = this;
		
		this.href = window.location.href;
		//alert(this.href)
		
		//STEP 1: set the height of the track bar
		this.track.height = this.track.getStyle("height").toInt();
		this.track.width = this.track.getStyle("width").toInt();
		this.content.height = this.content.getStyle("height").toInt();
		this.content.width = this.content.getStyle("width").toInt();
		
		//if track 'bar' dimension is not custom - apply default
		//alert(this.element.id + " :: track height :: " + this.track.height + ", customize: " + this.bar.getStyle("height").toInt());
		if (this.track.height > 0 && this.customBarSize == false){
			if (this.type =="vertical" && this.bar.getStyle("height").toInt() < 10){ //if height was not specified by CSS
				this.bar.height = this.track.height * (this.content.height / this.content.scrollHeight);
				if (this.bar.height < 10) { this.bar.height == 10; }
				this.bar.setStyle("height", this.bar.height);
				//alert(this.bar.height);
			} else if (this.type =="horizontal"){ //if height was not specified by CSS
				if (this.contentWidth){
					this.bar.width = this.track.width * (this.contentWidth / this.content.scrollWidth);
				} else {
					this.bar.width = this.track.width * (this.content.width / this.content.scrollWidth);
					//alert(this.track.width + " * " + this.content.width + " / " + this.content.scrollWidth);
				}
				//alert(this.content.scrollWidth)
				if (this.content.scrollWidth < 901){
					this.bar.setStyle("display", "none");
				} else {
					this.bar.setStyle("width", 100);
				}
				//if (this.bar.width < 870) { this.bar.width = 100; }
				//this.bar.setStyle("width", this.bar.width);
				
			}
		} else {
			//no code here -- user must supply dimensions from CSS for all components except the track 'bar'
			
		}
		
		//STEP 2: create slider - track and bar
		//cerate about content slider - for scrolling
		this.bar.addEvent("mousedown", function(event){
			this.complete = false;
		});
		
		this.slider = new Slider(this.track, this.bar, {	
			steps: this.steps,	
			mode: this.type,	
			wheel: true,
			onChange: function(step){
				clss.onChange();
				clss.complete = false;
				clss.bar.setStyle("background-color", clss.barHoverColor);
				clss.scroll(undefined, step);
			},
			onComplete: function(){
				clss.bar.setStyle("background-color", clss.barColor);
				clss.onComplete();
				clss.complete = true;
			}
		}).set(0);
		
		this.track.addEvent("mousedown", function(event){
			new Event(event).stop();
		});
		
	},
	scroll: function(direction, step){
		var scrollable_height = this.content.scrollHeight - this.content.height;
		var scrollable_width = this.content.scrollWidth - this.content.width;
		
		//alert(this.content.scrollWidth + " " +  this.content.width);
		
		//scrolling with scoll bar
		if (step != undefined){
			if (this.type == "vertical"){
				var srollTo = (scrollable_height / this.steps) * step;
				this.content.scrollTop = srollTo;
			} else {
				var srollTo = (scrollable_width / this.steps) * step;
				this.content.scrollLeft = srollTo;
				//window.location.href = this.href + "#" + srollTo;
			}
			//alert(this.href)
			//window.location.href = this.href + "#" + srollTo;
			//alert("scrollTo: " + srollTo + ", step: " + step + ", this.content.scrollWidth: " + scrollable_width + ", this.steps: " + this.steps);
		} 
		//scolling with mouse wheel and keyboard
		if (direction != undefined){
			if (direction == "up"){
				this.content.scrollTop = this.content.scrollTop - 40;
			} else {
				this.content.scrollTop = this.content.scrollTop + 40;
			}
			step = this.content.scrollTop / (scrollable_height / this.steps);
			this.slider.set(step);
		}
	}
});