/**
 * @author Chris Lambe
 * 
 * UI Block
 * 
 * UI Block is intended to be a generic-use UI
 * element that can serve a content container
 * or button.
 * 
 * It utilizes the jQuery library, so make sure
 * that's loaded before loading this library.
 * 
 */

/*
Ex. UIB

<div class="uib swap" href="#">
	<div class="top"><div class="tl on"><div class="tr on"><div class="tc on"></div></div></div></div>
	<div class="middle">
		<div class="ml on">
			<div class="mr on">
				<div class="mc on">
				</div>
			</div>
		</div>
	</div>
	<div class="bottom"><div class="bl on"><div class="br on"><div class="bc on"></div></div></div></div>
</div>

*/

var UIB = {
	NAME:"UIB",
	init:function() {
		$(".uib.swap").hover(UIB.uibHoverHandler,UIB.uibHoverHandler);
		$(".uib .show_hide_link").click(UIB.showHideEventHandler);
	},
	showHideEventHandler:function(e) {
		var hideShowLink = $(this);
		var targetExpandable = hideShowLink.parents(':eq(1)').children('.expandable:first');
		targetExpandable.slideToggle("normal",function() {
			hideShowLink.html($(this).is(":hidden") ? "Show" : "Hide");
			$('#content').children('.uib').css({display:'block'});
		});
	},
	uibHoverHandler:function(e) {
		switch(e.type) {
			case 'mouseenter':
				UIB.swap(this,'on');
				break;
			case 'mouseleave':
				UIB.swap(this,'off');
				break;
		}
	},
	getNewUIB:function(options) {
		var content		= (typeof options.content) != 'undefined' ? options.content : '&nbsp;';
		var isButton	= (typeof options.isButton) != 'undefined' ? options.isButton : false;
		var theme		= (typeof options.theme) != 'undefined' ? options.theme : 'off';
		var blockClass	= (typeof options.blockClass) != 'undefined' ? options.blockClass : '';
		var centerClass	= (typeof options.centerClass) != 'undefined' ? options.centerClass : '';
		var blockCss	= (typeof options.blockCss) != 'undefined' ? options.blockCss : new Array();
		var centerCss	= (typeof options.centerCss) != 'undefined' ? options.centerCss : new Array();
		var attributes	= (typeof options.attributes) != 'undefined' ? options.attributes : new Array();
		var url			= (typeof options.url) != 'undefined' ? options.url : null;
		
		var attrString = '';
		for(var key in attributes) attrString += ' ' + key + '=\'' + attributes[key] + '\'';
		
		var blockCssString = '';
		for(var key in blockCss) blockCssString += ' ' + key + ':' + blockCss[key] + ';';
		
		var centerCssString = '';
		for(var key in centerCss) centerCssString += ' ' + key + ':' + centerCss[key] + ';';
		if(Registry._debug) console.log(centerCssString);		
		
		var tag = (url == null) ? 'div' : 'a';
		
		var newBlockClass = isButton && theme.match(/off/) ? 'uib swap' : 'uib';
		newBlockClass += ' ' + blockClass;
		
		if(isButton)
			blockCssString += "cursor:pointer;";
		
		var urlString = url != null ? 'href="' + url + '"' : '';
			
		var htmlString = '<' + tag + attrString + ' class="' + newBlockClass + '" ' + urlString + ' style="' + blockCssString + '">'
		+ '<div class="top"><div class="tl ' + theme + '"><div class="tr ' + theme + '"><div class="tc ' + theme + '"></div></div></div></div>'
		+ '<div class="middle">'
		+ '<div class="ml ' + theme + '">'
		+ '<div class="mr ' + theme + '">'
		+ '<div class="mc ' + theme + ' ' + centerClass + '" style="' + centerCssString + '">'
		+ content
		+ '</div>'
		+ '</div>'
		+ '</div>'
		+ '</div>'
		+ '<div class="bottom"><div class="bl ' + theme + '"><div class="br ' + theme + '"><div class="bc ' + theme + '"></div></div></div></div>'
		+ '</' + tag + '>';
		
		return htmlString;
		//if(Registry._debug) console.log(htmlString);
		
		/*
		var elementObj = isButton ? $('<a></a>').attr('href',url) : $('<div></div>');
		var classStr = 'uib';
		if(isButton && defaultState == "off") classStr += ' swap';
		
		var uibOutput = $(elementObj.addClass(classStr));
		uibOutput.append('' +
			'<div class="top"><div class="tl ' + defaultState + '"><div class="tr ' + defaultState + '"><div class="tc ' + defaultState + '"></div></div></div></div>' +
			'<div class="middle">' +
			'<div class="ml ' + defaultState + '">' +
			'<div class="mr ' + defaultState + '">' +
			'<div class="mc ' + defaultState + '">' +
			'</div>' +
			'</div>' +
			'</div>' +
			'</div>' +
			'<div class="bottom"><div class="bl ' + defaultState + '"><div class="br ' + defaultState + '"><div class="bc ' + defaultState + '"></div></div></div></div>'
		);
		
		uibOutput.setContent = function(contentObj) {
			this.find('.mc').html(contentObj);
			return this;
		};
		
		uibOutput.getCenter = function() {
			return this.find('.mc');
		}
		
		return uibOutput;*/
	},
	/*
	getNewUIB:function(defaultState,isButton,url) {
		if(defaultState != 'on' && defaultState != 'off') defaultState = "off";
		if(isButton != false && isButton != true) isButton = false;
		if(typeof url != 'string') url = '#';
		
		var elementObj = isButton ? $('<a></a>').attr('href',url) : $('<div></div>');
		var classStr = 'uib';
		if(isButton && defaultState == "off") classStr += ' swap';
		
		var uibOutput = $(elementObj.addClass(classStr));
		uibOutput.append('' +
			'<div class="top"><div class="tl ' + defaultState + '"><div class="tr ' + defaultState + '"><div class="tc ' + defaultState + '"></div></div></div></div>' +
			'<div class="middle">' +
			'<div class="ml ' + defaultState + '">' +
			'<div class="mr ' + defaultState + '">' +
			'<div class="mc ' + defaultState + '">' +
			'</div>' +
			'</div>' +
			'</div>' +
			'</div>' +
			'<div class="bottom"><div class="bl ' + defaultState + '"><div class="br ' + defaultState + '"><div class="bc ' + defaultState + '"></div></div></div></div>'
		);
		
		uibOutput.setContent = function(contentObj) {
			this.find('.mc').html(contentObj);
			return this;
		};
		
		uibOutput.getCenter = function() {
			return this.find('.mc');
		}
		
		return uibOutput;
	},*/
	setSwappable:function(target) {
		$(target).unbind('mouseenter mouseleave',UIB.uibHoverHandler);
		$(target).hover(UIB.uibHoverHandler,UIB.uibHoverHandler);
	},
	unsetSwappable:function(target) {
		$(target).unbind('mouseenter mouseleave',UIB.uibHoverHandler);
	},
	swap:function(target,force) {
		var turnOff = $(target).find(".top .on").length > 0;
		switch(force) {
			case "on":
				turnOff = false;
				break;
			case "off":
				turnOff = true;
				break;
		}
		
		if(turnOff) {
			$top = $(target).children(".top");
			$middle = $(target).children(".middle");
			$bottom = $(target).children(".bottom");
			
			$top.find(".on").removeClass("on").addClass("off");
			$middle.children().removeClass("on")
							  .addClass("off")
							  .children().removeClass("on")
							  			 .addClass("off")
										 .children().removeClass("on")
										 			.addClass("off");
			$bottom.find(".on").removeClass("on").addClass("off");
		} else {
			$top = $(target).children(".top");
			$middle = $(target).children(".middle");
			$bottom = $(target).children(".bottom");
			
			$top.find(".off").removeClass("off").addClass("on");
			$middle.children().removeClass("off")
							  .addClass("on")
							  .children().removeClass("off")
							  			 .addClass("on")
										 .children().removeClass("off")
										 			.addClass("on");
			$bottom.find(".off").removeClass("off").addClass("on");
		}
	}
}

Registry.add(UIB);