/*
    Copyright: Indev - Internet Development
    Version: Aug 13 2010
    Description: A simple 'placeholder' plugin.
                 Sets the default placeholder text, removes or places it when nescassary on onblur and onfocus.
                 Allso adds 'placeholder' as a class when the placeholder text is shown
    Usage: see http://www.indev.nl/placeholder/
*/

(function($){ 

	$.placeholder = new Object();
	$.placeholder.createInput = function(obj) { //Createspan gets an own method, preventing code duplication
		//Set password value to empty, so it does not 'shine through'
		if($(obj).attr('placeholder') != '') {
			$(obj).attr('placeholderPassword', $(obj).attr('placeholder'));
			$(obj).removeAttr('placeholder');
		}
		var span = document.createElement('input');
		$(span).css({
			position: 'absolute',
			top: 0,
			left: 0,
			width: $(obj).outerWidth(),
			bottom: 0,
			display: 'block',
			paddingLeft: $(obj).css('padding-left'),
			paddingtop: $(obj).css('padding-top'),
			paddingBottom: $(obj).css('padding-bottom'),
			paddingRight: $(obj).css('padding-right'),
			lineHeight: $(obj).css('line-height'),
			fontFamily: $(obj).css('font-family'),
			color: $(obj).css('color'),
			fontSize: $(obj).css('font-size'),
			fontWeight: $(obj).css('font-weight'),
			letterSpacing: $(obj).css('letter-spacing'),
			textTransform: $(obj).css('text-transform'),
			textDecoration: $(obj).css('text-decoration'),
			border: $(obj).css('border'),
			cursor: 'text'
		}).val($(obj).attr('placeholderPassword')).addClass('placeholderSpan');
		$(obj).after(span);
		
		//The span should disapear on onclick (for focus)
		$(span).click(function() {
			$(span).siblings('[type=password]').focus();
			$(span).remove();
		});
	}
	
	//The plugin functions
    $.fn.placeholder = function() {
        return this.each(function() {
            			
			if(($(this).attr('placeholder') || $(this).attr('placeholderPassword')) && $(this).val() == '') { //Check if there is a default placeholder

				//Add the placeholder class
				$(this).addClass('placeholder');
				
				//The password field does not get a 'default value' other fields do (password field gets a span containing the value making it readable)
				if($(this).attr('type') != 'password') {
					$(this).val($(this).attr('placeholder'));
				}
				else { //If the current field is a password field, and shows placeholder, place the placeholder text in a span floating above the object so it is readable (type changing on the fly breaks form completion software and is not possible in IE)					
					$(this).wrap('<div style="position: relative; margin: 0; padding: 0;" />'); //Create a container so we can position the new elements
					$.placeholder.createInput(this);
				}
					
				//Add onblur and onfocus methods
				$(this).focus(function() {
					$(this).removeClass('placeholder');
					if(($(this).val() == $(this).attr('placeholder')) || ($(this).val() == $(this).attr('placeholderPassword'))) {
						$(this).val('');
						//Check if the input is a password field, if so remove the placeholder span
						if($(this).attr('type') == 'password') {
							//If there is a placeholder span, remove it
							$(this).siblings('.placeholderSpan').remove();
						}
					}
				});
				
				$(this).blur(function() {
					if($(this).val() == '') {
						$(this).addClass('placeholder');
						if($(this).attr('type') != 'password') //Not a password field
							$(this).val($(this).attr('placeholder')).addClass('placeholder');
						else { //The type field is a password field, shows placeholder, overlay a span so the placeholder text is readable
							$.placeholder.createInput(this);
						}
					}
				});
				
			}
            
        });
    }
})(jQuery);