/**************************************************\
*                BASE COMPONENT                    *
* Author: Andrew Green                             *
* Modified: 13/10/2008                             *
* Description:                                     *
\**************************************************/
Component.observable=Component.base.extend({

	constructor : function(json){
	
		Component.observable.parent.constructor.apply(this,arguments);
	},
	append : function(component){
		Component.observable.parent.append.apply(this,arguments);
		this.render();
	},
	remove : function(component){
		var baseElement=component.getBaseElement();
		if(baseElement.parentNode)
			baseElement.parentNode.removeChild(baseElement);
		Component.observable.parent.remove.apply(this,arguments);
	},
	addClass : function(className){
		if(className && !this.hasClass(className)){
			this.set('ClassName', this.get('ClassName') + " " + className);
        }
    },
	hasClass : function(className){
		return className && (' '+this.get('ClassName')+' ').indexOf(' '+className+' ') != -1;
    },
	removeClass : function(className){
		if(this.hasClass(className)){
			
			re = new RegExp('(?:^|\\s+)' + className + '(?:\\s+|$)', "g");

			//this.classReCache[className] = re;

			this.set('ClassName', this.get('ClassName').replace(re, " "));
		}
	},
	setClassName : function(val){
		this.getBaseElement().className=val;
		this.properties.ClassName=val;
	},
	setBackgroundImage : function(val){
		this.getBaseElement().style.backgroundImage=val;
		this.properties.BackgroundImage=val;
	},
	setPosition : function(val){
		this.getBaseElement().style.position=val;
		this.properties.Position=val;
		this.render();
	},
	setTop : function(val){
		this.getBaseElement().style.top=val;
		this.properties.Top=val;
		this.render();
	},
	setLeft : function(val){
		this.getBaseElement().style.left=val;
		this.properties.Left=val;
		this.render();
	},
	setWidth : function(val){
		this.getBaseElement().style.width=val;
		this.properties.Width=val;
		this.render();
	},
	setHeight : function(val){
		this.getBaseElement().style.height=val;
		this.properties.Height=val;
		this.render();
	},
	setBottom : function(val){
		this.getBaseElement().style.bottom=val;
		this.properties.Bottom=val;
		this.render();
	},
	setRight : function(val){
		this.getBaseElement().style.right=val;
		this.properties.Right=val;
		this.render();
	},
	setMinHeight : function(val){
		this.getBaseElement().style.minHeight=val;
		this.properties.MinHeight=val;
	},
	setMinWidth : function(val){
		this.getBaseElement().style.minWidth=val;
		this.properties.MinHeight=val;
	},
	setOverflow : function(val){
		this.getBaseElement().style.overflow=val;
		this.properties.Overflow=val;
	},
	setTabIndex : function(val){
		this.getBaseElement().tabIndex=val;
		this.properties.TabIndex=val;
	},
	setMarginTop : function(val){
		this.getBaseElement().style.marginTop=val;
		this.properties.MarginTop=val;
		this.render();
	},
	setMarginLeft : function(val){
		this.getBaseElement().style.marginLeft=val;
		this.properties.MarginLeft=val;
		this.render();
	},
	setsrc : function(val){
		this.getBaseElement().tabIndex=val;
		this.properties.TabIndex=val;
	},
	getClientWidth : function(){
		return this.getBaseElement().clientWidth;
	},
	getClientHeight : function(){
		return this.getBaseElement().clientHeight;
	},
	render: function(){
		this.fire('render');
		window.i++;
	}
});