/*
    Uses a spritemap to create a border around indicated element
    
        $("#my_div").spriteborder({
            spriteMap: "border.png",
            cornerDims: [35, 35],
            outset:false,
            containerId:"myContainer",
            creationComplete:function(){}
        });
        
    spriteMap: image containing border graphic.
    cornerDims: array dimensions of the corners. currently only supports equal dimension corners.
    outset: whether the border appears outside the element (true) or inside (false). default is false
*/
$.fn.extend({
    spriteborder: function(params) {

        var _this = this;
        var container = params.container;
        var _id = params.containerId || "br" + Math.round(Math.random() * (new Date()).getTime()).toString();
        var outset = params.outset || false;
        var _creationComplete = params.creationComplete || function(container) { };

        function onSMCached() {


            var hMargin = parseInt(_this.css("margin-left")) + parseInt(_this.css("margin-right"));
            var vMargin = parseInt(_this.css("margin-top")) + parseInt(_this.css("margin-bottom"));

            var _cornerWidth = params.cornerDims[0];
            var _cornerHeight = params.cornerDims[1];

            var _bgWidth = smImage.width - (_cornerWidth * 2);
            var _bgHeight = smImage.height - (_cornerHeight * 2);

            var _centerWidth = ((_this.outerWidth() - (_cornerWidth * 2)) + (_cornerWidth * 2 * outset))
            var _centerHeight = ((_this.outerHeight() - (_cornerHeight * 2)) + (_cornerHeight * 2 * outset));

            var _newStuff = ""
                    + "<div id=\"" + _id + "\" style=\"position:relative;\">"
                        + "<div style=\"position: absolute; left: 0; width:" + _cornerWidth + "px; height:" + _cornerHeight + "px;\"><img src=\"" + params.spriteMap + "\"/></div>"
                        + "<div style=\"position: absolute; left: " + _cornerWidth + "px; overflow:hidden; width: " + (_centerWidth) + "px; height:" + _cornerHeight + "px;\"><img src=\"" + params.spriteMap + "\" style=\"position: absolute;  left: -" + Math.ceil((_centerWidth / _bgWidth) * _cornerWidth) + "px; height: " + smImage.width + "px; width: " + Math.ceil((_centerWidth / _bgWidth) * smImage.width) + "px;\" /></div>"
                        + "<div style=\"overflow: hidden; position: absolute; right: 0; width:" + _cornerWidth + "px; height:" + _cornerHeight + "px;\"><img style=\"position: absolute; left: -" + (smImage.width - _cornerWidth) + "px\" src=\"" + params.spriteMap + "\"/></div>"

                        + "<div style=\"overflow: hidden; position: absolute; top: " + _cornerHeight + "px; width:" + _cornerWidth + "px; height:" + (_centerHeight) + "px \"><img style=\"position: absolute; width: " + smImage.width + "px; height: " + Math.ceil((_centerHeight / _bgHeight) * smImage.height) + "px; top: -" + Math.ceil((_centerHeight / _bgHeight) * _cornerHeight) + "px; \" src=\"" + params.spriteMap + "\" /></div>"
                        + "<div style=\"overflow: hidden; position: absolute; top:" + _cornerHeight + "px; left:" + _cornerWidth + "px; width:" + (_centerWidth) + "px; height:" + (_centerHeight) + "px;\">"
                        + "<img style=\"position: absolute; width: " + Math.ceil((_centerWidth / _bgWidth) * smImage.width) + "px; height: " + Math.ceil((_centerHeight / _bgHeight) * smImage.height) + "px; top: -" + Math.ceil((_centerHeight / _bgHeight) * _cornerHeight) + "px; left:-" + Math.ceil((_centerWidth / _bgWidth) * _cornerWidth) + "px; \" src=\"" + params.spriteMap + "\" />"
                        + "<div id=\"" + _id + "_inner\" style=\"position: relative;\"></div>"
                        + "</div>"
                        + "<div style=\"overflow: hidden; position: absolute; top: " + _cornerHeight + "px; right: 0; width:" + _cornerWidth + "px; height:" + (_centerHeight) + "px \"><img style=\"position: absolute; width: " + smImage.width + "px; height: " + Math.ceil((_centerHeight / _bgHeight) * smImage.height) + "px; top: -" + Math.ceil((_centerHeight / _bgHeight) * _cornerHeight) + "px; right: 0; \" src=\"" + params.spriteMap + "\" /></div>"

                        + "<div style=\"overflow: hidden; position: absolute; left: 0; bottom: 0; width:" + _cornerWidth + "px; height:" + _cornerHeight + "px;\"><img style=\"position: absolute; top:-" + (smImage.height - _cornerHeight) + "px;\" src=\"" + params.spriteMap + "\"/></div>"
                        + "<div style=\"position: absolute; bottom: 0; left: " + _cornerWidth + "px; overflow:hidden; width: " + (_centerWidth) + "px; height:" + _cornerHeight + "px;\"><img src=\"" + params.spriteMap + "\" style=\"position: absolute;  left: -" + Math.ceil((_centerWidth / _bgWidth) * _cornerWidth) + "px; top: -" + (smImage.height - _cornerHeight) + "px; height: " + smImage.width + "px; width: " + Math.ceil((_centerWidth / _bgWidth) * smImage.width) + "px;\" /></div>"
            //+ "<div style=\"background: url("+params.spriteMap+") -"+(smImage.width-_cornerWidth)+"px -"+(smImage.height-_cornerHeight)+"px; position: absolute; right: 0; bottom: 0; width:"+_cornerWidth+"px; height:"+_cornerHeight+"px;\"></div>"
                        + "<div style=\"overflow: hidden; position: absolute; right: 0; bottom: 0; width:" + _cornerWidth + "px; height:" + _cornerHeight + "px;\"><img style=\"position: absolute; top:-" + (smImage.height - _cornerHeight) + "px; left:-" + (smImage.width - _cornerWidth) + "px\" src=\"" + params.spriteMap + "\"/></div>"
                    + "</div>";


            _this.before(_newStuff);
            _this.clone(true).appendTo($("#" + _id + "_inner"));

            $("#" + _id).css({
                display: _this.css("display"),
                width: (_this.outerWidth() + (_cornerWidth * 2 * outset)).toString() + "px",
                height: (_this.outerHeight() + (_cornerHeight * 2 * outset)).toString() + "px",
                "margin-top": _this.css("margin-top"),
                "margin-right": _this.css("margin-right"),
                "margin-bottom": _this.css("margin-bottom"),
                "margin-left": _this.css("margin-left"),
                position: _this.css("position"),
                top: _this.css("top"),
                right: _this.css("right"),
                bottom: _this.css("bottom"),
                left: _this.css("left")
            });


            $("#" + _id + "_inner *:first").css({
                position: "relative",
                top: "0",
                left: "0",
                width: _this.outerWidth() - (_cornerWidth * 2 * !outset),
                height: _this.outerHeight() - (_cornerHeight * 2 * !outset),
                margin: 0
            });

            $("#" + _id).supersleight();

            $("#" + _id).css({ position: "relative" });

            _this.remove();
            _creationComplete(container);

        };

        var smImage = new Image();
        smImage.onload = onSMCached;
        smImage.src = params.spriteMap;

    }
});

$.fn.supersleight = $.fn.supersleight || function(settings) {
	settings = jQuery.extend({
		imgs: true,
		backgrounds: true,
		shim: '/app_themes/drhortonsite/images/x.gif',
		apply_positioning: true
	}, settings);
	
	return this.each(function(){
		if (jQuery.browser.msie && parseInt(jQuery.browser.version, 10) < 7 && parseInt(jQuery.browser.version, 10) > 4) {
			jQuery(this).find('*').andSelf().each(function(i,obj) {
				var self = jQuery(obj);
				// background pngs
				if (settings.backgrounds && self.css('background-image').match(/\.png/i) !== null) {
					var bg = self.css('background-image');
					var src = bg.substring(5,bg.length-2);
					var mode = (self.css('background-repeat') == 'no-repeat' ? 'crop' : 'scale');
					var styles = {
						'filter': "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='" + src + "', sizingMethod='" + mode + "')",
						'background-image': 'url('+settings.shim+')'
					};
					self.css(styles);
				};
				// image elements
				if (settings.imgs && self.is('img[src$=png]')){
					var styles = {
						'width': self.width() + 'px',
						'height': self.height() + 'px',
						'filter': "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='" + self.attr('src') + "', sizingMethod='scale')"
					};
					self.css(styles).attr('src', settings.shim);
				};
				// apply position to 'active' elements
				if (settings.apply_positioning && self.is('a, input') && (self.css('position') === '' || self.css('position') == 'static')){
					self.css('position', 'relative');
				};
			});
		};
	});
};



$.fn.outerHTML = $.fn.outerHTML || function(){
    return $('<div>').append( this.eq(0).clone() ).html();
}