/**
 * A small util to use labels floating over their input fields.
 * This file replaces the unsettling behavior of writing the label's text
 * directly into the input fields. Instead the labels are placed and hidden
 * over their respective input field.
 * 
 * For showing the label's hover effects you can style the div.label.hovered 
 * CSS class.
 */
var ScrollPins = {
	classes: [".scrollpin .pin" ],
		
	init: function() {
		var isIE6 = /msie|MSIE 6/.test(navigator.userAgent);
		var isIE7 = /msie|MSIE 7/.test(navigator.appVersion);
		if(isIE6 || isIE7) return false;
	
		// find all form_fields that are text fields and have a label
		$(ScrollPins.classes.join(", ")).each(function(index, element){
			/* Fix width of fixed area explicit to current inherited width */
			element = $(element).width( $(element).width() ).removeClass("pin").addClass("pinned");
			
			var scrollArea = element.parents(".scrollpin:first");
			var scrollAreaParent = scrollArea.parent().css({position:"relative"});
			scrollArea.css({top:scrollArea.position().top+"px",left:scrollArea.position().left+"px",position:"absolute"});
			
			$(window).bind("scroll.scrollPin", function(e){
				
				if (element.outerHeight(true) + Math.round(scrollArea.position().top) >= scrollAreaParent.height()) {
					scrollArea.css({height:"auto",position:"static"});
					element.removeClass("pinned pinned-bottom pinned-top").addClass("unpinned");
					return true;
				} else if (scrollArea.outerHeight(true) + Math.round(scrollArea.position().top) != scrollAreaParent.innerHeight()) {
					scrollArea.height(scrollAreaParent.innerHeight() - Math.round(scrollArea.position().top) - scrollArea.outerHeight(true) + scrollArea.height());
					scrollArea.css({position:"absolute"});
					element.removeClass("unpinned").addClass("pinned");
				}
				
				if($(this).scrollTop() > (scrollArea.offset().top + scrollArea.outerHeight(true) - element.outerHeight(true)) )
					$(element).addClass("pinned-bottom").removeClass("pinned-top floating");
				else if ($(this).scrollTop() > scrollArea.offset().top)
					$(element).addClass("floating").removeClass("pinned-top pinned-bottom");
				else $(element).addClass("pinned-top ").removeClass("floating pinned-bottom");
				return true;				
			});
			$(window).bind("unload.scrollPin", function(e){
				element.removeClass("pinned pinned-bottom pinned-top").addClass("pin unpinned");				
			});

		});
	}
};

$(window).load(function() {
	ScrollPins.init();
});