/*
CUSTOM FORM ELEMENTS
Created by Ryan Fait
www.ryanfait.com
- Derivated works  - 
*/

var checkboxHeight = "25"
, radioHeight = "25"

/* No need to change anything after this */
Custom ={
	init :function(){
		if( Nav.isIE && Nav.isIE < 7 ) return;
		CssRules.add(
			'input.customized { position: absolute; left: -1000em; }' + 
			'select.customized { position: relative; opacity: 0; z-index: 5; }'
			)
		if( Nav.isIE ) CssRules.add( 'select.customized { filter: alpha(opacity=0); }' )
		var a = getElementsByTagName( "input" ), textnode, option, active
		for( var i = 0, ni = a.length ; i < ni ; i++ ){
			var e = a[i]
			if( e.className == "styled" ){
				e.className = "customized"
				e.onfocus = Custom.focus
				e.onblur = Custom.blur
				switch( e.type ){
					case "checkbox" :
					case "radio" :
						var e1 = ( Tag( "span" )).appendChild( Tag( "span" , { className: e.type }))
						if( e.checked == true )
							e1.style.backgroundPosition = "-" + ( e.type == "checkbox" ? checkboxHeight : radioHeight ) + "px 0"
						e.parentNode.insertBefore( e1 , e )
						addEvent( e , 'click' , Custom.clear )
						e1.onmousedown = Custom.pushed
						e1.onmouseover = Custom.over
						e1.onmouseout = Custom.out
						e1.onmouseup = Custom.check
						addEvent( document , 'mouseup' , Custom.clear )
						break;
					case "text" :
						var nWidth = ( Tag.dimension( e )).width		
						, eParent = Tag( "span", { className: "inputText" })
						e.parentNode.replaceChild( eParent , e )
						eParent.appendChild( e )
						e.className = "inputText"
						var e1 = Tag( "span", { className:"text" })
						e1.style.width = ( nWidth - 12 ) + "px" // padding + width class select2 + 7 included
						e.style.width = ( nWidth - 12 ) + "px"
						if( ! Nav.isIE || Nav.isIE >= 8 ) e.style.top = "-2px"
						var e2 = Tag( "span", { className:"text2" })
						e.parentNode.insertBefore( e1 , e )
						e.parentNode.insertBefore( e2 , e.nextSibling )
						e.onmouseover = Custom.over
						e.onmouseout = Custom.out
						break;
					case "submit" :
					case "button" :
						e.className = "button"
						var nWidth = ( Tag.dimension( e )).width + 15	
						, eParent = Tag( "span", { className:"button" })
						, e1 = Tag( "span", { className:"text" , innerHTML: e.value , style:{ width: ( nWidth - 14 ) + "px"  }})
						, e2 = Tag( "span", { className:"text2" })
						if( Nav.isSafari && ! Nav.isChrome ) e1.style.lineHeight = "27px" // FIX SAFARI
						e.style.width = nWidth + "px" 
						e.value = "                                    " // FIX IE BUG
						e.parentNode.replaceChild( eParent , e )
						eParent.appendChild( e )
						e.parentNode.insertBefore( e1 , e )
						e.parentNode.insertBefore( e2 , e.nextSibling )
						e.onmouseover = Custom.over
						e.onmouseout = Custom.out 
					}
				}
			}
		a = getElementsByTagName( "select" )
		for( var i = 0, ni = a.length ; i < ni ; i++ ){
			var e1 = a[i]
			if( e1.className == "styled" ){
				e1.onfocus = Custom.focus
				e1.onblur = Custom.blur
				e1.className = "customized"
				var eParent = Tag( "span", { className: "select" })
				, option = e1.getElementsByTagName( "option" )
				e1.parentNode.replaceChild( eParent , e1 )
				eParent.appendChild( e1 )
				active = option[0].childNodes[0] ? option[0].childNodes[0].nodeValue : ""
				textnode = document.createTextNode( active )
				for( var j = 0 , nj = option.length ; j < nj ; j++ )
					if( option[j].selected == true )
						textnode = document.createTextNode( option[j].childNodes[0].nodeValue )
				var e = Tag( "span", { className: "select1" })
				e.style.width = ( e1.offsetWidth - 37 ) + "px" // padding + width class select2 + 7 included
				e1.style.width = ( e1.offsetWidth + 7 ) + "px"
				var e2 = Tag( "span", { className: "select2" })
				e.appendChild(textnode)
				e1.parentNode.insertBefore( e , e1 )
				e1.parentNode.insertBefore( e2 , e1.nextSibling )
				e1.onchange = Custom.choose
				e1.onkeyup = Custom.choose
				e1.onmouseover = Custom.over
				e1.onmouseout = Custom.out
				}
			}
		a = getElementsByTagName( "label" )
		for( var i = 0, ni = a.length ; i < ni ; i++ ){
			var e1 = a[i]
			if( e1.htmlFor ){
				var e2 = _( e1.htmlFor )
				if( e2.nodeName == "INPUT" )
				switch( e2.type ){
					case "radio" :
					case "checkbox" :
						e1.onmouseover = Custom.over
						e1.onmouseout = Custom.out
						break;
					}
				}
			}
		},
	focus :function(){
		if( this.type && in_array( this.type , [ "checkbox" , "radio" ])){
			// this.previousSibling.onmouseover()
			var n = Custom.getDimension( this )
			this.previousSibling.style.backgroundPosition = ( this.checked == true ? "-" + n + "px" : "0" ) + " -" + n + "px"
			}else Tag.cssClass( this.parentNode , "focus" , "add" )
		},
	blur :function(){
		if( this.type && in_array( this.type , [ "checkbox" , "radio" ]))
			this.previousSibling.onmouseout()
			else Tag.cssClass( this.parentNode , "focus" , "delete" )
		},
	pushed :function(){
		var e = this.nextSibling
		, n = Custom.getDimension( e )
		if( n ) this.style.backgroundPosition = ( e.checked == true ? "-" + n + "px" : "0" ) + " -" + n*2 + "px"
		},
	over :function(){
		if( this.nodeName == "SELECT" ) Tag.cssClass( this.parentNode , "over" , "add" )
		else{
			var e = this.nodeType == 3 ? this.parentNode : this
			if( e.type ) Tag.cssClass( e.parentNode , "over" , "add" )
			else {
				var eNext = this.nextSibling
				, e = eNext && eNext.nodeName == "INPUT" ? eNext : this.previousSibling
				, n = Custom.getDimension( e )
				if( n && e.previousSibling ){
					e.bOver = true
					e.previousSibling.style.backgroundPosition = ( e.checked == true ? "-" + n + "px" : "0" ) + " -" + n*3 + "px"
					}
				}
			}
		},
	out :function(){
		if( this.nodeName == "SELECT" ) Tag.cssClass( this.parentNode , "over" , "delete" )
		else{
			var e = this.nodeType == 3 ? this.parentNode : this
			if( e.type ) Tag.cssClass( e.parentNode , "over" , "delete" )
			else{
				var eNext = this.nextSibling
				, e = eNext && eNext.nodeName == "INPUT" ? eNext : this.previousSibling
				, n = Custom.getDimension( e )
				if( n && e.previousSibling ){
					e.bOver = false
					e.previousSibling.style.backgroundPosition = ( e.checked == true ? "-" + n + "px" : "0" ) + " 0px"
					}
				}
			}
		},
	check :function( evt ){
		var e = this.nextSibling
		switch( e.type ){
			case "checkbox" :
				var b = e.checked == true, n = checkboxHeight
				e.checked = ! b
				break;
			case "radio" :
				group = this.nextSibling.name
				var a = getElementsByTagName( "input" )
				for( var i = 0, ni = a.length ; i < ni ; i++ )
					if( a[i].name == group && a[i] !== e )
						a[i].previousSibling.style.backgroundPosition = "0 0"
				e.checked = true
			}
		e.previousSibling.onmouseover()
		if( e.onclick ) e.onclick( e )
		return stopPropagation( evt )
		},
	clear :function(){
		var a = getElementsByTagName( "input" )
		for( var i = 0 , ni = a.length ; i < ni ; i++ ){
			var e = a[i]
			, n = e.type == "checkbox" ? checkboxHeight : ( e.type == "radio" ? radioHeight : null )
			if( e.className == "customized" && n ){
				if( ! e.bOver ) e.previousSibling.style.backgroundPosition = ( e.checked == true ? "-" + n + "px" : "0" ) + " 0px"
				e.bOver = false
				}
			}
		},
	choose :function(){
		var a = this.getElementsByTagName( "option" )
		for( var i = 0 , ni = a.length; i < ni; i++ )
			if( a[i].selected == true )
				this.previousSibling.childNodes[0].nodeValue = a[i].childNodes[0].nodeValue
		},
	getDimension :function( e ){
		return e.type == "checkbox" ? checkboxHeight : ( e.type == "radio" ? radioHeight : null )
		}
	}

addEvent( window , 'load' , Custom.init )