/*
spinner = pair of next/previous buttons to complelement select lists (esp. time steps) that people may wish to step through, and load respective views client side/via ajax
*/
//generic event handler
function addEvent(obj,evt,fn){
	if(obj.addEventListener){
		obj.addEventListener(evt, fn, false);
	}
	else if(obj.attachEvent){
		obj.attachEvent('on' + evt, fn);
	}
}

//base spinner, selectId, selectHandler for associated list 
function SelectSpinner(selectId, selectHandler) {
	//constants
	this.selectId = selectId;
	this.selectEl = document.getElementById(selectId);
	this.selectLen = document.getElementById(selectId).options.length;
	this.selectEl.className = this.selectEl.className + " spinner";
	this.selectHandler = selectHandler; 
	
	this.makeSpinner();
	this.checkSpin();
	//scope correction
	var that = this;
	var thatSpin = function(){that.checkSpin();};
	var thatKill = function(){that.kill();};
	this.selectEl.onChange = addEvent(that.selectEl, 'change', thatSpin);
	//window.onUnload=addEvent(window, 'unload', thatKill );	
}

SelectSpinner.prototype = {
	makeSpinner: function(){
	    //function scope correction
		var that = this;	
		//make spinner
	    var spinner = document.createElement('div');
	    spinner.setAttribute('id', this.selectId + '_spin');
		spinner.className = 'spinner';
	    
		//up image //
	    this.upImg = this.createImg(this.selectId + '_up', '/watl/images/symbols/earlier.gif', 'Previous', 
			function(){ 
			 //scope correction required
				 var sindex = document.getElementById(that.selectId).selectedIndex;
				 if(sindex > 0){ 
					 that.selectEl.selectedIndex -= 1;
					 that.checkSpin(sindex-1);	
					 //select has changed so call any handlers
					 that.selectHandler();
				 }
	        }
									
		);   
	    spinner.appendChild(this.upImg);
	    //down image
	    this.downImg = this.createImg(this.selectId +'_down' , '/watl/images/symbols/later.gif', 'Next', 
			function(){
				var sindex = document.getElementById(that.selectId).selectedIndex;
				 if(sindex < that.selectLen-1){
					 that.selectEl.selectedIndex += 1;
				     that.checkSpin(sindex+1);
					 //select has changed so call any handlers
					 that.selectHandler();
				 }
			 });
        spinner.appendChild(this.downImg);
	    //insert spinner
	    this.selectEl.parentNode.insertBefore(spinner, this.selectEl.nextSibling);
	},
	
	createImg: function (imgId, src, alt, handler){
		var img = document.createElement('img');
		img.setAttribute('id', imgId);
		img.setAttribute('alt', alt);
		img.setAttribute('title', alt);
		img.src = src;
		img.onClick = addEvent(img, 'click', handler);
		return img;
     },
	
	checkSpin: function(sindex){	
		var sindex = sindex || document.getElementById(this.selectId).selectedIndex;
		if(sindex < 1){ this.upImg.src = '/watl/images/symbols/earlier-0.gif';}
		else{ this.upImg.src = '/watl/images/symbols/earlier.gif';} 
		if(sindex < this.selectLen-1){ this.downImg.src = '/watl/images/symbols/later.gif';}
		else{ this.downImg.src = '/watl/images/symbols/later-0.gif';}
    }
};
document.write('<link rel="stylesheet" type="text/css" href="/climate/cdo/styles/spinner.css" />');