// the element colorChooser gets applied to needs to have a :
// position tag
// a width tag
// a height tag
// a left tag
// a right tag

function ColorChooserSmartPhone(name) {
	this.strokeColor = 0; // stores the selected color
	this.fillColor = 4; // stores the selected color
	this.colors = ["#000000","#444444","#888888","#cccccc","#ffffff","#009999","#0099cc","#000099","#990099","#ff33ff","#ff0000","#ff9900","#ffff00","#99ff00","#006600"];
	this.opacity = 60; // stores the selected color
	this.stroke = 4; // stores the selected color
	this.name = name; // stores name of java script variable...
	this.height = 0;
	this.TIMER = "";
}

function createColorChooser(element) {
	element = document.getElementById(element);
	
	
	var Insert = "<h2>opacity :</h2>";
	Insert += "<div title='Click to change opacity'  id='Opacity' onclick='"+this.name+".setOpacity(this)' class='toolicons' >"+this.opacity+"%</div>";
	Insert += "<h2>weight :</h2>";
	Insert += "<div title='Click to change strokeweight' id='stroke' onclick='"+this.name+".setStroke(&#34;strokeWeight&#34;)' class='toolicons' ><div id='strokeWeight' ></div></div>";
	Insert += "<h2>stroke :</h2>";
	Insert += "<div title='Click to change strokecolor'  id='strokeColor' onclick='"+this.name+".setStrokeColor(this)'  class='toolicons'  ></div>";
	Insert += "<h2>fill :</h2>";
	Insert += "<div title='Click to change fillcolor' id='fillColor' onclick='"+this.name+".setFillColor(this)'  class='toolicons' ></div>";

	element.innerHTML += Insert;
	
	var height =  element.offsetHeight+10;
	
	element = document.getElementById('Opacity');
	element.style.fontSize = "24px";
	element.style.height = "60px";
	element = document.getElementById('strokeColor');
	element.style.backgroundColor = this.getStrokeColor();
	element = document.getElementById('fillColor');
	element.style.backgroundColor = this.getFillColor();
	element = document.getElementById('stroke');
	element.style.height = "60px";	
	element = document.getElementById('strokeWeight');
	element.style.height = this.getStroke() + "px";
	element.style.backgroundColor = this.getStrokeColor();
	this.height = height;
	return height;
}

function setOpacity(element) {
		this.opacity += 10;
		this.opacity = this.opacity%110;	
		element.innerHTML = this.opacity + "%";
}

function setStroke(element) {
		this.stroke += 2;
		this.stroke = this.stroke%20;	
		var element = document.getElementById(element);
		element.style.height = this.getStroke() + "px";
		element.style.backgroundColor = this.getStrokeColor(); 
}

function setStrokeColor(element) {
	this.strokeColor += 1;
	this.strokeColor %= this.colors.length;
	
	element.style.backgroundColor = this.colors[this.strokeColor];
	
	element = document.getElementById('strokeWeight');
	element.style.backgroundColor = this.getStrokeColor();
}

function setFillColor(element) {
	this.fillColor += 1;
	this.fillColor %= this.colors.length;
	
	element.style.backgroundColor = this.colors[this.fillColor];
}

function getStrokeColor() {
	return 	this.colors[this.strokeColor];
}

function getStroke() {
	return 	this.stroke;
}

function getOpacity() {
	return 	(this.opacity/100) ;
}

function getFillColor() {
	return 	this.colors[this.fillColor];
}

function getHeight() {
	return this.height;	
}

function d2h(d) {return d.toString(16);}
function h2d(h) {return parseInt(h,16);} 


ColorChooserSmartPhone.prototype.d2h = d2h;
ColorChooserSmartPhone.prototype.h2d = h2d;

ColorChooserSmartPhone.prototype.setFillColor = setFillColor;
ColorChooserSmartPhone.prototype.setStrokeColor = setStrokeColor;
ColorChooserSmartPhone.prototype.setOpacity = setOpacity;
ColorChooserSmartPhone.prototype.setStroke = setStroke;

ColorChooserSmartPhone.prototype.getStroke = getStroke;
ColorChooserSmartPhone.prototype.getOpacity = getOpacity;
ColorChooserSmartPhone.prototype.getStrokeColor = getStrokeColor;
ColorChooserSmartPhone.prototype.getFillColor = getFillColor;
ColorChooserSmartPhone.prototype.getHeight = getHeight;

ColorChooserSmartPhone.prototype.createColorChooser = createColorChooser;