var frames = {
	pad : { t : 3, r : 8, b : 9, l : 3 },
	mar : null,
	relative : { position : "relative" }, 
	absolute : { position : "absolute" },
	top : { top : "0" },
	left : { left : "0" },
	right : null,
	bottom : null,
	imgW : 0,
	imgH : 0,
	frameMe : function() {
		$("#content .frame").each(function() {
			//  capture image properties
			var thisFloat = $(this).css("float");
			frames.mar = { t : Number($(this).css("margin-top").substring(0,$(this).css("margin-top").length - 2)),
						   r : Number($(this).css("margin-right").substring(0,$(this).css("margin-right").length - 2)),
						   b : Number($(this).css("margin-bottom").substring(0,$(this).css("margin-bottom").length - 2)),
						   l : Number($(this).css("margin-left").substring(0,$(this).css("margin-left").length - 2))
						 }; 
			
			//  create DIVs
			var frame = document.createElement("div");
			var frameR = document.createElement("div");
			var frameB = document.createElement("div");
			var frameBR = document.createElement("div");

			//  set classes on the DIVs
			$(frame).addClass("frame_cont");
			$(frameR).addClass("frame_r");
			$(frameB).addClass("frame_b");
			$(frameBR).addClass("frame_br");

			//  set dimensions constants
			frames.imgW = Number($(this).css("width").substring(0,$(this).css("width").length - 2));
			frames.imgH = Number($(this).css("height").substring(0,$(this).css("height").length - 2));

			var width =  (frames.imgW + frames.pad.l + frames.pad.r) + "px";
			var height = (frames.imgH + frames.pad.t + frames.pad.b) + "px";
			var wFrame = frames.pad.r + "px";
			var hFrame = frames.pad.b + "px";
			$(frame).css("width",width);	$(frame).css("height",height);
			$(frameR).css("width",wFrame);  $(frameR).css("height",height);
			$(frameB).css("width",width);   $(frameB).css("height",hFrame);
			$(frameBR).css("width",wFrame); $(frameBR).css("height",hFrame);

			//  set DIV positions
			frames.right  = { left : (frames.imgW + frames.pad.l) + "px" };
			frames.bottom = { top  : (frames.imgH + frames.pad.t) + "px" };
			$(frame).css(frames.relative);
			$(frameR).css( frames.absolute); $(frameR).css( frames.top   ); $(frameR).css( frames.right);
			$(frameB).css( frames.absolute); $(frameB).css( frames.bottom); $(frameB).css( frames.left);
			$(frameBR).css(frames.absolute); $(frameBR).css(frames.bottom); $(frameBR).css(frames.right);

			//  set image position
			var imagePos = { top  : frames.pad.t + "px",
							 left : frames.pad.l + "px" };
			$(this).css(frames.absolute);
			$(this).css(imagePos);

			//  inherit styles
//alert(thisFloat);
			$(frame).css("float",thisFloat);
			$(frame).css("margin-top",frames.mar.t);
			$(frame).css("margin-right",frames.mar.r);
			$(frame).css("margin-bottom",frames.mar.b);
			$(frame).css("margin-left",frames.mar.l);
			$(this).css("float","none");
			$(this).css("margin","0 0 0 0");

			//  replaceChild(frame,image)
			this.parentNode.replaceChild(frame, this);

			//  appendChild(image) , frameR, frameB, frameBR
			frame.appendChild(this);
			frame.appendChild(frameR);
			frame.appendChild(frameB);
			frame.appendChild(frameBR);
			});
		}
	};

$(document).ready(function() {
	frames.frameMe();
	
	$('#nav li').hover(
		function() {  // over function
			$(this).children('.navFrame').css('left','auto');
			$(this).children('a').css('background-position','0 -39px');
			},
		function(){  //  out function
			$(this).children('.navFrame').css('left','-3000px');
			$(this).children('a').css('background-position','0 0');
			}
		);
	});