// JavaScript Document
/**********
* Copyright 2007 Gregg B Larson
* All Rights reserved
***********/

function guitar(tctrl){
	this.tabcreator = tctrl;
	
	this.table = document.createElement('table');
	this.table.border = "0";
	this.table.align = "center";
	this.table.style.backgroundColor = "#996633";
	this.table.cellSpacing = "0";
	this.table.cellPadding = "0";
	
	this.tbody = document.createElement("tbody");
	
	this.tr1 = document.createElement('tr');
	this.tr1.style.backgroundColor = "#FFFFFF";

	this.td1 = document.createElement('td');
	this.td1.rowspan ="8";
	this.tr1.appendChild(this.td1);
	this.tbody.appendChild(this.tr1);//tbody = table
	
	this.createscale = function(val){
		var offset = Array("C","C#/Db","D","D#/Eb","E","F","F#/Gb","G","G#/Ab","A","A#/Bb","B").indexOf(val);
		var flatsharp_scale = Array("0","F","S","F","S","F","F","S","F","S","F","S");
		var flatsharp = flatsharp_scale[offset];
		var chromatic_scale = Array("C","CsDb","D","DsEb","E","F","FsGb","G","GsAb","A","AsBb","B");
		//var cofval;
		//debug(val + ": " + offset);
		for(var i=0;i<12;i++){
		//val = i + offset;
			if(i==0){
				if(i < offset){
					for(i;i<offset;i++){
//						$cofval = chromatic_scale.shift();
						chromatic_scale.push(chromatic_scale.shift());
					}
				}
			}
			
		}
		return chromatic_scale;
		
	}
	
	
	//end of the init
	
	//begin of functions
	this.ClrBrd = function (){
		for(i=5;i>=0;i--){
			for(j=0;j<=21;j++){
				var strID = (i+1) + "" + j;
				var strElem = "note_" + strID;
				//debug(strID);
				//$(strID).style.background = "#996633";
				$(strElem).innerHTML = "";
				$(strElem).style.backgroundImage = "";
			}
		}
	}
	
	this.display = function(vDiv){
			this.div = vDiv;
			for(var j=0;j<=21;j++)
	{	
		var numnode = document.createElement('td');
		numnode.width = "32";
		numnode.height = "20";
		numnode.align = "center";
		numnode.style.fontWeight = "bolder";
		numnode.innerHTML = j;
		this.tr1.appendChild(numnode);
	}
		
	var notes = new Array("E","A","D","G","B","E");
	var markers = new Array(3,5,7,9,12,15,17);
	var stringwidths = new Array(4,3,3,3,2,2);
	for(var i=6;i>=1;i--){
		var gtrow = document.createElement('tr');
		var tdnut = document.createElement('td');
		tdnut.width = "32";
		tdnut.height = "20";
		tdnut.align = "center";
		tdnut.style.fontWeight = "bolder";
		tdnut.style.backgroundColor = "#FF9900";
		tdnut.innerHTML = notes[i-1];
		gtrow.appendChild(tdnut);
		var scale = this.createscale(notes[i-1]);
	//	debug(scale);
		for(j=0;j<=21;j++){	//onMouseOut=\"MM_swapImgRestore()\" onMouseOver=\"MM_swapImage('Image_" .$i . $j. "','','empty2.gif',1)\"
			 if(j < 12){
				 id = scale[j]; 
			 }else{
			 	id = scale[j-12];
			 }
			var tdfret = document.createElement('td');
	 		tdfret.width = "32";
			tdfret.height = "20";
			var fretdiv = document.createElement('div');
			fretdiv.id = i + "" + j;
			fretdiv.title = id;
			fretdiv.style.backgroundColor = "";
			//fretdiv.style.backgroundImage = "url(images/brownneck_copper.gif)";
			if(markers.include(j)){
					if(j == 12){
						if(i == 2 || i == 4){
							fretdiv.style.backgroundImage = "url(images/brownneck_copper_lowercircle.gif)";
						} else if (i==3 || i == 5){
							fretdiv.style.backgroundImage = "url(images/brownneck_copper_uppercircle.gif)";
						} else {
							fretdiv.style.backgroundImage = "url(images/brownneck_copper.gif)";
						}
					} else {
						if(i == 3){
							fretdiv.style.backgroundImage = "url(images/brownneck_copper_lowercircle.gif)";
						} else if (i==4){
							fretdiv.style.backgroundImage = "url(images/brownneck_copper_uppercircle.gif)";
						} else {
							fretdiv.style.backgroundImage = "url(images/brownneck_copper.gif)";
						}
					}
			} else {
				fretdiv.style.backgroundImage = "url(images/brownneck_copper.gif)";
			}
			fretdiv.style.width = "32px";
			fretdiv.style.height = "20px";
			fretdiv.style.position= "relative";
		/*	
			var verticaldiv = document.createElement('div');
			verticaldiv.style.backgroundColor="#CCCCCC";
			verticaldiv.style.position = "absolute";
			verticaldiv.style.left = "30px";
			verticaldiv.style.width = "2px";
			verticaldiv.style.height = "20px";

				var stringdiv = document.createElement('div');
			stringdiv.id = "string";
			var strStrColor;
			var strStrImage;
			if (i < 4) {
				strStrColor = "#FF6600";
				strStrImage = "copperstring.gif";
			} else {
				strStrColor = "#CCCCCC";
				strStrImage = "silverstring.jpg";
			}
		
			stringdiv.style.backgroundColor =  strStrColor; //"#FF6600";
			stringdiv.style.backgroundImage = "url(images/" + strStrImage + ")"; //"url(images/copperstring.gif)";
			stringdiv.style.position = "absolute";
			stringdiv.style.right = "0px";
			stringdiv.style.bottom = "8px";
			stringdiv.style.width = "32px";
			stringdiv.style.height = "0px";	*/
			
			var notediv = document.createElement('div');
			notediv.id = "note_" + i + "" + j;
			notediv.i = i;
			notediv.j = j;
			notediv.title = id;
			notediv.style.position = "absolute";
			notediv.style.verticalAlign = "bottom";
			notediv.style.textAlign = "center";
			notediv.style.left = "0px";
			notediv.style.top = "0px";
			notediv.style.width = "32px";
			notediv.style.height = "20px";
			notediv.style.color = "#FFFFFF";
			
			Event.observe($(fretdiv), 'mouseover', function(event){
				//debug("got it!");
				var element = Event.element(event);
				
				element.style.backgroundColor = "rgb(255, 153, 0)";
			}.bindAsEventListener(this));
			
			Event.observe($(fretdiv), 'mouseout', function(event){
				//debug("got it!");
				var element = Event.element(event);
				element.style.backgroundColor = "";
			}.bindAsEventListener(this));
			
			Event.observe($(fretdiv), 'click', function(event){
				//click on a fret (this is the first event)
			var element = Event.element(event);
				//debug(element.i + " and " + element.j);
				element.style.backgroundImage = "url(" + "images/note.gif" + ")";
				element.style.backgroundPosition = "center";
				element.style.backgroundRepeat = "no-repeat";
				//element.innerHTML = element.title;
				this.tabcreator.tabbit(element.i, element.j)
			}.bindAsEventListener(this));

						
		//	fretdiv.appendChild(verticaldiv);	
		//	fretdiv.appendChild(stringdiv);
			fretdiv.appendChild(notediv);
			tdfret.appendChild(fretdiv);
			gtrow.appendChild(tdfret);
			this.tbody.appendChild(gtrow); //tbody = table
		}
	}
	this.tr2 = document.createElement('tr');
	this.tr2.style.backgroundColor = "#FFFFFF";
	
	this.td2 = document.createElement('td');
	this.td2.width ="10";
	this.td2.height = "20";
	
	this.tr2.appendChild(this.td2);
	for(var j=0;j<=21;j++)
	{	
		var numnode = document.createElement('td');
		numnode.width = "32";
		numnode.height = "20";
		numnode.align = "center";
		numnode.style.fontWeight = "bolder";
		numnode.innerHTML = j;
		this.tr2.appendChild(numnode);
	}
	this.tbody.appendChild(this.tr2);//tbody = table
	this.table.appendChild(this.tbody); //added
	this.div.appendChild(this.table);
	}
	this.echo = function(){
		return "guitar";
	}

}