$package("js.ui");

js.ui.Img = function (){
}

js.ui.Img.prototype = new js.ui.Component();

js.ui.Img.prototype.getNativeClass = function (){
	return "js.ui.Img";
}

js.ui.Img.prototype.setSrc = function(src, w, h){
	if(w) this.getUI().style.width = w;
	if(h) this.getUI().style.height = h;

	if(browser.isIE && src){
		if(browser.isIE55_6 && src.indexOf(".png")!=-1){
			this.getUI().onload = function(){
				js.util.Utils.prototype.correctPNG(this, w, h);
			}
			this.getUI().src = src;
		}
		else this.getUI().src = src;
//		if(src)
//			if(src.indexOf("?")==-1)
//				src += "?";
	}
	else{
		this.getUI().src = src;
	}	
}

js.ui.Img.prototype.getSrc = function(){
	if(this.getUI().__src)
		return this.getUI().__src;
	else 
		return this.getUI().src;

}

js.ui.Edit = function (){

}
js.ui.Edit.prototype = new js.ui.Component();

js.ui.Edit.prototype.getUI = function (){
	if(!this.ui){
		this.ui = document.createElement("input");
		this.ui.type = "text";
		this.ui.owner = this;
		this.bindUI();
	}
	return this.ui;
}


js.ui.Div = function (){

}
js.ui.Div.prototype = new js.ui.Component();

js.ui.Div.prototype.getUI = function (){
	if(!this.ui){
		this.ui = document.createElement("div");
		this.ui.owner = this;
		this.bindUI();
	}
	return this.ui;
}

js.ui.HLayout = function (){

}
js.ui.HLayout.prototype = new js.ui.Component();

js.ui.HLayout.prototype.getUI = function (){
	if(!this.ui){
		this.ui = document.createElement("table");
		this.ui.width = this.ui.height = "100%";
		this.ui.border = 0;
		this.ui.cellSpacing = 0;
		this.ui.cellpadding = 0;
		this.ui.owner = this;
		this.bindUI();
	}
	return this.ui;
}

js.ui.HLayout.prototype.bindUI = function (){
	this.row = this.ui.insertRow(-1);
	this.left = this.row.insertCell(-1);
	this.right = this.row.insertCell(-1);
	this.left.vAlign = "top";
	this.right.vAlign = "top";
}

js.ui.HLayout.prototype.addLeft = function (child){
	if(!this.ui) this.getUI();
	if(child.getUI) child = child.getUI();
	this.left.appendChild(child);
}
js.ui.HLayout.prototype.addRight = function (child){
	if(!this.ui) this.getUI();
	if(child.getUI) child = child.getUI();
	this.right.appendChild(child);
}

js.ui.VLayout = function (){

}
js.ui.VLayout.prototype = new js.ui.Component();

js.ui.VLayout.prototype.getUI = function (){
	if(!this.ui){
		this.ui = document.createElement("table");
		this.ui.border = 0;
		this.ui.cellSpacing = 0;
		this.ui.cellpadding = 0;
		this.ui.width = this.ui.height = "100%";
		this.ui.owner = this;
		this.bindUI();
	}
	return this.ui;
}

js.ui.VLayout.prototype.bindUI = function (){
	this.topRow = this.ui.insertRow(-1);
	this.top = this.topRow.insertCell(-1);
	this.bottomRow = this.ui.insertRow(-1);
	this.bottom = this.bottomRow.insertCell(-1);
}

js.ui.VLayout.prototype.addTop = function (child){
	if(!this.ui) this.getUI();
	if(child.getUI) child = child.getUI();
	this.top.appendChild(child);
}
js.ui.VLayout.prototype.addBottom = function (child){
	if(!this.ui) this.getUI();
	if(child.getUI) child = child.getUI();
	this.bottom.appendChild(child);
}



js.ui.ImageButton = function (){
}

js.ui.ImageButton.prototype = new js.ui.Img();

js.ui.ImageButton.prototype.bindUI = function (){
	var __this = this;
	this.ui.style.backgroundColor = "";
	this.ui.onmouseover = function(){
		if(__this.mouseoverImage){
			this.style.filter = "";
			__this.setSrc(__this.mouseoverImage);
		}
		else{
			__this.__oldOpacity = __this.opacity;
			__this.setOpacity(100);
		}
	}
	this.ui.onmouseout = function(){
		if(__this.mouseoverImage){
			this.style.filter = "";
			__this.setSrc(__this.__image);
		}
		else
			__this.setOpacity(__this.__oldOpacity);
	}
	this.ui.onmousedown = function(event){
		if(!event)event =  window.event;
		if(__this.mousedownImage){
			this.style.filter = "";
			__this.setSrc(__this.mousedownImage);
		}
		else
			__this.setOpacity(30);
		js.ui.Component.eventCancelBubble(event);
	}
	this.ui.onmouseup = function(event){
		if(!event)event =  window.event;
		if(__this.mousedownImage){
			this.style.filter = "";
			__this.setSrc(__this.__image);
		}
		else
			__this.setOpacity(__this.__oldOpacity);
		js.ui.Component.eventCancelBubble(event);
	}
}

js.ui.ImageButton.prototype.setImage = function(src, w, h){
	this.setSrc(src, w, h);
	this.__image = src;
}
