//init WebEditor control interface, and set the css and events into the components
function initControl(){
  var elements;
  elements = findObjectListByName("toolbar-button");
	for(i = 0; i < elements.length; i++){
    var element = elements[i];
    initToolbarButton(element);
	}
  
  elements = findObjectListByName("tabsheet");
	for(i = 0; i < elements.length; i++){
    var element = elements[i];
    initTabSheet(element);
	}
	return true;
}

//init a button
function initToolbarButton(btn){
  btn.onmouseover = btnMouseOver;
  btn.onmouseout = btnMouseOut;
  btn.onmousedown = btnMouseDown;
  btn.onmouseup	= btnMouseUp;
  btn.ondragstart = cancelEvent;
  btn.onselectstart = cancelEvent;
  btn.onselect = cancelEvent;
  
  btn.className = btn.getAttribute("editorStyle") + "-btn-out";
}

//init a tabsheet
function initTabSheet(tabSheet){
  tabSheet.onmouseover = cancelEvent;
  tabSheet.onmouseout = cancelEvent;
  tabSheet.onmousedown = tabsMouseDown;
  tabSheet.onmouseup	= cancelEvent;
  tabSheet.ondragstart = cancelEvent;
  tabSheet.onselectstart = cancelEvent;
  tabSheet.onselect = cancelEvent;
  
  tabSheet.className= tabSheet.getAttribute("editorStyle") + "-tab-off";
}

//Cancel an event of the object
function cancelEvent(){
  event.returnValue = false;
  event.cancelBubble = true;
  return false;
}

//a button's mouse over event
function btnMouseOver(){
  this.className = this.getAttribute("editorStyle") + '-btn-over';
	return true;
}

//a button's mouse out event
function btnMouseOut(){
  this.className = this.getAttribute("editorStyle") + '-btn-out';
	return true;
}

//a button's mouse down event
function btnMouseDown(){
  this.className = this.getAttribute("editorStyle") + '-btn-down';
	return true;
}

//a button's mouse up event
function btnMouseUp(){
  this.className = this.getAttribute("editorStyle") + '-btn-over';
	return true;
}

//a tabsheet's mouse down event
function tabsMouseDown(){
  selectTabSheet(this);
}

//select a tabsheet
function selectTabSheet(tabsheet){
  var elements = findObjectListByName("tabsheet");
	for(i = 0; i < elements.length; i++){
		var element = elements[i];
		if(element.getAttribute("parentTab") == tabsheet.getAttribute("parentTab")){
			element.className = element.getAttribute("editorStyle") + "-tab-off";
		}
	}
	tabsheet.className = tabsheet.getAttribute("editorStyle")  + "-tab-on";
	return true;
}