/*
	BL Simple Shadow
	
	Simply adds a 10 pixel graphical shadow to the right and bottom of a div element that has Width and Height specified with CSS. 
	
	Requires jQuery 1.2.6 and the three images - shadow-right.png, shadow-corner.png and shadow-bottom.png. 
	
	@author - Ralph Whitbeck, Senior Engineer, BrandLogic Corp. (http://www.brandlogic.com, http://www.damnralph.com)
	
	@version 0.7
	
	@usage $("div").shadow();
*/


jQuery.fn.shadow = function() {

	var $this = $(this);
	//test to see if element is on the page.  If not ignore.
	if ($this.length > 0) {
		$this.each(function(i) {

			var shadowID = (this.id != "") ? this.id + "-shadow" : ((this.className != "") ? this.className + "-shadow" : "shadow" + i.toString());
			var oWidth = $(this).outerWidth();
			var oHeight = $(this).outerHeight();
			
			var imagePath = "/wp-content/themes/BrandLogic/images/";

			//wrap the element in a container div and set it's full width and height with shadows.
			$(this).wrap("<div id=\"" + shadowID + "\" class=\"shadow-container\" style=\"float:left; width:871px; height: " + (oHeight + 10) + "px; \"></div>");

			//Add the bottom row of the shadow to the element now so that we can work on the top row separately.  Hide the overflow since IE6 with show more then it should.			
			$(this).after("<div style=\"width:850px; height: 25px;overflow: hidden;clear:both;\"><div style=\"width:850px; height: 25px; background-image: url(" + imagePath + "shadow-bottom.png); background-repeat: repeat-x;float: left;\"></div><div style=\"width: 10px; height: 10px;background-image: url(" + imagePath + "shadow-corner.png); float: left;\"></div></div>");
			$(this).before("<div style=\"width:850px; height: 25px;overflow: hidden;\"><div style=\"width:850px; height: 25px; background-image: url(" + imagePath + "shadow-top.png); background-repeat: repeat-x;float: left;\"></div><div style=\"width: 10px; height: 10px;background-image: url(" + imagePath + "shadow-corner.png); float: left;\"></div></div>");

			//wrap the element in another container that'll be for the top row which includes the element and the right side of the shadow.  Set width and height.
			$(this).wrap("<div style=\"width:850px; height: " + oHeight + "px;\"></div>");

			//add the div element for the right side shadow.			
			$(this).after("<div style=\"width: 25px; height: " + oHeight + "px; float:right; background-image: url(" + imagePath + "shadow-right.png); background-repeat: y-repeat;\"></div>");
			$(this).before("<div style=\"width: 25px; height: " + oHeight + "px; float:left; background-image: url(" + imagePath + "shadow-left.png); background-repeat: y-repeat;\"></div>");
			

			//float the element left so that it lines up correct with the shadow.
			$(this).css("float", "left");
		});
	}
};


jQuery.fn.sdResize = function(width, height) {
    var $this = $(this);
    //test to see if element is on the page.  If not ignore.
    if ($this.length > 0) {
        $this.each(function(i) {
            var shadowID = (this.id != "") ? this.id + "-shadow" : ((this.className != "") ? this.className + "-shadow" : "shadow" + i.toString());
            var oWidth = width;
            var oHeight = height;
            $("#" + shadowID).css("width", oWidth + 15).css("height", oHeight + 10);
            $("#" + shadowID + ">div:first").css("width", oWidth + 15).css("height", oHeight);
            $("#" + shadowID + ">div:first>div:last").css("height", oHeight);
            $("#" + shadowID + ">div:last").css("width", oWidth + 15);
            $("#" + shadowID + ">div:last>div:first").css("width", oWidth);
        });
    }
};