/**
 * NVS_ALBUM 
 * 
 * @author		Sebastiaan Smid <sebastiaan@netvlies.nl>
 * 
 * Optional parameters:
 * @category		jQuery Plugin
 * @package			Netvlies Album
 * @version			1.0
 * @requires		nvs_popup.js, nvs_overlay.js, jquery-easing.js
 *
 */
 
 (function($) {
	
	/**
	* Shows the album in a popup on an overlay
	* Mixed object: 
	*		overlayBackground:		(string) css,
	*		overlayTransparancy: 	(decimal) between 0 and 1,
	*		overlaySpeed:			(int time) milliseconds,
	*		popUpBackground:		(string) css,
	*		imageBtnPrev:			(string) Path and the name of the prev button image,
	*		imageBtnNext:			(string) Path and the name of the next button image,
	*		imageBtnClose:			(string) Path and the name of the next button image,
	
	* @param 	Object	Mixed
	* 
	*/
	
	$.fn.nvsNiceForm = function(options) {
		var defaults = { 
		// defaultconfig
	  
			activeImage:			0,
			changeFunction: null
		}
	
		var options = $.extend(defaults, options);
		var jQueryMatchedObj = this; 
				
		function _initialize() {		
			_replace_selects();
		}
		
		function _replace_selects() {
			/*
			*	<div class="select_container">
			*		<div class="select_body"><span><a href="#" tabindex="2">Hele website</a></span><div class="btn"></div></div>
			*		<div class="flyout">
			*			<ul>	
			*				<li>Hele andere website</li>
			*				<li>Hele mooie website</li>							
			*				<li>Hele grote website</li>
			*			</ul>
			*		</div>
			*	</div>
			*/
			i = 100;
			
			$(jQueryMatchedObj).children("select").each(function(){
		
				cs = {zIndex :  10000 - i}
				tabind 			= $(this).attr("tabindex");
				id				= $(this).attr('id')
				selectedText 	= $(this).children("option:first").text();
				container 		= $('<div></div>').attr({ id: id+"_re" }).addClass("select_container").css(cs).insertBefore($(this));
				flyout			= $('<div></div>').addClass("flyout").appendTo($(container));
				list 			= $('<ul></ul>').appendTo($(flyout));
				hidden			= $('<input type="hidden"></input>').attr("name",$(this).attr('name')).attr("id",$(this).attr('id')).insertBefore($(container));
				
				if(!$(this).attr('id')) { 
					alert('Alle Selects moeten een uniek id attribuut hebben voor dit script!'); 
					return false;
				}
				
				$(this).children("option").each(function() {
					if($(this).attr("selected")){
						$("#"+id).val($(this).val());
					}
					
					$('<li></li>').attr({
										val: $(this).val(),
										selected: $(this).attr("selected")
									})
								.text($(this).text())
								.appendTo(list)
								.hover( function() {
										var obj = $(this).parent().parent().parent().attr('id');
										obj = obj.substr(0,(obj.length-3));
										$("#"+obj+"_re"+" .flyout ul li").removeClass("focus");									
										$(this).addClass("focus");
									})
								.click( function() {
									var obj = $(this).parent().parent().parent().attr('id');
									obj = obj.substr(0,(obj.length-3));
									$("#"+obj+"_re"+" .flyout li").attr("selected","false")
									$(this).attr("selected","true");
									$("#"+obj+"_re a.select_anchor").text($(this).text());
									$("#"+obj+"_re"+" .flyout").toggle();
									myVal = $("#"+obj+"_re"+" .flyout li[selected='true']").attr("val");
									$("#"+obj).val(myVal);
									$("#"+obj+"_re a.select_anchor").focus();
								//	options.changeFunction();
								});
					
					if($(this).attr("selected")) {
						selectedText = $(this).text();
					}
				 });
				
				selectfield 	= $('<div></div>').addClass("select_body").prependTo($(container))
				selectspan 		= $('<span></span>').appendTo($(selectfield));
				selectanchor	= $('<a></a>').attr("class","select_anchor").attr("href","#").attr("tabindex", tabind).text(selectedText).appendTo($(selectspan));
				
				selectfield.click(function() { 
					$(this).parent().siblings().children(".flyout").hide();
					$(" ~ .flyout",this).toggle(); 
					$(this).siblings(".flyout").children("ul").children("li").removeClass("focus");
					$(this).siblings(".flyout").children("ul").children("li[selected='true']").addClass("focus");
				
					$(" > span a:first", this).focus();
				});
														    
				$(selectanchor).focus(function(){
					$(document).unbind('keydown');
					obj = this;
					$(document).bind('keydown',function(e) { return _keyboard_action(e,obj) });				   
				}).blur(function() { 
					$(document).unbind('keydown');
				});
				
				
				i++;
				$(this).remove();
			});
		
		}
		
		function _keyboard_action(objEvent,obj) {
			id = $(obj).parent().parent().parent().attr('id');
			id = id.substr(0,(id.length-3));
			stopbubble = false;
			if(objEvent.altLeft || objEvent.altKey) {
				switch(objEvent.keyCode) {
					case 38:	$('#'+id+"_re"+' .flyout').slideUp('fast');
								stopbubble = true;
								break;
					case 40:  	$("#"+id+"_re"+" .flyout li[selected='true']").addClass("focus");
								$('#'+id+"_re"+' .flyout').slideDown('fast');
								stopbubble = true;
								break;
				}
			} else {
				switch(objEvent.keyCode) {
					case 13:	$("#"+id+"_re"+" .select_anchor").text($("#"+id+" .flyout li[selected='true']"));
								$("#"+id).val($("#"+id+"_re"+" .flyout li[selected='true']").attr("value"));
								$('#'+id+"_re"+' .flyout').slideUp('fast');
								stopbubble = true;
								options.changeFunction();
								return false;
								break;
					case 38:	current = $("#"+id+"_re"+" .flyout li[selected='true']");
								previous = current.prev();
								if(previous.length != 0) {
									itemPosition = current.position();
									itemTop = $("#"+id+"_re"+" .flyout").scrollTop() + parseInt(itemPosition['top']);
									FlyoutHeight  = $("#"+id+"_re"+" .flyout").height();
									scrollT = itemTop - FlyoutHeight + 18;
									$("#"+id+"_re"+" .flyout").scrollTop(scrollT);
									
									previous.attr("selected","true").addClass("focus");
									current.attr("selected","false").removeClass("focus");
									$("#"+id+"_re"+" .select_anchor").text(previous.text());
									$("#"+id).val($("#"+id+"_re"+" .flyout li[selected='true']").attr("value"));					
								}
								stopbubble = true;
								break;
					case 40:	current = $("#"+id+"_re"+" .flyout li[selected='true']");
								nextone = current.next();
								if(nextone.length != 0) {
									itemPosition = current.position();
									itemHeight = current.height();
									itemBottom = $("#"+id+"_re"+" .flyout").scrollTop() + parseInt(itemPosition['top']) + parseInt(itemHeight);
									FlyoutHeight  = $("#"+id+"_re"+" .flyout").height();
									scrollT = itemBottom - FlyoutHeight + 18;
									$("#"+id+"_re"+" .flyout").scrollTop(scrollT);
									
									current.attr("selected","false").removeClass("focus");
									nextone.attr("selected","true").addClass("focus");
									$("#"+id+"_re"+" .select_anchor").text(nextone.text());
									$("#"+id).val($("#"+id+"_re"+" .flyout li[selected='true']").attr("value"));
								}
								stopbubble = true;
								break;
				}
			}
			if(stopbubble) { 
				objEvent.stopPropagation();
    			objEvent.preventDefault();
			}
			
		}
		
		_initialize();
	}
	
})(jQuery);