var DEFAULT_BUTTON = "default_button";
var CANCEL_BUTTON = "cancel_button";
var DISABLED_BUTTON = "disabled_button";

var PAGE_BUTTONS = new Hash();

var Button = Class.create({
	
	initialize: function(type, text, _parentObj, options ) {
		this.type = type;
		this.text = text;
		this.parentObj = _parentObj;
		this.options = options;
		
		this.disabled = type == DISABLED_BUTTON;
		if ( !options.disableRender ) {
			this.render();
			this.registerListeners();
		}
		if (this.options.id) PAGE_BUTTONS.set(this.options.id, this);
	},
	
	setButtonElement:function( elem ){
		this.button = elem;
		this.parentObj = elem.getOffsetParent();
		this.registerListeners();
	},
	
	render: function() {
		var p = "";
		var iconStyle = "";
		var id = "";
		if( this.options ){
			if ( !this.options.onclick) {
				this.click = function() {return;};
			} else {
				this.click = this.options.onclick;
			}
			if( this.options.padding ){
				p = 'style="padding:0px ' + this.options.padding + 'px"';
			}
			
			if( this.options.icon ){
				iconStyle = "<div class=\"icon icon-s " + this.options.icon + " button_icon\"></div>";
			}
			if (this.options.id) {
				id = ' id="' + this.options.id + '"';
			}
		}
		
		var innerContent = "";
		
		var centerText = "<div class=\"button_text\"";
		if ( this.options && this.options.icon) {
			if( this.options.iconPosition && this.options.iconPosition == "right" ) {
				centerText += " style=\"padding-right: 4px;\"";
			} else {
				centerText += " style=\"padding-left: 4px;\"";
			}
		}
		centerText += ">" + this.text + "</div>";
		
		if( this.options.iconPosition && this.options.iconPosition == "right" ){
			innerContent = centerText + iconStyle;
		} else {
			innerContent = iconStyle + centerText;
		}

		var floatStyle = "left";
		
		var marginStyle = "";
		if ( this.options.margin ) {
			marginStyle = "margin: " + this.options.margin;
		}
		
		if ( this.options && this.options.align ) {
			floatStyle = this.options.align;
		}
		
		this.brwap = new Element( 'div' );
		this.parentObj.appendChild( this.brwap );
		
		this.brwap.update( '<div onMouseOut="return clearStatus();" onMouseOver="return setStatus(\'' + this.text + '\');" class="tsButton ' + this.type + '" style="float: ' + floatStyle + ';' + marginStyle + '"' + id + '><div class="left"></div><div class="center" ' + p + '>' + innerContent + '</div><div class="right"></div></div>' );
		
		this.button = this.brwap.firstDescendant();
	},
	
	registerListeners: function() {
		this.button.observe( "mousedown", this.mousedown.bindAsEventListener( this ) );
		this.button.observe( "click", this.onclick.bindAsEventListener( this ) );
		
		this.eventManager = new tsEventManager();
		this.eventManager.watch( this.button, "mouseout", this.mouseout.bind( this ) );
		this.eventManager.watch( this.button, "mouseover", this.mouseOver.bind( this ) );
	},
	
	mousedown: function() {
		this.isMouseDown = true;
		this.mouseUpObserver = this.mouseup.bind( this );
		
		Event.observe( document, "mouseup", this.mouseUpObserver );
		
		if ( browser.isIE6x ) {
			this.button.removeClassName( this.type + "_hover" );
		} else {
			this.button.removeClassName( this.type );
		}
		this.button.addClassName( this.type + "_active" );
		
		
		disableEdit();
	},

	mouseup:function(){
		this.isMouseDown = false;
		Event.stopObserving( document, "mouseup", this.mouseUpObserver );
		
		enableEdit();
	},
	
	mouseout: function() {
		this.button.removeClassName( this.type + "_active" );
		this.button.removeClassName( this.type + "_hover" );
		this.button.addClassName( this.type );
	},
	 
	onclick:function(){
		this.button.removeClassName( this.type + "_active" );
		if ( browser.isIE6x ) {
			this.button.addClassName( this.type + "_hover" );
		} else {
			this.button.addClassName( this.type );
		}
		if( ! this.disabled && this.click ){
			this.click();
		}
	},
	
	mouseOver: function() {
		this.button.removeClassName( this.type );
		if( !this.isMouseDown ){
			this.button.addClassName( this.type + "_hover" );
		}else{
			this.button.addClassName( this.type + "_active" );
		}
	},
	
	getElement:function(){
		return this.brwap || $( this.options.id );
	},
	
	remove:function(){
		try {
			this.eventManager.clearAllListeners();
			if (this.brwap) this.brwap.remove();
		} catch (e) {}
	},
	
	disable: function() {
		if (this.disabled) return;
		this.disabled = true;
		this.button.removeClassName( this.type );
		
		this.originalType = this.type;
		this.type = DISABLED_BUTTON;
		this.button.addClassName( this.type );
	},
	
	enable: function() {
		if (!this.disabled) return;
		this.disabled = false;
		this.button.removeClassName( this.type );
		
		if( this.originalType && this.originalType != DISABLED_BUTTON ){
			this.type = this.originalType || DEFAULT_BUTTON; 
		} else {
			this.type = DEFAULT_BUTTON;
		}
		this.button.addClassName( this.type );
	},
	
	setText: function(text) {
		var innerText = this.button.down(".button_text");
		innerText.update(text);
	},
	
	show: function() {
		if (!this.button) return;
		this.button.show();
	},
	
	hide: function() {
		if (!this.button) return;
		this.button.hide();
	}
});

function setStatus( s ){
	self.status = s;
	return true;
}

function clearStatus(){
	window.status = '';
	return true;
}

function loadButtons() {
	var element = $( 'page_content' );
	if( !element ) element = $( 'body' );

	[ "default_button", "cancel_button", "disabled_button" ].each( function( button ){
		element.select( "div." + button ).each( function( b ) {
			addButton( button, b );
		});
	} );
}

function addButton( type, element ) {
	var id = element.id ? element.id : null;
	var b = new Button( type, '', null, {'disableRender':true, id: id} );
	b.setButtonElement( element );
	// b.disabled = false; // this button was rendered by the jsp, so it has already been rendered
}