/* Copyright (c) 2009 Swizec Teller (swizec AT swizec DOT com || http://www.swizec.com)
 * Dual licensed under the MIT (http://www.opensource.org/licenses/mit-license.php)
 * and GPL (http://www.opensource.org/licenses/gpl-license.php) licenses.
 *
 * See http://swizec.com/code/styledButton/
 */

(function($) {
	$.fn.styledButton = function ( params )
	{
		return $(this).each( function ()
		{
			var tempParams = $.extend( {}, params );
			var button = new styledButton( $(this), tempParams );
		} );
	}
	
	function styledButton( element, params )
	{
		this.element = element;
		this.oldFirefox = ( $.browser.mozilla && parseFloat( $.browser.version ) < 1.9 );
		this.safari3 = ( $.browser.safari && parseFloat( $.browser.version ) < 526 ) ? true : false;
		this.inlineBlock = ( this.oldFirefox ) ? '-moz-inline-block' : 'inline-block';
		this.inParams = params;
		this.params = this.setupDefaultParams( params );
	
		if ( !this.element.hasClass( this.params.cssClass ) )
		{
			this.info = this.init();
			this.bordersAndBackground();
			this.setupRole();
		}
	}
	
	styledButton.prototype.setupDefaultParams = function ( params )
	{
		if ( typeof( params ) == "undefined" )
		{
			params = {};
		}
		if ( typeof( params.orientation ) == "undefined" )
		{
			params.orientation = 'alone';
		}
		if ( typeof( params.action ) == "undefined" )
		{
			params.action = function () {};
			params.onclick = function () {};
		}else
		{
			params.onclick = params.action;
		}
		if ( typeof( params.cssClass ) == "undefined" )
		{
			params.cssClass = "button";
		}
		if ( typeof( params.role ) == "undefined" )
		{
			params.role = 'button';
		}
		if ( typeof( params.defaultValue ) == "undefined" )
		{
			params.defaultValue = '';
		}
		if ( params.role == "checkbox" )
		{
			if ( typeof( params.checkboxValue ) != "object" )
			{
				if ( params.defaultValue != '' )
				{
					var tmp = params.defaultValue;
				}else
				{
					var tmp = 'on';
				}
				params.checkboxValue = {};
				params.checkboxValue.on = tmp;
				params.checkboxValue.off = 'off';
			}
			if ( typeof( params.checked ) == "undefined" )
			{
				params.defaultValue = params.checkboxValue.off;
				params.checked = false;
			}else
			{
				params.checked = true;
				params.defaultValue = params.checkboxValue.on;
			}
			params.toggle = true;
			params.action = {};
			params.action.on = function ( calledOn ) { $(calledOn).styledButtonSetValue( params.checkboxValue.on ) };
			params.action.off = function ( calledOn ) { $(calledOn).styledButtonSetValue( params.checkboxValue.off ) };
		}
		if ( params.toggle )
		{
			if ( typeof( params.action ) != "object" )
			{
				var tmp = params.action;
				params.action = {};
				params.action.on = tmp;
				params.action.off = tmp;
			}
	
	
			params.onclick = {};
			params.onclick.on = function ( event ) {
							$(this).styledButtonActivate( event );
							params.action.on( $(this) )
						};
			params.onclick.off = function ( event ) {
							$(this).styledButtonDeactivate( event );
							params.action.off( $(this) )
						};
		}
		if ( typeof( params.dropdown ) == "undefined" )
		{
			params.hasDropdown = false;
			params.dropdown = {};
		}else
		{
			params.hasDropdown = true;
			if ( typeof( params.dropdown ) != 'object' )
			{
				params.dropdown = {};
			}
			if ( typeof( params.dropdown.element ) == "undefined" )
			{
				params.dropdown.element = 'ul';
			}
			if ( typeof( params.action ) != "object" )
			{
				var tmp = params.action;
				params.action = {};
				params.action.on = tmp;
				params.action.off = tmp;
			}
	
			params.toggle = true;
			params.onclick = {};
			params.onclick.on = function ( event ) {
							$(this).styledButtonActivate();
							$(this).styledButtonDropDownActivate();
						};
			params.onclick.off = function ( event ) {
							$(this).styledButtonDeactivate();
							$(this).styledButtonDropDownDeactivate();
						};
		}
		if ( typeof( params.display ) == "undefined" )
		{
			params.display = this.inlineBlock;
		}
		if ( typeof( params.border ) == "undefined" )
		{
			params.border = 1;
		}
	
		return params;
	}
	
	styledButton.prototype.init = function ( )
	{
		var element = this.element;
		var params = this.params;
	
		if ( !$(this).is( '.'+params.cssClass ) )
		{
			element.addClass( params.cssClass );
		}
		element.addClass( "parent" );
		element.val( params.defaultValue );
	
		// this is here because otherwise sizes get calculated wrongly
		if ( params.hasDropdown )
		{
			this.hideDropdown();
		}
	
		var oldContent = element.html();
		var width = element.outerWidth();
		var height = element.outerHeight();
		var padding = {
				top: (element.outerHeight()-element.height())/2,
				left: (element.outerWidth()-element.width())/2
			}
		var innerLeft = 0;
	
		if ( this.safari3 )
		{
			innerLeft = -4;
		}else if ( $.browser.safari && params.hasDropdown )
		{
			if ( params.hasDropdown )
			{
				width += padding.left;
			}
		}
	
		if ( $.browser.msie )
		{
			if ( params.orientation == 'right' || params.orientation == 'center' )
			{
				innerLeft = -1;
			}
			if ( params.hasDropdown )
			{
				height -= 1;
			}
		}
	
		element.wrapInner( $('<span></span>').css({
								'padding' : padding.top+'px 0px '+padding.top+'px '+padding.left+'px',
								'margin' : 0,
								'z-index' : 1,
								'position' : 'absolute',
								'left' : innerLeft+'px',
								'display' : this.inlineBlock,
								'-moz-user-select' : 'none'
							})
			 			);
	
		var widthDelta = 0;
		if ( this.oldFirefox && params.orientation == 'right' )
		{
			widthDelta = 4;
		}
	
		element.css( {
			'cursor' : 'pointer',
			'padding-right': 0,
			'margin-left' : '-1px',
			'display' : params.display,
			'width' : width-padding.left+1+widthDelta
		} )
		.hover( function () {
				if ( !$(this).hasClass( 'hover' ) )
				{
					$(this).addClass( 'hover' );
					$(this).contents().styledButtonHover();
				}
			},
			function () {
				$(this).removeClass( 'hover' );
				$(this).removeClass( 'down' );
				$(this).contents().styledButtonUnhover();
			})
		.mousedown( function () {
				if ( !$(this).hasClass( 'down' ) )
				{
					$(this).addClass( 'down' );
					$(this).contents().styledButtonMouseDown();
				}
			})
		.mouseup( function () {
				$(this).removeClass( 'down' );
				$(this).contents().styledButtonMouseUp();
			});
	
		if ( this.oldFirefox && params.display != 'block' )
		{
			element.css({
				'float' : 'left',
				'clear' : ( params.clear ) ? params.orientation : 'none',
				'margin-top' : ( params.clear ) ? '1em' : 0
			});
		}
	
		if ( !params.toggle )
		{
			element.click( params.onclick );
		}else
		{
			if ( params.checked )
			{
				element.toggle( params.onclick.off, params.onclick.on );
			}else
			{
				element.toggle( params.onclick.on, params.onclick.off );
			}
		}
	
		var info = { 'oldContent' : oldContent, 'width' : width, 'height' : height, 'padding' : padding, 'border' : params.border };
	
		return info;
	}
	
	styledButton.prototype.bordersAndBackground = function ()
	{
		var element = this.element;
		var params = this.params;
		var info = this.info;
	
		info.sizeDelta = 0;
		if ( $.browser.msie )
		{
			info.sizeDelta = info.border*2;
		}
	
		if ( params.orientation == 'left' )
		{
			this.background( {
					'width' : (info.width-info.border),
					'height' : info.height,
					'border' : info.border,
					'sizeDelta' : info.sizeDelta
				});
			this.bordersLeft( info );
		}else if ( params.orientation == 'center' )
		{
			this.background( {
					'width' : (info.width-info.border*2),
					'height' : info.height,
					'marginLeft' : info.border,
					'border' : info.border,
					'sizeDelta' : info.sizeDelta
				});
			this.bordersCenter( info );
		}else if ( params.orientation == 'right' )
		{
			this.background( {
					'width' : (info.width-info.border),
					'height' : info.height,
					'marginLeft' : info.border,
					'border' : info.border,
					'sizeDelta' : info.sizeDelta
				});
			this.bordersRight( info );
		}else if ( params.orientation == 'alone' )
		{
			this.background( info );
			this.bordersAlone( info );
		}
	}
	
	styledButton.prototype.background = function ( info )
	{
		var element = this.element;
		var marginLeft = ( typeof( info.marginLeft ) != "undefined" ) ? info.marginLeft : 0;
	
		element.append( $('<span></span>').css({
								'width' : info.width,
								'height' : info.height,
								'z-index' : 0,
								'position' : 'absolute',
								'display' : this.inlineBlock,
								'margin-left' : marginLeft,
								'padding' : 0
							})
							.attr( 'class', 'background main' )
						);
		element.append( $('<span></span>').css({
								'width' : info.width,
								'height' : Math.floor( 4*info.height/10 )-info.sizeDelta,
								'font-size' : Math.floor( 4*info.height/10 )-info.sizeDelta,
								'z-index' : 0,
								'position' : 'absolute',
								'top' : 0,
								'display' : this.inlineBlock,
								'margin-left' : marginLeft
							})
							.attr( 'class', 'background top' )
						);
		element.append( $('<span></span>').css({
								'width' : info.width,
								'height' : Math.floor( 5*info.height/10 )-info.sizeDelta,
								'font-size' : Math.floor( 5*info.height/10 )-info.sizeDelta,
								'z-index' : 0,
								'position' : 'absolute',
								'bottom' : 0,
								'margin-top' : Math.floor( 5*info.height/10 )-info.sizeDelta,
								'margin-left' : marginLeft,
								'display' : this.inlineBlock
							})
							.attr( 'class', 'background bottom' )
						);
	}
	
	styledButton.prototype.bordersAlone = function ( info )
	{
		var element = this.element;
	
		element.wrapInner( $('<span></span>').css({
								'width' : info.width,
								'height' : info.height+info.sizeDelta,
								'margin' : (-info.border)+'px 0 0 0',
								'display' : this.inlineBlock,
								'position' : 'absolute',
								'background' : 0,
								'border-left' : '0px',
								'border-right' : '0px'
							})
							.attr( 'class', 'border top' )
						);
		element.wrapInner( $('<span></span>').css({
								'width' : info.width+info.sizeDelta,
								'height' : info.height,
								'margin' : (-info.padding.top+1)+'px 0px 0px '+(-info.padding.left)+'px',
								'display' : this.inlineBlock,
								'border-top' : '0px',
								'border-bottom' : '0px'
							})
							.attr( 'class', 'border side' )
						);
	}
	
	styledButton.prototype.bordersLeft = function ( info )
	{
		var element = this.element;
	
		element.wrapInner( $('<span></span>').css({
								'width' : info.width,
								'height' : info.height+info.sizeDelta,
								'margin' : (-info.border)+'px 0 0 0',
								'display' : this.inlineBlock,
								'position' : 'absolute',
								'background' : 0,
								'border-left' : '0px',
								'border-right' : '0px'
							})
							.attr( 'class', 'border top' )
						);
		element.wrapInner( $('<span></span>').css({
								'width' : info.width-info.border+info.sizeDelta,
								'height' : info.height,
								'margin' : (-info.padding.top+info.border)+'px 0px 0px '+(-info.padding.left)+'px',
								'display' : this.inlineBlock,
								'border-top' : '0px',
								'border-bottom' : '0px'
							})
							.attr( 'class', 'border side left' )
						);
	}
	
	styledButton.prototype.bordersCenter = function ( info )
	{
		var element = this.element;
	
		element.wrapInner( $('<span></span>').css({
								'width' : info.width,
								'height' : info.height+info.sizeDelta,
								'margin' : (-info.border)+'px 0 0 '+(-info.border)+'px',
								'display' : this.inlineBlock,
								'position' : 'absolute',
								'background' : 0,
								'border-left' : '0px',
								'border-right' : '0px'
							})
							.attr( 'class', 'border top' )
						);
		element.wrapInner( $('<span></span>').css({
								'width' : info.width-info.border*2+info.sizeDelta,
								'height' : info.height,
								'margin' : (-info.padding.top+info.border)+'px 0px 0px '+(-info.padding.left+info.border)+'px',
								'display' : this.inlineBlock,
								'border-top' : '0px',
								'border-bottom' : '0px'
							})
							.attr( 'class', 'border side center' )
						);
	}
	
	styledButton.prototype.bordersRight = function ( info )
	{
		var element = this.element;
	
		element.wrapInner( $('<span></span>').css({
								'width' : info.width,
								'height' : info.height+info.sizeDelta,
								'margin' : (-info.border)+'px 0 0 '+(-info.border)+'px',
								'display' : this.inlineBlock,
								'position' : 'absolute',
								'background' : 0,
								'border-left' : '0px',
								'border-right' : '0px'
							})
							.attr( 'class', 'border top' )
						);
		element.wrapInner( $('<span></span>').css({
								'width' : info.width-info.border+info.sizeDelta,
								'height' : info.height,
								'margin' : (-info.padding.top+info.border)+'px 0px 0px '+(-info.padding.left+info.border)+'px',
								'display' : this.inlineBlock,
								'border-top' : '0px',
								'border-bottom' : '0px'
							})
							.attr( 'class', 'border side right' )
						);
	}
	
	styledButton.prototype.hideDropdown = function ()
	{
		var element = this.element;
	
		while ( !element.is( this.params.dropdown.element ) && element.contents().size() > 0 )
		{
			element = element.contents();
		}
		if ( element.is( this.params.dropdown.element ) )
		{
			for ( var i = 0; i < element.size(); i += 1 )
			{
				if ( element.eq( i ).is( this.params.dropdown.element ) )
				{
					element.eq( i ).css({ "display" : "none" });
				}
			}
		}
	}
	
	styledButton.prototype.setupRole = function ()
	{
		var element = this.element;
		var params = this.params;
	
		element.attr( "role", params.role);
	
		if ( params.role != "button" )
		{
			element.append( '<input type="hidden" value="'+params.defaultValue+'" name="'+params.name+'"/>' );
		}
	
		if ( params.hasDropdown )
		{
			this.setupDropDown();
		}
		if ( params.role == "select" )
		{
			this.setupRoleSelect();
		}
		if ( params.role == "checkbox" && params.checked )
		{
			element.styledButtonActivate();
		}
	}
	
	styledButton.prototype.setupDropDown = function ()
	{
		var element = this.element;
		var params = this.params;
		var info = this.info;
	
		while ( !element.is( params.dropdown.element ) && element.contents().size() > 0 )
		{
			element = element.contents();
		}
	
		var marginDelta = -1;
		if ( this.safari3 )
		{
			marginDelta = 3;
		}
	
		var topDelta = 0;
		var widthDelta = -4;
		if ( $.browser.msie )
		{
			topDelta = info.padding.top*3+params.border;
			widthDelta = 1;
		}
	
		if ( element.is( params.dropdown.element ) )
		{
			for ( var i = 0; i < $(element).size(); i += 1 )
			{
				if ( element.eq( i ).is( this.params.dropdown.element ) )
				{
					element.eq( i ).addClass( "dropdown" )
					.css( {
						'display' : 'none',
						'position' : 'absolute',
						'left' : '0px',
						'margin' : (info.padding.top+topDelta)+'px 0px 0px '+marginDelta+'px',
						'width' : info.width+widthDelta,
						'padding-right' : 0,
						'z-index' : 3
					});
				}
			}
		}
	}
	
	styledButton.prototype.setupRoleSelect = function ()
	{
		var element = this.element;
		var params = this.params;
		var info = this.info;
	
		while ( !element.is( params.dropdown.element ) && element.contents().size() > 0 )
		{
			element = element.contents();
		}
	
		if ( element.is( params.dropdown.element ) )
		{
			for ( var i = 0; i < element.size(); i += 1 )
			{
				if ( element.eq( i ).is( this.params.dropdown.element ) )
				{
					element.eq( i ).children().click( function () {
							var value = $(this).attr( "value" );
							if ( typeof( value ) != "string" )
							{
								value = $(this).html();
							}
							$(this).styledButtonSetValue( value );
						} );
				}
			}
		}
	}
	
	//
	// behaviour functions
	//
	
	$.fn.styledButtonSetValue = function ( value )
	{
		var element = $(this);
	
		while ( !element.is( ".parent" ) && element.parent().size() > 0 )
		{
			element = element.parent();
		}
	
		$(element).val( value );
		if ( !$.browser.msie )
		{
			$(element).change();
		}
	
		while ( !element.is( "input" ) && element.contents().size() > 0 )
		{
			element = element.contents();
		}
	
		$(element).val( value )
	}
	
	$.fn.styledButtonHover = function ()
	{
		$(this).addClass( 'hover' );
	
		if ( $(this).children().size() > 0 )
		{
			$(this).children().styledButtonHover();
		}
	}
	
	$.fn.styledButtonUnhover = function ()
	{
		$(this).removeClass( 'hover' );
		$(this).removeClass( 'down' );
	
		if ( $(this).contents().size() > 0 )
		{
			$(this).contents().styledButtonUnhover();
		}
	}
	
	$.fn.styledButtonMouseDown = function ()
	{
		$(this).addClass( 'down' );
	
		if ( $(this).contents().size() > 0 )
		{
			$(this).contents().styledButtonMouseDown();
		}
	}
	
	$.fn.styledButtonMouseUp = function ()
	{
		$(this).removeClass( 'down' );
	
		if ( $(this).contents().size() > 0 )
		{
			$(this).contents().styledButtonMouseUp();
		}
	}
	
	$.fn.styledButtonActivate = function ()
	{
		$(this).addClass( 'active' );
	
		if ( $(this).contents().size() > 0 )
		{
			$(this).contents().styledButtonActivate();
		}
	}
	
	$.fn.styledButtonDeactivate = function ()
	{
		$(this).removeClass( 'active' );
	
		if ( $(this).contents().size() > 0 )
		{
			$(this).contents().styledButtonDeactivate();
		}
	}
	
	$.fn.styledButtonDropDownActivate = function ()
	{
		if ( !$(this).is( '.dropdown' ) )
		{
			$(this).children().styledButtonDropDownActivate();
		}else
		{
			for ( var i = 0; i < $(this).size(); i += 1 )
			{
				if ( $(this).eq( i ).is( ".dropdown" ) )
				{
					if ( $.browser.msie )
					{
						$(this).eq( i ).css( "display", "block" );
					}else
					{
						$(this).eq( i ).slideDown( 60 );
					}
				}
			}
		}
	}
	
	$.fn.styledButtonDropDownDeactivate = function ()
	{
		if ( !$(this).is( '.dropdown' ) )
		{
			$(this).contents().styledButtonDropDownDeactivate();
		}else
		{
			for ( var i = 0; i < $(this).size(); i += 1 )
			{
				if ( $(this).eq( i ).is( ".dropdown" ) )
				{
					if ( $.browser.msie )
					{
						$(this).eq( i ).css( "display", "none" );
					}else
					{
						$(this).eq( i ).slideUp( 20 );
					}
				}
			}
		}
	}
})(jQuery);