/**
 * @author Anders Mattson, Creative District
 * 
 * jQuery UI Button
 * 
 * Description:
 * 	Turns any link into a cross-browser button-like object. If the href attribute of the link 
 * 	contains a hash (like '#content') and an element exists with that same id ('content'), 
 * 	the button will work as a toggle button, displaying the second element when clicked.
 * 
 * Usage:
 * 		$(".button").button();
 * 
 * 		$("#button").button({
 * 			size: 'small'
 * 			alignContent: 'right'
 * 		});
 */
(function( $ ) {
	
	$.button = {
		hideAll: function(){

			$('.ui-button-active').each(function(){
				$(this).removeClass('ui-button-active');
				$(this).addClass('ui-button-default');
			});

			if($('#ui-button-content-inner').children().data( 'ui-button' )){
				$( '.ui-button-content-holder', $('#ui-button-content-inner').children().data( 'ui-button' ) ).append( $('#ui-button-content-inner').children() );
			}

			$('.ui-button-content').hide();
		},
		position: function(alignTo, alignContent){
			$content = $( '.ui-button-content' );
			
			var offset = $( alignTo ).offset();
			
			var left = offset.left + ( alignContent == 'right' ? $( alignTo ).width() - $content.width() : 0 );
			
			if ( alignContent == 'right' && left < 0 )
				left = offset.left;
			
			$content.css({
				top: offset.top + $( alignTo ).height() + 3,
				left: left
			});
				
			
		},
		initialized: false,
		contentTarget: 'body'
	};
	
	$.fn.button = function( opt ) {
		
		var options = $.extend( {}, {
			align: 			'',
			alignContent:	'left',
			event:			'click',
			size:			'normal',
			fn: 			jQuery.isFunction( opt ) ? opt : null
		}, jQuery.isFunction( opt ) ? {} : opt );

/*		
		var align = '-all';
		align = options.align ? ( options.align == 'center' ? '' : '-' + options.align ) : '-all';
*/		
		// Initialize the holder if it doesn't already exist
		if ( !$( '#ui-button-content-inner' ).length ) {
			$( '<div></div>' ).addClass( 'ui-button-content' ).append( $( '<div></div>' ).attr( 'id', 'ui-button-content-inner' ) ).appendTo( $.button.contentTarget );
		}
		
		if( !$.button.initialized ) {
			$( document ).click( function( e ) {
				$.button.hideAll();
			});
			$.button.initialized = true;
		}
		
		$( this ).each( function() {
			
			var $$ = $( this );
			
			if( $$.is( '.ui-button' ) || !$$.is( 'a' ) ) return true;
			
			$$.addClass( 'ui-button' );
			if( options.size == 'small' ) $$.addClass( 'ui-button-small' );
			
			var _text = $$.text();

			$$.children().remove().end().html( '' )
						.append( $( '<span></span>' ).addClass( 'ui-button-sides ui-button-inner' ).html( _text ) )
						.append( $( '<span></span>' ).addClass( 'ui-button-bg ui-button-inner' ).html( _text ) )
						.append( $( '<span></span>' ).addClass( 'ui-button-text ui-button-inner' ).html( _text ) )
						.append( $( '<div></div>' ).addClass( 'ui-button-content-holder' ) );

			if ( options.fn )
				$$.click( options.fn );
			
			$$.hover( function(){
				$( this ).addClass( 'ui-button-hover' );
			},function(){
				$( this ).removeClass( 'ui-button-hover' );
			});
			
			var hash = $$.attr( 'href' );
			if( hash && !$.support.hrefNormalized ) {
				var _hash = hash.split( '#' );
				_hash.shift();
				hash = '#' + _hash.join( '#' );
			}
			
			if( hash && hash != '#' && hash.indexOf( '#' ) === 0 && $( hash ).length ) {

				$( hash ).data( 'ui-button', $( this ) );

				if ( $( hash ).is( '.ui-button-content' ) )
					return;

				$( '.ui-button-text', this ).append( '<span class="ui-icon ui-icon-triangle-1-s"></span>' );
				$$.addClass( 'ui-button-icon-right' );

				// Need to set this first to be able to get the proper width for alignContent = 'right'.
				// TODO: find some way of checking if the current width was set or calculated from a percentage or other.
				if ( options.contentWidth ) {
					$( hash ).css({
						width: options.contentWidth
					});
				}

				$( '.ui-button-content-holder', this ).append( $( hash ) );

				var trigger = function() {

					if( $( this ).is( '.ui-button-active' ) ) {

						$( '.ui-button-content-holder', this ).append( $( '#ui-button-content-inner' ).children() );

						$( '.ui-button-content' ).hide();
						$( this ).removeClass( 'ui-button-active' );
						$( this ).addClass( 'ui-button-default' );

						return false;
					}

					if ( options.event == 'click' ) {
						jQuery.button.hideAll();
					}

					$( '#ui-button-content-inner' ).append( $( '.ui-button-content-holder', this ).children() );
					$.button.position( this, options.alignContent );

					$( '.ui-button-content' ).show();
					$( this ).addClass( 'ui-button-active' );
					$( this ).removeClass( 'ui-button-default' );

					return false;
				};
				
				if ( options.event == 'mouseover' ) {
					$$.hover( trigger, function() {
						jQuery.button.hideAll();
					});
				}
				else
					$$.bind( options.event, trigger );

			}
		});
		return this;
	};
	
	$.fn.iconButton = function(icon, fn){
		this.addClass("ui-state-default ui-corner-all ui-icon-button");
		var title = this.text();
		this.empty().append($('<span></span>').addClass("ui-icon ui-icon-"+icon).attr('title', title)).hover(function(){
			$(this).addClass('ui-state-hover');
		},function(){
			$(this).removeClass('ui-state-hover');
		});
		
		if(fn) this.click(fn);
		
		return this;
	}
	
	$.fn.buttongroup = function(opt){
		var options = $.extend( {}, {
			fn: jQuery.isFunction( opt ) ? opt : null
		}, jQuery.isFunction( opt ) ? {} : opt );
		
		$( this ).addClass( 'ui-buttongroup' );
		
		$( this ).each( function( i, n ) {
			if ( !$( this ).is( 'ul' ) )
				return;

			$( "li" ,this ).each( function( j, m ) {
				var opt = {
					align: $( this ).is( ':first-child' ) ? 'left' : $( this ).is( ':last-child' ) ? 'right' : 'center'
				};
				$( 'a',this ).button( opt );
				$( 'a', this ).click( function( e ) {
					if ( !$( this ).is( '.ui-button-toggle.ui-button-active' ) )
						jQuery.button.hideAll();

					$( this ).parent().parent().triggerHandler( 'click', [ j ] );
					return false;
				});
			});
		});
		
		if( options.fn )
			$(this).click(options.fn);
	};
})(jQuery);