/**

* DD_roundies, this adds rounded-corner CSS in standard browsers and VML sublayers in IE that accomplish a similar appearance when comparing said browsers.

* Author: Drew Diller

* Email: drew.diller@gmail.com

* URL: http://www.dillerdesign.com/experiment/DD_roundies/

* Version: 0.0.2a

* Licensed under the MIT License: http://dillerdesign.com/experiment/DD_roundies/#license

*

* Usage:

* DD_roundies.addRule('#doc .container', '10px 5px'); // selector and multiple radii

* DD_roundies.addRule('.box', 5, true); // selector, radius, and optional addition of border-radius code for standard browsers.

* 

* Just want the PNG fixing effect for IE6, and don't want to also use the DD_belatedPNG library?  Don't give any additional arguments after the CSS selector.

* DD_roundies.addRule('.your .example img');

**/

var DD_roundies = {

	ns: 'DD_roundies',

	IE6: false,

	IE7: false,

	IE8: false,

	IEversion: function() {

		if (document.documentMode != 8 && document.namespaces && !document.namespaces[this.ns]) {

			this.IE6 = true;

			this.IE7 = true;

		}

		else if (document.documentMode == 8) {

			this.IE8 = true;

		}

	},

	querySelector: document.querySelectorAll,

	selectorsToProcess: [],

	imgSize: {},

	createVmlNameSpace: function() { /* enable VML */

		if (this.IE6 || this.IE7) {

			document.namespaces.add(this.ns, 'urn:schemas-microsoft-com:vml');

		}

		if (this.IE8) {

			document.writeln('<?import namespace="' + this.ns + '" implementation="#default#VML" ?>');

		}

	},

	createVmlStyleSheet: function() { /* style VML, enable behaviors */

		/*

			Just in case lots of other developers have added

			lots of other stylesheets using document.createStyleSheet

			and hit the 31-limit mark, let's not use that method!

			further reading: http://msdn.microsoft.com/en-us/library/ms531194(VS.85).aspx

		*/

		var style = document.createElement('style');

		document.documentElement.firstChild.insertBefore(style, document.documentElement.firstChild.firstChild);

		if (style.styleSheet) { /* IE */

			try {

				var styleSheet = style.styleSheet;

				styleSheet.addRule(this.ns + '\\:*', '{behavior:url(#default#VML)}');

				this.styleSheet = styleSheet;

			} catch(err) {}

		}

		else {

			this.styleSheet = style;

		}

	},

	/**

	* Method to use from afar - refer to it whenever.

	* Example for IE only: DD_roundies.addRule('div.boxy_box', '10px 5px');

	* Example for IE, Firefox, and WebKit: DD_roundies.addRule('div.boxy_box', '10px 5px', true);

	* @param {String} selector - REQUIRED - a CSS selector, such as '#doc .container'

	* @param {Integer} radius - REQUIRED - the desired radius for the box corners

	* @param {Boolean} standards - OPTIONAL - true if you also wish to output -moz-border-radius/-webkit-border-radius/border-radius declarations

	**/

	addRule: function(selector, rad, standards) {

		if (typeof rad == 'undefined' || rad === null) {

			rad = 0;

		}

		if (rad.constructor.toString().search('Array') == -1) {

			rad = rad.toString().replace(/[^0-9 ]/g, '').split(' ');

		}

		for (var i=0; i<4; i++) {

			rad[i] = (!rad[i] && rad[i] !== 0) ? rad[Math.max((i-2), 0)] : rad[i];

		}

		if (this.styleSheet) {

			if (this.styleSheet.addRule) { /* IE */

				var selectors = selector.split(','); /* multiple selectors supported, no need for multiple calls to this anymore */

				for (var i=0; i<selectors.length; i++) {

					this.styleSheet.addRule(selectors[i], 'behavior:expression(DD_roundies.roundify.call(this, [' + rad.join(',') + ']))'); /* seems to execute the function without adding it to the stylesheet - interesting... */

				}

			}

			else if (standards) {

				var moz_implementation = rad.join('px ') + 'px';

				this.styleSheet.appendChild(document.createTextNode(selector + ' {border-radius:' + moz_implementation + '; -moz-border-radius:' + moz_implementation + ';}'));

				this.styleSheet.appendChild(document.createTextNode(selector + ' {-webkit-border-top-left-radius:' + rad[0] + 'px ' + rad[0] + 'px; -webkit-border-top-right-radius:' + rad[1] + 'px ' + rad[1] + 'px; -webkit-border-bottom-right-radius:' + rad[2] + 'px ' + rad[2] + 'px; -webkit-border-bottom-left-radius:' + rad[3] + 'px ' + rad[3] + 'px;}'));

			}

		}

		else if (this.IE8) {

			this.selectorsToProcess.push({'selector':selector, 'radii':rad});

		}

	},

	readPropertyChanges: function(el) {

		switch (event.propertyName) {

			case 'style.border':

			case 'style.borderWidth':

			case 'style.padding':

				this.applyVML(el);

				break;

			case 'style.borderColor':

				this.vmlStrokeColor(el);

				break;

			case 'style.backgroundColor':

			case 'style.backgroundPosition':

			case 'style.backgroundRepeat':

				this.applyVML(el);

				break;

			case 'style.display':

				el.vmlBox.style.display = (el.style.display == 'none') ? 'none' : 'block';

				break;

			case 'style.filter':

				this.vmlOpacity(el);

				break;

			case 'style.zIndex':

				el.vmlBox.style.zIndex = el.style.zIndex;

				break;

		}

	},

	applyVML: function(el) {

		el.runtimeStyle.cssText = '';

		this.vmlFill(el);

		this.vmlStrokeColor(el);

		this.vmlStrokeWeight(el);

		this.vmlOffsets(el);

		this.vmlPath(el);

		this.nixBorder(el);

		this.vmlOpacity(el);

	},

	vmlOpacity: function(el) {

		if (el.currentStyle.filter.search('lpha') != -1) {

			var trans = el.currentStyle.filter;

			trans = parseInt(trans.substring(trans.lastIndexOf('=')+1, trans.lastIndexOf(')')), 10)/100;

			for (var v in el.vml) {

				el.vml[v].filler.opacity = trans;

			}

		}

	},

	vmlFill: function(el) {

		if (!el.currentStyle) {

			return;

		} else {

			var elStyle = el.currentStyle;

		}

		el.runtimeStyle.backgroundColor = '';

		el.runtimeStyle.backgroundImage = '';

		var noColor = (elStyle.backgroundColor == 'transparent');

		var noImg = true;

		if (elStyle.backgroundImage != 'none' || el.isImg) {

			if (!el.isImg) {

				el.vmlBg = elStyle.backgroundImage;

				el.vmlBg = el.vmlBg.substr(5, el.vmlBg.lastIndexOf('")')-5);

			}

			else {

				el.vmlBg = el.src;

			}

			var lib = this;

			if (!lib.imgSize[el.vmlBg]) { /* determine size of loaded image */

				var img = document.createElement('img');

				img.attachEvent('onload', function() {

					this.width = this.offsetWidth; /* weird cache-busting requirement! */

					this.height = this.offsetHeight;

					lib.vmlOffsets(el);

				});

				img.className = lib.ns + '_sizeFinder';

				img.runtimeStyle.cssText = 'behavior:none; position:absolute; top:-10000px; left:-10000px; border:none;'; /* make sure to set behavior to none to prevent accidental matching of the helper elements! */

				img.src = el.vmlBg;

				img.removeAttribute('width');

				img.removeAttribute('height');

				document.body.insertBefore(img, document.body.firstChild);

				lib.imgSize[el.vmlBg] = img;

			}

			el.vml.image.filler.src = el.vmlBg;

			noImg = false;

		}

		el.vml.image.filled = !noImg;

		el.vml.image.fillcolor = 'none';

		el.vml.color.filled = !noColor;

		el.vml.color.fillcolor = elStyle.backgroundColor;

		el.runtimeStyle.backgroundImage = 'none';

		el.runtimeStyle.backgroundColor = 'transparent';

	},

	vmlStrokeColor: function(el) {

		el.vml.stroke.fillcolor = el.currentStyle.borderColor;

	},

	vmlStrokeWeight: function(el) {

		var borders = ['Top', 'Right', 'Bottom', 'Left'];

		el.bW = {};

		for (var b=0; b<4; b++) {

			el.bW[borders[b]] = parseInt(el.currentStyle['border' + borders[b] + 'Width'], 10) || 0;

		}

	},

	vmlOffsets: function(el) {

		var dims = ['Left', 'Top', 'Width', 'Height'];

		for (var d=0; d<4; d++) {

			el.dim[dims[d]] = el['offset'+dims[d]];

		}

		var assign = function(obj, topLeft) {

			obj.style.left = (topLeft ? 0 : el.dim.Left) + 'px';

			obj.style.top = (topLeft ? 0 : el.dim.Top) + 'px';

			obj.style.width = el.dim.Width + 'px';

			obj.style.height = el.dim.Height + 'px';

		};

		for (var v in el.vml) {

			var mult = (v == 'image') ? 1 : 2;

			el.vml[v].coordsize = (el.dim.Width*mult) + ', ' + (el.dim.Height*mult);

			assign(el.vml[v], true);

		}

		assign(el.vmlBox, false);

		if (DD_roundies.IE8) {

			el.vml.stroke.style.margin = '-1px';

			if (typeof el.bW == 'undefined') {

				this.vmlStrokeWeight(el);

			}

			el.vml.color.style.margin = (el.bW.Top-1) + 'px ' + (el.bW.Left-1) + 'px';

		}

	},

	vmlPath: function(el) {

		var coords = function(direction, w, h, r, aL, aT, mult) {

			var cmd = direction ? ['m', 'qy', 'l', 'qx', 'l', 'qy', 'l', 'qx', 'l'] : ['qx', 'l', 'qy', 'l', 'qx', 'l', 'qy', 'l', 'm']; /* whoa */

			aL *= mult;

			aT *= mult;

			w *= mult;

			h *= mult;

			var R = r.slice(); /* do not affect original array */

			for (var i=0; i<4; i++) {

				R[i] *= mult;

				R[i] = Math.min(w/2, h/2, R[i]); /* make sure you do not get funky shapes - pick the smallest: half of the width, half of the height, or current value */

			}

			var coords = [

				cmd[0] + Math.floor(0+aL) +','+ Math.floor(R[0]+aT),

				cmd[1] + Math.floor(R[0]+aL) +','+ Math.floor(0+aT),

				cmd[2] + Math.ceil(w-R[1]+aL) +','+ Math.floor(0+aT),

				cmd[3] + Math.ceil(w+aL) +','+ Math.floor(R[1]+aT),

				cmd[4] + Math.ceil(w+aL) +','+ Math.ceil(h-R[2]+aT),

				cmd[5] + Math.ceil(w-R[2]+aL) +','+ Math.ceil(h+aT),

				cmd[6] + Math.floor(R[3]+aL) +','+ Math.ceil(h+aT),

				cmd[7] + Math.floor(0+aL) +','+ Math.ceil(h-R[3]+aT),

				cmd[8] + Math.floor(0+aL) +','+ Math.floor(R[0]+aT)

			];

			if (!direction) {

				coords.reverse();

			}

			var path = coords.join('');

			return path;

		};

		if (typeof el.bW == 'undefined') {

			this.vmlStrokeWeight(el);

		}

		var bW = el.bW;

		var rad = el.DD_radii.slice();

		/* determine outer curves */

		var outer = coords(true, el.dim.Width, el.dim.Height, rad, 0, 0, 2);

		/* determine inner curves */

		rad[0] -= Math.max(bW.Left, bW.Top);

		rad[1] -= Math.max(bW.Top, bW.Right);

		rad[2] -= Math.max(bW.Right, bW.Bottom);

		rad[3] -= Math.max(bW.Bottom, bW.Left);

		for (var i=0; i<4; i++) {

			rad[i] = Math.max(rad[i], 0);

		}

		var inner = coords(false, el.dim.Width-bW.Left-bW.Right, el.dim.Height-bW.Top-bW.Bottom, rad, bW.Left, bW.Top, 2);

		var image = coords(true, el.dim.Width-bW.Left-bW.Right+1, el.dim.Height-bW.Top-bW.Bottom+1, rad, bW.Left, bW.Top, 1);

		/* apply huge path string */

		el.vml.color.path = inner;

		el.vml.image.path = image;

		el.vml.stroke.path = outer + inner;

		this.clipImage(el);

	},

	nixBorder: function(el) {

		var s = el.currentStyle;

		var sides = ['Top', 'Left', 'Right', 'Bottom'];

		for (var i=0; i<4; i++) {

			el.runtimeStyle['padding' + sides[i]] = (parseInt(s['padding' + sides[i]], 10) || 0) + (parseInt(s['border' + sides[i] + 'Width'], 10) || 0) + 'px';

		}

		el.runtimeStyle.border = 'none';

	},

	clipImage: function(el) {

		var lib = DD_roundies;

		if (!el.vmlBg || !lib.imgSize[el.vmlBg]) {

			return;

		}

		var thisStyle = el.currentStyle;

		var bg = {'X':0, 'Y':0};