// Helper functions
function getstyle(obj, cAttribute) {
		if (obj.currentStyle) {
				this.getstyle = function (obj, cAttribute) {return obj.currentStyle[cAttribute];};
		} else {
				this.getstyle = function (obj, cAttribute) {return window.getComputedStyle(obj, null)[cAttribute];};}
		return getstyle(obj, cAttribute);
}


function replacevalsreverse(thenum) {
 if (thenum == 10) { thenum = "a"; }
 if (thenum == 11) { thenum = "b"; }
 if (thenum == 12) { thenum = "c"; }
 if (thenum == 13) { thenum = "d"; }
 if (thenum == 14) { thenum = "e"; }
 if (thenum == 15) { thenum = "f"; }

 return thenum;
}


function rgb2hex(num1, num2, num3) {
	return "#" + calc10to16(num1) + calc10to16(num2) + calc10to16(num3);

}

function calc10to16(num) {
	if (num < 16) {
		var thenum = replacevalsreverse(num);
	 	return ("0"+thenum).replace(" ", "", "g");
	}
	else {
 		var themod=num % 16;
 		var thenum=((num-themod) / 16);
 		thenum = replacevalsreverse(thenum)
 		themod = replacevalsreverse(themod)

 		return (""+thenum+themod).replace(" ", "", "g");
	}
}


function rgbString2HTML(rgbstring) {
		rgbstring = rgbstring.replace("rgb(", "", "g");
		rgbstring = rgbstring.replace(")", "", "g");
		var colors = rgbstring.split(",");

		return rgb2hex(colors[0], colors[1], colors[2]);
}

function getBit(b,n) {
  return ((b&(s=1<<n))==s)?1:0;
}

function setBit(b,n,v) {
	if (v==0) {
		andVal = ~(1<<n);
		return b & andVal;
	}
	else {
		var orVal = 1<<n;
		return b | orVal;
	}
}


// Class functions

var SMSSprite = function () {
		this.dataArray=new Array();
		this.colorArray = new Array("#000000", "#550000", "#aa0000", "#ff0000", "#005500", "#555500",
						            "#aa5500", "#ff5500", "#00aa00", "#55aa00", "#aaaa00", "#ffaa00",
									"#00ff00", "#55ff00", "#aaff00", "#ffff00");
		this.smsPalette = new Array("#000000", "#550000", "#aa0000", "#ff0000", "#005500", "#555500", 
									"#aa5500", "#ff5500", "#00aa00", "#55aa00", "#aaaa00", "#ffaa00", 
									"#00ff00", "#55ff00", "#aaff00", "#ffff00", "#000055", "#550055",	
									"#aa0055", "#ff0055", "#005555", "#555555", "#aa5555", "#ff5555", 
									"#00aa55", "#55aa55", "#aaaa55", "#ffaa55", "#00ff55", "#55ff55", 
									"#aaff55", "#ffff55", "#0000aa", "#5500aa", "#aa00aa", "#ff00aa", 
									"#0055aa", "#5555aa", "#aa55aa", "#ff55aa", "#00aaaa", "#55aaaa", 
									"#aaaaaa", "#ffaaaa", "#00ffaa", "#55ffaa", "#aaffaa", "#ffffaa", 
									"#0000ff", "#5500ff", "#aa00ff", "#ff00ff", "#0055ff", "#5555ff", 
									"#aa55ff", "#ff55ff", "#00aaff", "#55aaff", "#aaaaff", "#ffaaff", 
									"#00ffff", "#55ffff", "#aaffff", "#ffffff");
		this.currentColor = this.colorArray[1];
};

SMSSprite.prototype.selectSize = function() {
		// get value from select form
		sl = document.getElementById("size");	// select
		var option = sl.options[sl.selectedIndex].value;

		// change title and select label
		document.title = "SMS Sprite Generator -  David Pello 2009 | Sprite " + option;
		document.getElementById('gridlabel').firstChild.nodeValue=option;

		// configure object
		this.setSize(option);
};


SMSSprite.prototype.setSize = function(size) {

		// set variables according to selected size

		if (size=="8x8") {
				this.sizex = 8;
				this.sizey = 8;
		}
		else if (size=="8x16") {
				this.sizex = 8;
				this.sizey = 16;
		}
		else {
				this.sizex = this.sizey = 16;
		}

		// Init dataArray
		for (var f=0; f<this.sizey*this.sizey; f++)
				this.dataArray[f] = 0;


		// Draw tables
		this.drawTable(15, "maintable");
		this.drawTable(3, "minitable");
};


SMSSprite.prototype.drawTable = function(size, name) {
		var htmlText="<table id=\"t"+name+"\" class=\"c"+name+"\">\n";

		for (var f=0;f<this.sizey;f++) {
				htmlText+="\t<tr style=\"height:"+size+"px;\"class=\"c"+name+"\">\n\t\t";
				for(var c=0; c<this.sizex; c++) {
						htmlText+="<td id=\""+name+"_"+c+"-"+f+"\" style=\"background-color: #000000; width:"+size+"px;\"class=\"c"+name+"\" onClick=\"miSMSSprite.drawPixel(this);\" />";
				}
				htmlText+="</tr>\n";
		}
		htmlText+="</table>";

		document.getElementById(name).innerHTML = htmlText;
};

SMSSprite.prototype.drawPixel = function(callerCell) {
		if (callerCell.id.indexOf("maintable") != -1) {
				callerCell.style.backgroundColor = this.currentColor;
				// pintamos tambien en la peque
				pos = callerCell.id.split("_")[1];
				document.getElementById("minitable_"+pos).style.backgroundColor = this.currentColor;
				// put data in array
				pos = pos.split("-");
				var index = this.colorArray.indexOf(this.currentColor);
				this.dataArray[(parseInt(pos[1])*this.sizey)+parseInt(pos[0])] = index;
		}
};

SMSSprite.prototype.clearTables = function() {
		for (var f=0;f<this.sizey;f++)
				for(var c=0; c<this.sizex; c++) {
						document.getElementById("maintable_"+c+"-"+f).style.background=this.colorArray[0];
						document.getElementById("minitable_"+c+"-"+f).style.background=this.colorArray[0];
						this.dataArray[f*this.sizey+c] = 0;
				}
};


SMSSprite.prototype.colorTable = function() {
		var htmlText="Current Palette<br /><table class=\"colortable\">\n";
		htmlText+="\t<tr class=\"colortable\" style=\"height:15px\">\n\t\t";
		for (var f=0;f<16;f++) {
				htmlText+="<td id=\"colorPalette"+f+"\" style=\"width: 15px;\" onclick=\"miSMSSprite.selectColor(this);\"/>";
		}
		htmlText+="\t</tr>\n";
		htmlText+="\t</table>\n";

		document.getElementById("colorPalette").innerHTML = htmlText;

		for (var i=0;i<16;i++) {
				$("#colorPalette"+i).css("background-color", this.colorArray[i]);
				$("#colorPalette"+i).css("border","1px #000000 solid");
		}

		this.markSelectedColor(this.currentColor);
};

SMSSprite.prototype.paletteTable = function() {
		var htmlText="Master System palette:<br /><table class=\"palettetable\">\n";
		htmlText+="\t<tr class=\"colortable\" style=\"height:15px\">\n\t\t";
		for (var f=0;f<64;f++) {
				htmlText+="<td id=\"palette"+f+"\" style=\"width: 10px;\" onclick=\"miSMSSprite.selectPalette(this);\"/>";
		}
		htmlText+="\t</tr>\n";
		htmlText+="\t</table>\n";

		document.getElementById("smsPalette").innerHTML = htmlText;

		for (var f=0;f<64;f++) {
				$("#palette"+f).css("background-color", this.smsPalette[f]);
				$("#palette"+f).css("border","1px #000000 solid");
		}
};

SMSSprite.prototype.selectColor = function(callerCell) {
		
		// reset styles
		for(i=0; i<16;i++)
				$("#colorPalette"+i).css("border","1px #000000 solid");

		// new style
		$("#"+callerCell.id).css({"border":"3px #000000 solid", "border-style":"outset"});
		//callerCell.style.borderStyle = "outset";
		//var color = getstyle(callerCell, "backgroundColor");
		//color = rgbString2HTML(color);
		var color = rgbString2HTML($("#"+callerCell.id).css("background-color"));
		var index = this.colorArray.indexOf(color);
		//document.getElementById("debug").innerHTML=index+"<br/>"+color;
		this.currentColor = this.colorArray[index];
};

SMSSprite.prototype.markSelectedColor = function(color) {
		index = this.colorArray.indexOf(color);
		$("#colorPalette"+index).css({"border":"3px #000000 solid", "border-style":"outset"});
		var a=0;
};

SMSSprite.prototype.selectPalette = function(callerCell) {
		//get current color
		oldcolor = this.currentColor;
		//get position in color table
		pos = this.colorArray.indexOf(oldcolor);
		// change colors
		//var newcolor = getstyle(callerCell, "backgroundColor");
		//newcolor = rgbString2HTML(newcolor);
		var newcolor = rgbString2HTML($("#"+callerCell.id).css("background-color"));
		this.colorArray[pos] = newcolor;
		this.currentColor = newcolor;
		this.colorTable();
		//update tables
		this.updateTable("maintable", oldcolor, newcolor);
		this.updateTable("minitable", oldcolor, newcolor);

};

SMSSprite.prototype.updateTable = function(name, oldcolor, newcolor) {
		for (f=0; f<this.sizey; f++) {
				for (c=0; c<this.sizex; c++) {
						cell = document.getElementById(name+"_"+c+"-"+f);
						//cellcol = getstyle(cell, "backgroundColor");
						//cellcol = rgbString2HTML(cellcol);
						var cellcol = rgbString2HTML($("#"+cell.id).css("background-color"));

						if (cellcol == oldcolor)
								cell.style.backgroundColor = newcolor;
				}
		}
};


SMSSprite.prototype.generateData = function() {

		// sprite data
		var currentByte = 0;
		var exitArray = new Array();

		// let's go 
		for (f=0; f<this.sizey; f++) {			// f rows
			for (b=0; b<4; b++) {				// 4 bytes per row
				currentByte=0;
				for(c=0; c<this.sizey; c++) {
					var v = getBit(this.dataArray[f*this.sizey+c], b);
					currentByte = setBit(currentByte, c, v);
					//console.debug();
				}
				exitArray.push(currentByte);
			}
		}		


		var spr="Sprite data:\n";
		for (var i=0;i<exitArray.length;i++) {
			spr+="$"+calc10to16(exitArray[i]);
			if (i<exitArray.length-1)
				spr+=", ";
		}

		// pallete data
		pal = "\n\nPallete data:\n"
		for (i=0; i<16; i++) {
				palcolor = this.colorArray[i];
				index = this.smsPalette.indexOf(palcolor);
				hexvalue = "$"+calc10to16(index);
				pal+=hexvalue;
				if (i<15) {
					pal+=", ";
				}
		}

		document.getElementById("outputText").innerHTML=spr+pal;
};

// Init.

SMSSprite.prototype.init = function() {
		
		this.selectSize();
		this.colorTable();
		this.paletteTable();

}