(function($) {
	customStyle = {
		create: function(name) {
			var stylesheet;
			if(!(stylesheet = document.styleSheets[name])) {
				$('head').prepend($('<style id="placeholder-css" />'));
				if(!document.styleSheets[name]) {
					document.styleSheets[name] = document.styleSheets[0];
				}
				stylesheet = document.styleSheets[name];
				stylesheet.add = function(selector, rules) {
					var stylesheet = this;
					if(stylesheet.addRule) {
						for(var i=0, l=selector.length;i<l;++i) {
							stylesheet.addRule(selector[i],rules);
						}
					} else {
						stylesheet.insertRule(selector.join(',') + '{' + rules + '}', stylesheet.cssRules.length);
					}
					return stylesheet;
				};
			}
			return stylesheet;
		}
	};

	var supportsPlaceholder = (function(){
		var i = document.createElement('input');
		return 'placeholder' in i;
	})();
	
	$(document).ready(function() {
		customStyle.create('rmi-placeholder-css')
			       .add(['.rmi-placeholder-hidden'], "display:none;")
			       .add(['.rmi-placeholder-group'], "position:relative; display:inline;")
			       .add(['.rmi-placeholder'], 'opacity:.5; filter: alpha(opacity=50); -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=50)"; -khtml-opacity: 0.5; -moz-opacity: 0.5;')
			       .add(['span.rmi-placeholder'], "position:absolute; left:5px; top:2px");
		
		$('form select[placeholder]').each(function() {
			var $this = $(this).addClass('rmi-placeholder').val('');
			var text = $this.attr('placeholder');
			var op = $('<option />', { text:text, value:'', 'class':'rmi-placeholder' });
			$this.prepend(op);
		});
		
		$('input[name=Address], input[name=address]').each(function() {
			var $this = $(this);
			var newInput = $this.clone().attr('name', 'address1')
										.attr('id', 'address1')
										.data('org-input', this)
										.on('change', function() {
											$(this).data('org-input').value = this.value;
										});
										
			newInput.insertAfter($this);
			//.attr('type', 'hidden')
			$this.removeAttr('placeholder')
				 .hide().appendTo($this.closest('form'));
		});
		
		if(!supportsPlaceholder) {
			$('form input[placeholder]').each(function() {
				var $this = $(this);
				var text = $this.attr('placeholder');
				var container = $('<div class="rmi-placeholder-group" />').insertBefore($this);
				
				var ph = $("<span class='rmi-placeholder' />").html(text);
				if($this.val()) { ph.hidePlaceholder(); }
				container.append(ph).append($this);
			});
			
			window.onChange = function(e) {
				console.log(e);
				$('form input[placeholder]').trigger('focus');
			};
		}
	}).on('click', 'span.rmi-placeholder', function(e) {
		$(this).addClass('rmi-placeholder-hidden')
			   .next('input').focus();
	}).on('focus blur', 'input[placeholder]', function(e) {
		var $this = $(this);
		var ph = $this.prev('span.rmi-placeholder');
		switch(e.type) {
			case 'focusin':
				ph.addClass('rmi-placeholder-hidden');
				break;
			case 'focusout':
				if(!$this.val()) { ph.removeClass('rmi-placeholder-hidden'); }
				break;
		}
		
	}).on('change', 'select[placeholder]', function() {
		var $this = $(this);
		if($this.val()) {
			$this.removeClass('rmi-placeholder');
		} else {
			$this.addClass('rmi-placeholder');
		}
	});
})(jQuery);