jQuery.fn.fixate = function() {
	this.each(function(){
		var that = $(this);
		var wrapper = $("<div>").append(that.children()).appendTo(that);
		var top = that.offset().top - parseFloat(that.css("marginTop").replace(/auto/,0));
		$(window).scroll(function() {
			if($(this).scrollTop()>=top) {
				that.css("height",wrapper.height()+"px");
				wrapper.addClass("fixed").css("width",that.width()+"px");
			} else {
				that.css("height","");
				wrapper.removeClass("fixed").css("width","");
			}
		});
	});
};

jQuery.fn.makeHintedField = function() {
	this.each(function() {
		var input = $(this);
		var label = $("<input>")
			.attr("id", input.attr("id"))
			.val(input.prev("span").text())
			.addClass("hintedLabel").addClass("hinted");
		var blur = function() { if(input.val() != "") return; input.replaceWith(label); label.focus(focus); };
		var focus = function() { label.replaceWith(input); input.blur(blur); setTimeout(function() { input.focus() }, 10) };
		blur();
	});
};

jQuery.fn.inRaisedWindow = function(opt) {
	
	if(jQuery.fn.inRaisedWindow.lock) return;
	jQuery.fn.inRaisedWindow.lock = true;

	opt = $.extend(jQuery.fn.inRaisedWindow.defaults,opt)

	var css = {
		window: { position:"absolute",top:0,left:0,width:"100%",height:"100%" },
		shade: { position:"fixed",top:"0",left:"0",height:"100%",width:"100%", background: opt.shade, opacity:opt.opacity.toString()},
		content: { padding: opt.extent.top+" "+opt.extent.right+" "+opt.extent.bottom+" "+opt.extent.left, position:"relative", margin: opt.position.top+" auto 0 auto"},
		close: { position: "absolute", top: opt.extent.top, left: "0", "margin-top":"-30px", width: "100%", "text-align": "center", "color":"white" },
		c: { background: opt.background, position:"absolute", top: opt.extent.top, bottom: opt.extent.bottom, left: opt.extent.left, right: opt.extent.right },
		t: { background: "url("+(opt.shadow.horizontal||opt.shadow)+") top center repeat-x", position: "absolute", top: 0, height: opt.extent.top, left: opt.extent.left, right: opt.extent.left },
		b: { background: "url("+(opt.shadow.horizontal||opt.shadow)+") bottom center repeat-x", position: "absolute", bottom: 0, height: opt.extent.bottom, left: opt.extent.left, right: opt.extent.left },
		l: { background: "url("+(opt.shadow.vertical||opt.shadow)+") center left repeat-y", position: "absolute", left: 0, width: opt.extent.left, top: opt.extent.top, bottom: opt.extent.bottom },
		r: { background: "url("+(opt.shadow.vertical||opt.shadow)+") center right repeat-y", position: "absolute", right: 0, width: opt.extent.right, top: opt.extent.top, bottom: opt.extent.bottom },
		tl: { background: "url("+(opt.shadow.corner||opt.shadow)+") top left no-repeat", position: "absolute", left: 0, top: 0, width: opt.extent.left, height: opt.extent.top },
		tr: { background: "url("+(opt.shadow.corner||opt.shadow)+") top right no-repeat", position: "absolute", right: 0, top: 0, width: opt.extent.right, height: opt.extent.top },
		bl: { background: "url("+(opt.shadow.corner||opt.shadow)+") bottom left no-repeat", position: "absolute", left: 0, bottom: 0, width: opt.extent.left, height: opt.extent.bottom },
		br: { background: "url("+(opt.shadow.corner||opt.shadow)+") bottom right no-repeat", position: "absolute", right: 0, bottom: 0, width: opt.extent.right, height: opt.extent.bottom }
	};

	var window,content,close;
	var element = opt.url?$("<iframe>").css({width:"100%",height:"100%"}).attr("src",opt.url):$(this);
	$(document.body).append(window = $("<div>").css(css.window)
		.append($("<div>").css(css.shade))
		.append(content = $("<div>")
			.css(css.content)
			.append($("<div>").css(css.t)).append($("<div>").css(css.b))
			.append($("<div>").css(css.l)).append($("<div>").css(css.r))
			.append($("<div>").css(css.tl)).append($("<div>").css(css.tr))
			.append($("<div>").css(css.bl)).append($("<div>").css(css.br))
			.append($("<div>").css(css.c).append(element))
			.append($("<div>")
				.css(css.close)
				.append(close = $("<span>")
					.css({cursor:"pointer",background:"url(/static/images/window-close.gif) center left no-repeat",padding: "5px 0 5px 30px","font-size":"15px"})
					.append(opt.closeLabel)
					.addClass("close")
				)
			)
		)
		.fadeIn("fast")
	);
	content.width(opt.width||element.width())
	if(opt.height) {
	 content.height(opt.height)
	}
	if($.browser.msie&&$.browser.version<7) {
		content.children(":lt(8)").remove();
		content.children(":lt(9)").css("color","black");
		window.children(":eq(0)").remove()
	}

	close.click(function(){
		window.fadeOut("fast",function(){
			window.remove();
			delete jQuery.fn.inRaisedWindow.lock;
		});
	});
	return window;
}
jQuery.fn.inRaisedWindow.defaults = {
	shade: "black",
	background: "white url(/static/images/spinner.gif) center center no-repeat",
	opacity: 0.25,
	position: { top: "25px" },
	shadow: {
		horizontal: "/static/images/window-shadow-h.png",
		vertical: "/static/images/window-shadow-v.png",
		corner: "/static/images/window-shadow-c.png"
	},
	closeLabel: "www.dermoshop.com",
	extent: {
		top:"50px", bottom:"50px", 
		left:"50px", right:"50px" 
	},
	scroll: false
};

// http://stackoverflow.com/questions/1184624/serialize-form-to-json-with-jquery/1186309
jQuery.fn.serializeObject = function()	{
	var o = {};
	$.each(this.serializeArray(), function() {
		if(!o[this.name]) {
			o[this.name] = this.value || '';
			return;
		}	
		if (!o[this.name].push) {
			o[this.name] = [o[this.name]];
		}
		o[this.name].push(this.value || '');
	});
	return o;
};