var TenByTen = Class.create();
TenByTen.prototype = {

	APP_VERSION: '1.0 alfa',
	APP_NAME: 'Ajax 10x10 List Simulation',
	APP_COMMENT: 'Ajax 10x10 List',
	APP_WEBSITE: 'http://10x10.zzup.net',
	APP_AUTHOR: 'ManuX',
	APP_AUTHOR_EMAIL: 'ajax@zzup.net',    
	
	initialize: function(dst) {
	    
	    this.target = $(dst);
	    
	    
	    if (this.target.tagName != "UL" && this.target.tagName != "OL") {
	        alert("Destination must be a UL/OL element");
	        return false;
	    }
	    
            var options = Object.extend({
                step: .1,
                maxHeight: 1.4,
                minHeight: .1,
                unit: "pt",
                initialFontHeight: 2,
                //initialColor: "black",
                initialLineHeight: 2,
                selectedColor: "#ff592f"
                
	    }, arguments[1] || {});
	     
	     
            this.options = options;
            this.overEvents = new Array();
            this.innerNodes = new Array();
            this.mouseClickEvents = [];
            
	    var y = 0;
	    for (var i = 0; i < this.target.childNodes.length; i++) {
	        if (this.target.childNodes[i].tagName == "LI") {
	            this.innerNodes[y] = this.target.childNodes[i];
                    y++;
	        } 
	        
	    }    
	    
	    for (var i = 0; i < this.innerNodes.length; i++) {
	            
                    this.overEvents[i] = this.alerter.bind(this, i);
                    this.mouseClickEvents[i] = this.clickerWrapper.bindAsEventListener(this);
	            Event.observe(this.innerNodes[i],'mouseover',this.overEvents[i], true);
	            Event.observe(this.innerNodes[i],'mousedown',this.mouseClickEvents[i], true);
	            
	            this.innerNodes[i].style.fontSize = this.options.initialFontHeight + this.options.unit
                    this.innerNodes[i].style.lineHeight = this.options.initialLineHeight + this.options.unit
                    this.innerNodes[i].style.color = this.options.initialColor;
                    this.innerNodes[i].style.cursor = "pointer";
                    this.innerNodes[i].pos = i;
	    }    
	    

	  
	    this.nodes = y;
	  
	    
	    
	},
	
	dispose: function() {
		
		for (var i = 0; i < this.innerNodes.length; i++) {
			
		  Event.stopObserving(this.innerNodes[i],'mouseover',this.overEvents[i], true);
		  Event.stopObserving(this.innerNodes[i],'mousedown',this.mouseClickEvents[i], true);
			this.target.removeChild( this.innerNodes[i] );
		}
	},
	
	clickerWrapper: function(x) {
	    
	    var tar = Event.element(x);
            if (Event.isLeftClick(x)) {
                //this.cityClick(tar.obj);
	        if (this.options.leftClickFunction) {
	            this.options.leftClickFunction( tar );
	        }
            } else {
	        if (this.options.rightClickFunction) {
	            this.options.rightClickFunction( tar );
	        }
                return false;
            }
	},
	
	alerter: function(pos) {
	    var start = 0;
	    if (this.hilighted != undefined) {
	        if (this.options.outFunction) {
	            this.options.outFunction( this );
	        }
	        
	        start = Math.max(this.hilighted - 6, 0);
	         
	        for (var i = start; i < (start + 10); i++) {
	            if (i == (this.innerNodes.length)) { break; }
                    this.innerNodes[i].style.fontSize = this.options.initialFontHeight + this.options.unit
                    this.innerNodes[i].style.lineHeight = this.options.initialLineHeight + this.options.unit
                    this.innerNodes[i].style.color = this.innerNodes[i].groupcolor || this.options.initialColor;
                    this.innerNodes[i].style.textDecoration = "";
	        }
	        
	        
	        
	    }
	    this.hilighted = pos;
	    
	    start = Math.max(this.hilighted - 5, 0);
	    for (var i = start; i < (start + 9); i++) {
	            if (i == (this.innerNodes.length)) { break; }
	            this.innerNodes[i].style.fontSize = this.options.initialFontHeight + this.options.unit
                    this.innerNodes[i].style.lineHeight = this.options.initialLineHeight + this.options.unit
                    this.innerNodes[i].style.color = this.innerNodes[i].groupcolor || this.options.initialColor;
                    this.innerNodes[i].style.textDecoration = "";

                    switch(pos - i) {
                     
                     case 5:
                        this.innerNodes[i].style.fontSize = "6" + this.options.unit
                        this.innerNodes[i].style.lineHeight = "6" + this.options.unit
                     break;
                     
                     case 4:
                        this.innerNodes[i].style.fontSize = "7" + this.options.unit
                        this.innerNodes[i].style.lineHeight = "7" + this.options.unit
                     break;
                     
                     case 3:
                        this.innerNodes[i].style.fontSize = "8" + this.options.unit
                        this.innerNodes[i].style.lineHeight = "8" + this.options.unit
                     break;
                     
                     case 2:
                        this.innerNodes[i].style.fontSize = "9" + this.options.unit
                        this.innerNodes[i].style.lineHeight = "9" + this.options.unit
                     break;
                     
                     case 1:
                        this.innerNodes[i].style.fontSize = "10" + this.options.unit
                        this.innerNodes[i].style.lineHeight = "10" + this.options.unit
                     break;
                     
                     case 0:
                        this.innerNodes[i].style.fontSize = "16" + this.options.unit
                        this.innerNodes[i].style.lineHeight = "16" + this.options.unit
                        
                        //this.innerNodes[i].style.color = this.options.selectedColor;
                        this.innerNodes[i].style.textDecoration = "underline";
                     break;
                     
                     case -1:
                        this.innerNodes[i].style.fontSize = "10" + this.options.unit
                        this.innerNodes[i].style.lineHeight = "10" + this.options.unit
                     break;
                     
                     case -2:
                        this.innerNodes[i].style.fontSize = "8" + this.options.unit
                        this.innerNodes[i].style.lineHeight = "8" + this.options.unit
                     break;
                     case -3:
                        this.innerNodes[i].style.fontSize = "7" + this.options.unit
                        this.innerNodes[i].style.lineHeight = "7" + this.options.unit
                     break;
                     case -4:
                        this.innerNodes[i].style.fontSize = "6" + this.options.unit
                        this.innerNodes[i].style.lineHeight = "6" + this.options.unit
                     break;
                        
                    }
	    }   

            
            if (this.options.overFunction) {
                this.options.overFunction( this );
            }
	    
	    
	    /*
	    this.innerNodes[pos].style.fontSize = this.options.maxHeight + this.options.unit;
	    this.innerNodes[pos].style.lineHeight = (this.options.maxHeight/2) + this.options.unit
	    this.innerNodes[pos].style.color = "red"
	    if (pos > 0) {
	        for (var t = pos - 1; t > -1; t--) {
	            var dist = pos - t;
	            var diff = this.options.step * dist;
	            var div = Math.max(this.options.minHeight, this.options.maxHeight - diff);
	            //alert(div);
	            this.innerNodes[t].style.fontSize = div + this.options.unit;
	            //this.innerNodes[t].style.color = "black"
	            this.innerNodes[t].style.lineHeight = (div/2) + this.options.unit;
	        }
	    }
	        for (var t = pos + 1; t < this.innerNodes.length; t++) {
	            var dist = t - pos;
	            var diff = this.options.step * dist;
	            var div = Math.max(this.options.minHeight, this.options.maxHeight - diff);
	            //alert(div);
	            this.innerNodes[t].style.fontSize = div + this.options.unit;
	            //this.innerNodes[t].style.color = "black"
	            this.innerNodes[t].style.lineHeight = (div/2) + this.options.unit;
	        }
	    
	    */
	}
    
}