/*#############################################################
Name: Niceforms
Version: 0.9
Author: Lucian Slatineanu
URL: http://www.badboy.ro/

Feel free to use and modify but please provide credits.
#############################################################*/

//global variables that can be used by all the functions on this page.
var selects;
var inputs;
var radios = new Array();
var checkboxes = new Array();
var hovers = new Array();
var buttons = new Array();
var selectText = "please select";
var inputVal=new Array();

//this function runs when the page is loaded so put all your other onload stuff in here too.
function inits() {
	
	//check if styles are enabled and only then start replacing elements
	
		replaceSelects();
		replaceRadios();
		replaceCheckboxes();
		replaceText();
	
	hoverEffects();
	buttonHovers();
}
function replaceText(){
		$('input:text').each(function(i){
			$('input:text').eq(i).css({
			'border': '0',
			'background-color': 'transparent',
			'width':$('input:text').eq(i).width()-10,
			'height':$('input:text').eq(i).css('height'),
			'color':$('input:text').eq(i).css('color'),
			'font-size':$('input:text').eq(i).css('font-size'),
			'float':$('input:text').eq(i).css('float')
			});
			inputVal[i]=$('input:text').eq(i).val();
			$('input:text').eq(i).wrap('<div id="'+$('input:text').eq(i).attr('id')+i+'" class="'+$('input:text').eq(i).attr('class')+'"></div>');
			$('input:text').eq(i).parent().attr("class");
			
			
			
			$('input:text').eq(i).bind("focus", function(e){
				$('input:text').eq(i).parent().attr("class",$('input:text').eq(i).parent().attr("class")+"Hovered");
				if($('input:text').eq(i).val()==inputVal[i]){
				$('input:text').eq(i).val('');
				}
			});
			$('input:text').eq(i).bind("blur", function(e){
				$('input:text').eq(i).parent().attr("class",$('input:text').eq(i).parent().attr("class").replace('Hovered', ""));
				if($('input:text').eq(i).val()==''){
					$('input:text').eq(i).val(inputVal[i]);
				}
			});
			$('input:text').eq(i).attr('class','');
	});
}
function replaceRadios() {
	$('input:radio').each(function(i){						
		$input = $(this);
		$input.addClass('transparent').wrap('<span></span>');
		var $wrapper = $input.parent();
		$wrapper.prepend('<a href="#" class="radios radioAreaUnchecked" rel="'+ this.name +'"></a>');
		/* Click Handler */
		$('a.radios', 'form').click(function(){
				var $a = $(this);
				$a.siblings('input')[0].checked = true;
				$a.attr('class','radios radioAreaChecked');
			
				/* uncheck all others of same name */
				$('a[rel="'+ $a.attr('rel') +'"]').not($a).each(function(){
					$(this).attr('class','radios radioAreaUnchecked').siblings('input')[0].checked=false;
					
				});
				return false;
		});
		
		/* set the default state */
		if (this.checked){
			
			$('a.radios', 'form').eq(i).attr('class','radios radioAreaChecked');
		}
	});
}


function replaceCheckboxes() {
	$('input:checkbox').each(function(i){	
		//alert($(this).next('label').attr('for'));							  
		$(this).addClass('transparent').wrap('<span class="Checkboxes"></span>');
		var $wrapper = $(this).parent();
		$wrapper.prepend('<a href="#" class="boxes checkboxAreaUnchecked"></a>');
		/* Click Handler*/
		$(this).siblings('a.boxes').click(function(){										 
			var $a = $(this);
			var input = $a.siblings('input')[0];
			
			if (input.checked===true){
				input.checked = false;
				$a.attr('class','boxes checkboxAreaUnchecked');
			}
			else {
				input.checked = true;
				$a.attr('class','boxes checkboxAreaChecked');
			}
			return false;
		}); 
		
		/* set the default state */
		if (this.checked){$('a.boxes', 'form').eq(i).attr('class','boxes checkboxAreaChecked');}
		
	});
	
	$('.Checkboxes').click(function(e){
								
		if ($(this).children('input')[0].checked){
			
			
			$(this).children('a.boxes').attr('class','boxes checkboxAreaChecked');
		}
		else {
			
			$(this).children('a.boxes').attr('class','boxes checkboxAreaUnchecked');
		}
		
	});
}

function replaceSelects() {
	//get all the select fields on the page
    selects = document.getElementsByTagName('select');
	//cycle trough the select fields
    for(var i=0; i < selects.length; i++) {
		//create and build div structure
		var selectArea = document.createElement('div');
		selectArea.id=selects[i].id+"Real";
		selectArea.style.width=selects[i].style.width;
		var left = document.createElement('div');
		var right = document.createElement('div');
		var center = document.createElement('div');
		
		if($("select option:selected").eq(i).text()==''){
			var text = document.createTextNode(selectText);
		}else{
			var text = document.createTextNode($("select option:selected").eq(i).text());
		}
		center.id = "mySelectText"+i;
		selectArea.className = "selectArea";
		left.className = "left";
		right.className = "right";
		center.className = "center";
		
		center.appendChild(text);
		selectArea.appendChild(left);
		selectArea.appendChild(right);
		selectArea.appendChild(center);
		
		//hide the select field
        selects[i].style.display='none'; 
		
		//insert select div
		selects[i].parentNode.insertBefore(selectArea, selects[i]);
 
 		//build & place options div
		var optionsDivHolder = document.createElement('div');
		optionsDivHolder.className = "winXP";
		optionsDivHolder.id = "optionsDivHolder"+i;
		
		//build & place options div
		var optionsDiv = document.createElement('div');
		optionsDiv.className = "scroll-pane optionsDivInvisible";
		optionsDiv.id = "optionsDiv"+i;
		
		//get select's options and add to options div
		var optionHolders="";
		for(var j=0; j < selects[i].options.length; j++) {
			var optionHolder = document.createElement('p');
			var optionLink = document.createElement('a');
			var optionTxt = document.createTextNode(selects[i].options[j].text);
			optionLink.href = "javascript:selectMe('"+selects[i].id+"',"+j+","+i+");";
			optionLink.appendChild(optionTxt);
			optionHolder.appendChild(optionLink);
			optionsDiv.appendChild(optionHolder);
			
		}
		
		optionsDivHolder.appendChild(optionsDiv);
		
		//insert options div

		$(selects[i]).before(optionsDivHolder);
	}
	if ($.browser.opera) {
   		$('.checkBox').css({"margin":"3px","padding":"3px"});
	}
	$("#optionsDivHolder").bind("mouseleave", function(e){
		$(".selectArea").each(function(i){
			document.getElementById("optionsDiv"+i).className = "scroll-pane optionsDivInvisible"; 
			document.getElementById("optionsDivHolder"+i).className = "invisible winXP"; 
		});
	});
	
	/* Check for an external click */
	var checkExternalClick = function(event) {
		if ($(event.target).parents('.optionsDivVisible').length === 0) {
			$(".selectArea").each(function(i){					   
				document.getElementById("optionsDiv"+i).className = "scroll-pane optionsDivInvisible"; 
				document.getElementById("optionsDivHolder"+i).className = "invisible winXP"; 
			});
		}
	};

	/* Apply document listener */
	$(document).mousedown(checkExternalClick);

	$(".selectArea").bind("click", function(e){
		g=$(".selectArea").index(this);
		elem = document.getElementById("optionsDiv"+g);
		elem1 =  document.getElementById("optionsDivHolder"+g);
		if(elem.className=="scroll-pane optionsDivInvisible") 
		{
			elem.className = "scroll-pane optionsDivVisible"; 
			elem1.className = "visible holder winXP";
			if(selects[g].options.length<=5){
				$(".optionsDivVisible").css({"width":$('.selectArea').eq(g).width()-8,"height":selects[g].options.length*28});
				
			}else{
				$(".optionsDivVisible").css({"width":$('.selectArea').eq(g).width()+11});
			}
			$("#optionsDivHolder"+g).css({"top":$('.selectArea').eq(g).offset().top+24,"left":$('.selectArea').eq(g).offset().left+2,"position":"absolute" });
			$("#optionsDiv"+g).jScrollPane({showArrows:true, scrollbarWidth: 15});	
		}
		else if(elem.className=="scroll-pane optionsDivVisible") {
			$(".selectArea").each(function(i){					   
				document.getElementById("optionsDiv"+i).className = "scroll-pane optionsDivInvisible"; 
				document.getElementById("optionsDivHolder"+i).className = "invisible winXP"; 
			});
		}
	});
	
}

function selectMe(selectFieldId,linkNo,selectNo) {
	document.getElementById("optionsDiv"+selectNo).className = "scroll-pane optionsDivInvisible"; 
	document.getElementById("optionsDivHolder"+selectNo).className = "invisible winXP"; 
	//feed selected option to the actual select field
	selectField = document.getElementById(selectFieldId);

	for(var k = 0; k < selectField.options.length; k++) {
		if(k==linkNo) {
			selectField.options[k].selected = "selected";
		}
		else {
			selectField.options[k].selected = "";
		}
	}
	
	//show selected option
	textVar = document.getElementById("mySelectText"+selectNo);
	var newText = document.createTextNode(selectField.options[linkNo].text);
	textVar.replaceChild(newText, textVar.childNodes[0]);

	//trigger change return this for the select changed and id+Real for manipulation selects
    $(selectField).trigger("change");
}

function findPosY(obj) {
	var posTop = 0;
	while (obj.offsetParent) {
		posTop += obj.offsetTop;
		obj = obj.offsetParent;
	}
	return posTop;
}
function findPosX(obj) {
	var posLeft = 0;
	while (obj.offsetParent) {
		posLeft += obj.offsetLeft;
		obj = obj.offsetParent;
	}
	return posLeft;
}

function checkRadio(g) {
	if(radios[g].checked) {
		for (var k = 0; k < radios.length; k++)
		{
			if(k != g) {
				document.getElementById('myRadio'+k).className = "radioAreaUnchecked";
				document.getElementById('myRadio'+k).previousSibling.className = "";
			}
			else if(k == g) {
				
				document.getElementById('myRadio'+k).className = "radioAreaChecked";
				
				document.getElementById('myRadio'+k).previousSibling.className = "chosenRadio";
			}
		}
	}
	else if(!radios[g].checked) {
		document.getElementById('myRadio'+g).className = "radioAreaUnchecked"; 
		document.getElementById('myRadio'+k).previousSibling.className = "";
	}
}

function checkCheck(g) {
	if(checkboxes[g].checked) {
		for(var k = 0; k < checkboxes.length; k++) {
			if(k == g) {
				document.getElementById('myCheck'+k).className = "checkboxAreaChecked";
				checkboxes[g].nextSibling.className = "chosen";
			}
		}
	}
	else if(!checkboxes[g].checked) {
		document.getElementById('myCheck'+g).className = "checkboxAreaUnchecked";
		checkboxes[g].nextSibling.className = "";
	}
}

function hoverEffects() {
	//get all elements (text inputs, passwords inputs, textareas)
	var elements = document.getElementsByTagName('input');
	var j = 0;
	for (var i4 = 0; i4 < elements.length; i4++) {
		if((elements[i4].type=='text')||(elements[i4].type=='password')) {
			hovers[j] = elements[i4];
			++j;
		}
	}
	elements = document.getElementsByTagName('textarea');
	for (var i4 = 0; i4 < elements.length; i4++) {
		hovers[j] = elements[i4];
		++j;
	}
	
	//add focus effects
	for (var i4 = 0; i4 < hovers.length; i4++) {
		//hovers[i4].onfocus = function() {this.className += "Hovered";}
		//hovers[i4].onblur = function() {this.className = this.className.replace(/Hovered/g, "");}
	}
}

function buttonHovers() {
	//get all buttons
	var elements = document.getElementsByTagName('input');
	var j = 0;
	for (var i5 = 0; i5 < elements.length; i5++) {
		if(elements[i5].type=='submit') {
			buttons[j] = elements[i5];
			++j;
		}
	}
	
	//add hover effects
	for (var i5 = 0; i5 < buttons.length; i5++) {
		buttons[i5].onmouseover = function() {this.className += "Hovered";}
		buttons[i5].onmouseout = function() {this.className = this.className.replace(/Hovered/g, "");}
	}
}

window.onload = inits;