/*
     Input Skinner v1.1 - puremango.co.uk
     // please leave my url in place :-)

usage:
	see http://www.puremango.co.uk/mask/
*/
var _skinner = {
	max_locks: 15,
	lock_prefix: "http://www.mercedessteering.com/dotimages/",
	lock_suffix: ".jpg",

	haspreloaded: false,
	mask_images: Array(),

	skinByClass: function(theClass,imgsrc) {
		var i=0;
		var j=0;
		for(i=0 ; i<document.forms.length; i++) {
			for(j=0 ; j<document.forms[i].elements.length ; j++) {
				if(document.forms[i].elements[j].className.indexOf(theClass)!=-1) {
					_skinner.setupSkin(document.forms[i].elements[j],imgsrc);
				}
			}
		}
	},

	maskByClass: function(theClass) {
		var i=0;
		var j=0;
		for(i=0 ; i<document.forms.length; i++) {
			for(j=0 ; j<document.forms[i].elements.length ; j++) {
				if(document.forms[i].elements[j].className.indexOf(theClass)!=-1) {
				//alert(document.forms[i].elements[j].value)																																
					_skinner.makeMasked(document.forms[i].elements[j]);
				}
			}
		}
		
		// IE is slow and clunky and needs a preloaded (which I think works but wouldn't be suprised if didn't)
		if(!_skinner.haspreloaded) {
			for(i=0 ; i<=_skinner.max_locks ; i++) {
				_skinner.mask_images[i] = new Image();
				//alert(_skinner.lock_prefix+i+_skinner.lock_suffix)
				_skinner.mask_images[i].src = _skinner.lock_prefix+i+_skinner.lock_suffix;
			}
			_skinner.haspreloaded = true;
		}
	},

	unmask: function(el_id) {
		// this will only be run if one of the images 404's
		// we make some assumptions about the default unmasked style
		
		var el = document.getElementById(el_id);

		el.style.textIndent = "0px";
		el.style.border = "1px solid #7F9DB9";
		el.style.color = "#000";
		el.style.background = "#FFF";
		// cancel the masking events
		el.onkeyup = null;
		el.onkeydown = null;
	},

	applyMask: function(e) {
		//  this function called onKeyDown/onKeyUp of masked fields
		//alert(document.getElementById("pass").value)
		document.getElementById("secword").value=document.getElementById("typesecword").value
		//document.getElementById("show").value=document.getElementById("pass").value
		if(!e) {
			var e = event;
		}
		if(e.target) {
			// FF
			el = e.target;
		} else if(e.srcElement){
			// MSIE
			el = e.srcElement;
		} else {
			// in the worst case, the browser has skinned the field, but can't mask it
			// resulting in the skinned fields working fine
			// and the password field appearing skinned but un-typable in
			// you still *can* type in it, but no characters will display
			// on submit, the field value is sent as normal
			// in the best case, nothing happens and the inputs appear as normal unskinned unmasked
			// as we evidently don't have a handle to the element, we can't call unmask so there's little we can do...
			// (though I could do an unmaskByClass but then we'd need to ferry the className about....)
			return;
		}

		// degrades perfectly into a normal password box in other browsers
		
		if(el.value.length>=0) {
			/*
			// uncomment this to get text cursor to work in FF but not IE.
			// (in IE it causes the first char of the password to display)
			if(el.value.length==0) {
				el.style.textIndent = "5px";
			} else {
				el.style.textIndent = "-10000px";
			}
			*/
			var img = new Image();
			
			if(el.value.length<_skinner.max_locks) {
				img.src = _skinner.lock_prefix+el.value.length+_skinner.lock_suffix;
			} else {
				// show a max of (max_locks) characters for password
				// (actual password length unaffected; this is purely a visual thing)
				img.src = _skinner.lock_prefix+_skinner.max_locks+_skinner.lock_suffix;
			}
			// for error handling in case of broken images:
			img.onerror =  new Function("_skinner.unmask('"+el.id+"');")
			
			// apply the mask image
			el.style.background = "url('"+img.src+"')";
			el.style.backgroundRepeat = "no-repeat";
		}
	},

	resize: function(el_id) {
		// resize the element to whatever the image dimensions are
		var el = document.getElementById(el_id);
		if(el.img.width>0) {
			el.style.width = el.img.width;
		}
		if(el.img.height>0) {
			el.style.height = el.img.height;
		}
	},

	setupSkin: function(el,imgsrc) {
		// thankyou SO much to http://www.panoramio.com/blog/onload-event/
		// for publishing the info re: MSIE not firing onload after src
		el.img = new Image();
		if(!el.id) {
			// give it an ID we can be pretty sure is unique (but we're buggered if it's not)
			el.id = "_skinner_"+el.name+Math.round(10000*Math.random());
		}
		// hey look; event handlers with args! - http://p2p.wrox.com/topic.asp?TOPIC_ID=46378
		// resize the element to the dimensions of the image
		el.img.onload = new Function("_skinner.resize('"+el.id+"');")
		el.img.onerror = new Function("_skinner.unmask('"+el.id+"');")
		if(imgsrc) {
			el.img.src = imgsrc;
		} else {
			el.img.src = _skinner.lock_prefix+"0"+_skinner.lock_suffix;
		}
		// the textIndent is to account for the border on the image.
		// I guess this (c|sh)ould be user configurable...
		el.style.textIndent = "5px";
		// skin it
		el.style.border = "none";
		el.style.background = "url('"+el.img.src+"')";
		// just in case the onload doesn't fire, or resize fails for some reason:
		el.style.backgroundRepeat = "no-repeat";
	},

	makeMasked: function(el) {
		// apply the skin
		_skinner.setupSkin(el);

		// override the indent applied by setupSkin
		el.style.textIndent = "-10000px";
		// MSIE doesn't apply the textIndent until a key is pressed
		// so if the field has a default value, it won't be hidden until then
		// I can't think of a way to bypass that
		// I tried fontSize 0px and it screwed up FF (and msie still displays very small text anyway)
		// I guess we could do a browser check but that's lame.
		// you shouldn't be applying default values to password boxes anyway really.
		// any ideas to fix this? email me.
		if(el.value.length>0) {
			// just waste it.
			el.value = "";
		}

		// assign onKeyUp event to the element
		el.onkeyup = _skinner.applyMask;
		el.onkeydown = _skinner.applyMask;

		/*
		// run applyMask now in case there's already a value there (kinda obsolete since we wipe the value above)
		// (but I hope to fix that so I've left the code in. It's cool code; we fake an event object so applyMask can recieve it)
		var obj = new Object();
		obj.target = el;
		obj.srcElement = el;
		_skinner.applyMask(obj);
		*/
	}
};