var Button = new Class({
	//Attributes
	el 		: Class.empty,
	options : {
		active		:	true,
		visibility	:	'visible', 
		selected	:	false
	},				
	//Methods
	initialize		:	function(el, options){
		this.setButton(el);
		this.setOptions(options);
		this.getButton().setStyle('cursor', 'pointer');
		this.getButton().addEvents({
										'mouseenter'	:  this.onRollOver.bind(this),
										'click'			:  this.onRelease.bind(this),
										'mouseleave'	:  this.onRollOut.bind(this)
								  });
	},
	
	getButton		:	function(){
		return this.el;
	},
	
	setButton	:	function(el){
		this.el = el;
	}, 	
	
	onRollOut		:	function(){
	},
	
	onRollOver		:	function(){
	},
	
	onRelease		:	function(){
	},
	
	active			: 	function(){
		return this.options.active;
	},
	
	visible			:	function(){
		if(this.el.getStyle('visibility')=='hidden') return false;
		return true;
	},
	
	selected		:	function(){
		return this.options.selected
	}
	
});
Button.implement(new Options);

/*////////////////////////////////////////////////////////////////////////////////

	
				
////////////////////////////////////////////////////////////////////////////////*/

var ButtonIMG = Button.extend({
	
	options	:{
		src			:	'',
		srcOver		:	'',
		srcOut		:	'',
		srcRelease	:	''
	},
		
	initialize		:	function(el, options){
		this.parent(el, options);
		this.setOptions(options);
		
		if(this.options.src=='') this.options.src = this.getButton().getProperty('src');
		if(this.options.srcOver=='') this.options.srcOver = this.getButton().getProperty('src');
		if(this.options.srcOut=='') this.options.srcOut = this.getButton().getProperty('src');
		if(this.options.srcRelease=='') this.options.srcRelease = this.getButton().getProperty('src');
		
		this.getButton()
		.addEvent('changeImg', function(src){
				this.setProperty('src', src);
		});//End add event
	},
	
	onRollOver		:	function(){
		if(this.active()){
			this.getButton().fireEvent('changeImg', this.options.srcOver);
		}
	},
	onRollOut		:	function(){
		if(this.active()){
			this.getButton().fireEvent('changeImg', this.options.srcOut);
		}
	},	
	onRelease		:	function(){
		if(this.active()){
			this.getButton().fireEvent('changeImg', this.options.srcRelease);
		}
	}
}); 

/*////////////////////////////////////////////////////////////////////////////////

	
				
////////////////////////////////////////////////////////////////////////////////*/

var ButtonCSS = Button.extend({
	
	options	:{
		css			:	'',
		cssOver		:	'',
		cssOut		:	'',
		cssRelease	:	'',
		stylesOver		:	'',
		stylesOut		:	'',
		stylesRelease	:	'',
		onlyCSS		:	false,
		onlyStyles	:	false
	},
		
	initialize		:	function(el, options){
		this.parent(el, options);
		this.setOptions(options);
		
		if(this.options.css=='') this.options.css = this.getButton().getProperty('class');
		if(this.options.cssOver=='') this.options.cssOver = this.getButton().getProperty('class');
		if(this.options.cssOut=='') this.options.cssOut = this.getButton().getProperty('class');
		if(this.options.cssRelease=='') this.options.cssRelease = this.getButton().getProperty('class');
		
		if(this.options.stylesOver=='') this.options.stylesOver = this.getButton().getStyles();
		if(this.options.stylesOut=='') this.options.stylesOut = this.getButton().getStyles();
		if(this.options.stylesRelease=='') this.options.stylesRelease = this.getButton().getStyles();
		
		this.getButton()
		.addEvents({
					'changeCSS' : function(css){
									this.setProperty('class', css);
									},
					'changeStyles' : function(styles){
									this.setStyles(styles);
									}
				});//End add event
	},
	
	onRollOver		:	function(){
		if(this.active()){
			if(!this.selected())
			this.getButton().fireEvent('changeCSS', this.options.cssOver);
		}
	},
	onRollOut		:	function(){
		if(this.active()){
			if(!this.selected())
				this.getButton().fireEvent('changeCSS', this.options.cssOut);
		}
	},	
	onRelease		:	function(){
		if(this.active()){
			
			if(!this.options.onlyCSS && !this.options.onlyStyles){
					this.getButton().fireEvent('changeCSS', this.options.cssRelease);
					this.getButton().fireEvent('changeStyles', this.options.stylesRelease);
			}
			
			if(this.options.onlyCSS){
						this.getButton().fireEvent('changeCSS', this.options.cssRelease);
			}
				
			if(this.options.onlyStyles){
						this.getButton().fireEvent('changeStyles', this.options.stylesRelease);
			}
			this.options.active = false;
			this.options.selected = true;
		}
	}
});