/**
 * Slide Box : a jQuery Plug-in
 * 
 * Re-written by: Brian Litzinger
 * Added callbacks, and other options for easier customization, and better DOM insertion
 * 
 * Originally written by:
 * Samuel Garneau <samgarneau@gmail.com>
 * http://samgarneau.com
 */


// @TODO make all assigned classes settings.

jQuery.fn.slideBox = function(options)
{
	var hideTimeout = false;
	var settings = {
		width: "100%",
		height: "200px",
		position: "bottom",	// Possible values : "top", "bottom"
		textOpen: "Open",
		textClose: "Close",
		startPosition: "open",
		speed: 1000,
		closeDelay: false,
		onOpenClick: false,
		onOpenComplete: false,
		onCloseClick: false,
		onCloseComplete: false,
		hideTimeout: false,
		easing: false, // if you have the jQuery easing plugin loaded, you can define a custom easing
		panelContentToAnimate: false, // if you want to animate/collapse only an inner part of the panel, define it here, otherwise the entire panel collapses
		ie6Compatibility: false
	}
	
	if(options) {
        jQuery.extend(settings, options);
    };
			
	this.each(function()
	{
		// If you have trouble with the animation in IE 6, setting compatibility to 
		// true basically shows/hides the box, instead of animating it.
		if(settings.ie6Compatibilty)
		{
			settings.speed = 1;
		}
		
		var panel = $(this);
		
		var innerWrapper = panel.attr('class');
		innerWrapper = innerWrapper +'_inner_wrapper';

		panel.addClass(settings.position)
			.css({width: settings.width, left: 0})
			.wrapInner('<div class="'+ innerWrapper +'"></div>');

		var panelContent = panel.find('.'+innerWrapper);
		var panelContentToAnimate = settings.panelContentToAnimate ? panelContent.find(settings.panelContentToAnimate) : panelContent;
		
		// adding buttons
		if(settings.startPosition === 'closed') {
			panel.append('<div class="slide_button">'+ settings.textOpen +'</div>');
			panel.append('<div style="display: none" id="close_button" class="slide_button">'+ settings.textClose +'</div>');
	
			panelContentToAnimate.hide();
	
			if(settings.onCloseComplete){
				settings.onCloseComplete();
			}
		} else {
			panel.append('<div style="display: none" class="slide_button">'+ settings.textOpen +'</div>');
			panel.append('<div id="close_button" class="slide_button">'+ settings.textClose +'</div>');
	
			if(settings.onOpenComplete){
				settings.onOpenComplete();
			}
		}
		
		panel.show();

		// Buttons action
		panel.find('.slide_button').click(function(){
			if($(this).attr("id") == "close_button") {
				actions.closePanel();
			} else {
				actions.openPanel();
			}
	
			panel.find('.slide_button').toggle();
		});

		if(settings.closeDelay && settings.startPosition == 'open')
		{
			hideTimeout = setTimeout({
				run: function() {
					actions.closePanel();
					panel.find('.slide_button').toggle();
				}
			}.run, settings.closeDelay);
		}
		
		// Utility Button - A single clickable item to also open or close the banner.
		panel.find('.utility_button').addClass(settings.startPosition).click(function(){
			actions.utilityButtonToggle();	
			panel.find('.slide_button').toggle();
		});
		
		var actions = {
			
			utilityButtonToggle: function()
			{
				var button = panel.find('.utility_button');
				
				if(button)
				{
					if(button.hasClass('open'))
					{
						button.addClass('closed');
						button.removeClass('open');
						this.closePanel();
					}
					else
					{
						button.addClass('open');
						button.removeClass('closed');
						this.openPanel();
					}
				}
			},

			closePanel: function()
			{
				if(settings.onCloseClick){
					settings.onCloseClick();
				}

				panelContentToAnimate.animate({height: "0px"}, settings.speed, settings.easing, function(){
					// hide the content div when the animation is complete
					$(this).hide();
	
					if(settings.onCloseComplete){
						settings.onCloseComplete();
					}
				});
			},

			openPanel: function()
			{
				// set the height to 0 or else the animation messes up.
				panelContentToAnimate.show().css('height', '0');
	
				if(settings.onOpenClick){
					settings.onOpenClick();
				}
	
				panelContentToAnimate.animate({height: settings.height}, settings.speed, settings.easing, function(){
					if(settings.onOpenComplete){
						settings.onOpenComplete();
					}
				});
			}
		}	
	});
}