// javascript document
/**
* dd_belatedpng: adds ie6 support: png images for css background-image and html <img/>.
* author: drew diller
* email: drew.diller@gmail.com
* url: http://www.dillerdesign.com/experiment/dd_belatedpng/
* version: 0.0.8a
* licensed under the mit license: http://dillerdesign.com/experiment/dd_belatedpng/#license
*
* example usage:
* dd_belatedpng.fix('.png_bg'); // argument is a css selector
* dd_belatedpng.fixpng( somenode ); // argument is an htmldomelement
**/

/*
please read:
absolutely everything in this script is silly.  i know this.  ie's rendering of certain pixels doesn't make sense, so neither does this code!
*/

var dd_belatedpng = {
	ns: 'dd_belatedpng',
	imgsize: {},
	delay: 10,
	nodesfixed: 0,
	createvmlnamespace: function () { /* enable vml */
		if (document.namespaces && !document.namespaces[this.ns]) {
			document.namespaces.add(this.ns, 'urn:schemas-microsoft-com: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 screenstylesheet, printstylesheet;
		screenstylesheet = document.createelement('style');
		screenstylesheet.setattribute('media', 'screen');
		document.documentelement.firstchild.insertbefore(screenstylesheet, document.documentelement.firstchild.firstchild);
		if (screenstylesheet.stylesheet) {
			screenstylesheet = screenstylesheet.stylesheet;
			screenstylesheet.addrule(this.ns + '\\:*', '{behavior:url(#default#vml)}');
			screenstylesheet.addrule(this.ns + '\\:shape', 'position:absolute;');
			screenstylesheet.addrule('img.' + this.ns + '_sizefinder', 'behavior:none; border:none; position:absolute; z-index:-1; top:-10000px; visibility:hidden;'); /* large negative top value for avoiding vertical scrollbars for large images, suggested by james o'brien, http://www.thanatopsic.org/hendrik/ */
			this.screenstylesheet = screenstylesheet;
			
			/* add a print-media stylesheet, for preventing vml artifacts from showing up in print (including preview). */
			/* thanks to r閙i pr関ost for automating this! */
			printstylesheet = document.createelement('style');
			printstylesheet.setattribute('media', 'print');
			document.documentelement.firstchild.insertbefore(printstylesheet, document.documentelement.firstchild.firstchild);
			printstylesheet = printstylesheet.stylesheet;
			printstylesheet.addrule(this.ns + '\\:*', '{display: none !important;}');
			printstylesheet.addrule('img.' + this.ns + '_sizefinder', '{display: none !important;}');
		}
	},
	readpropertychange: function () {
		var el, display, v;
		el = event.srcelement;
		if (!el.vmlinitiated) {
			return;
		}
		if (event.propertyname.search('background') != -1 || event.propertyname.search('border') != -1) {
			dd_belatedpng.applyvml(el);
		}
		if (event.propertyname == 'style.display') {
			display = (el.currentstyle.display == 'none') ? 'none' : 'block';
			for (v in el.vml) {
				if (el.vml.hasownproperty(v)) {
					el.vml[v].shape.style.display = display;
				}
			}
		}
		if (event.propertyname.search('filter') != -1) {
			dd_belatedpng.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;
			el.vml.color.shape.style.filter = el.currentstyle.filter; /* complete guesswork */
			el.vml.image.fill.opacity = trans; /* complete guesswork */
		}
	},
	handlepseudohover: function (el) {
		settimeout(function () { /* wouldn't work as intended without settimeout */
			dd_belatedpng.applyvml(el);
		}, 1);
	},
	/**
	* this is the method to use in a document.
	* @param {string} selector - required - a css selector, such as '#doc .container'
	**/
	fix: function (selector) {
		if (this.screenstylesheet) {
			var selectors, i;
			selectors = selector.split(','); /* multiple selectors supported, no need for multiple calls to this anymore */
			for (i=0; i<selectors.length; i++) {
				this.screenstylesheet.addrule(selectors[i], 'behavior:expression(dd_belatedpng.fixpng(this))'); /* seems to execute the function without adding it to the stylesheet - interesting... */
			}
		}
	},
	applyvml: function (el) {
		el.runtimestyle.csstext = '';
		this.vmlfill(el);
		this.vmloffsets(el);
		this.vmlopacity(el);
		if (el.isimg) {
			this.copyimageborders(el);
		}
	},
	attachhandlers: function (el) {
		var self, handlers, handler, moreforas, a, h;
		self = this;
		handlers = {resize: 'vmloffsets', move: 'vmloffsets'};
		if (el.nodename == 'a') {
			moreforas = {mouseleave: 'handlepseudohover', mouseenter: 'handlepseudohover', focus: 'handlepseudohover', blur: 'handlepseudohover'};
			for (a in moreforas) {			
				if (moreforas.hasownproperty(a)) {
					handlers[a] = moreforas[a];
				}
			}
		}
		for (h in handlers) {
			if (handlers.hasownproperty(h)) {
				handler = function () {
					self[handlers[h]](el);
				};
				el.attachevent('on' + h, handler);
			}
		}
		el.attachevent('onpropertychange', this.readpropertychange);
	},
	givelayout: function (el) {
		el.style.zoom = 1;
		if (el.currentstyle.position == 'static') {
			el.style.position = 'relative';
		}
	},
	copyimageborders: function (el) {
		var styles, s;
		styles = {'borderstyle':true, 'borderwidth':true, 'bordercolor':true};
		for (s in styles) {
			if (styles.hasownproperty(s)) {
				el.vml.color.shape.style[s] = el.currentstyle[s];
			}
		}
	},
	vmlfill: function (el) {
		if (!el.currentstyle) {
			return;
		} else {
			var elstyle, noimg, lib, v, img, imgloaded;
			elstyle = el.currentstyle;
		}
		for (v in el.vml) {
			if (el.vml.hasownproperty(v)) {
				el.vml[v].shape.style.zindex = elstyle.zindex;
			}
		}
		el.runtimestyle.backgroundcolor = '';
		el.runtimestyle.backgroundimage = '';
		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;
			}
			lib = this;
			if (!lib.imgsize[el.vmlbg]) { /* determine size of loaded image */
				img = document.createelement('img');
				lib.imgsize[el.vmlbg] = img;
				img.classname = lib.ns + '_sizefinder';
				img.runtimestyle.csstext = 'behavior:none; position:absolute; left:-10000px; top:-10000px; border:none; margin:0; padding:0;'; /* make sure to set behavior to none to prevent accidental matching of the helper elements! */
				imgloaded = function () {
					this.width = this.offsetwidth; /* weird cache-busting requirement! */
					this.height = this.offsetheight;
					lib.vmloffsets(el);
				};
				img.attachevent('onload', imgloaded);
				img.src = el.vmlbg;
				img.removeattribute('width');
				img.removeattribute('height');
				document.body.insertbefore(img, document.body.firstchild);
			}
			el.vml.image.fill.src = el.vmlbg;
			noimg = false;
		}
		el.vml.image.fill.on = !noimg;
		el.vml.image.fill.color = 'none';
		el.vml.color.shape.style.backgroundcolor = elstyle.backgroundcolor;
		el.runtimestyle.backgroundimage = 'none';
		el.runtimestyle.backgroundcolor = 'transparent';
	},
	/* ie can't figure out what do when the offsetleft and the clientleft add up to 1, and the vml ends up getting fuzzy... so we have to push/enlarge things by 1 pixel and then clip off the excess */
	vmloffsets: function (el) {
		var thisstyle, size, fudge, makevisible, bg, bgr, dc, altc, b, c, v;
		thisstyle = el.currentstyle;
		size = {'w':el.clientwidth+1, 'h':el.clientheight+1, 'w':this.imgsize[el.vmlbg].width, 'h':this.imgsize[el.vmlbg].height, 'l':el.offsetleft, 't':el.offsettop, 'blw':el.clientleft, 'btw':el.clienttop};
		fudge = (size.l + size.blw == 1) ? 1 : 0;
		/* vml shape, left, top, width, height, origin */
		makevisible = function (vml, l, t, w, h, o) {
			vml.coordsize = w+','+h;
			vml.coordorigin = o+','+o;
			vml.path = 'm0,0l'+w+',0l'+w+','+h+'l0,'+h+' xe';
			vml.style.width = w + 'px';
			vml.style.height = h + 'px';
			vml.style.left = l + 'px';
			vml.style.top = t + 'px';
		};
		makevisible(el.vml.color.shape, (size.l + (el.isimg ? 0 : size.blw)), (size.t + (el.isimg ? 0 : size.btw)), (size.w-1), (size.h-1), 0);
		makevisible(el.vml.image.shape, (size.l + size.blw), (size.t + size.btw), (size.w), (size.h), 1 );
		bg = {'x':0, 'y':0};
		if (el.isimg) {
			bg.x = parseint(thisstyle.paddingleft, 10) + 1;
			bg.y = parseint(thisstyle.paddingtop, 10) + 1;
		}
		else {
			for (b in bg) {
				if (bg.hasownproperty(b)) {
					this.figurepercentage(bg, size, b, thisstyle['backgroundposition'+b]);
				}
			}
		}
		el.vml.image.fill.position = (bg.x/size.w) + ',' + (bg.y/size.h);
		bgr = thisstyle.backgroundrepeat;
		dc = {'t':1, 'r':size.w+fudge, 'b':size.h, 'l':1+fudge}; /* these are defaults for repeat of any kind */
		altc = { 'x': {'b1': 'l', 'b2': 'r', 'd': 'w'}, 'y': {'b1': 't', 'b2': 'b', 'd': 'h'} };
		if (bgr != 'repeat' || el.isimg) {
			c = {'t':(bg.y), 'r':(bg.x+size.w), 'b':(bg.y+size.h), 'l':(bg.x)}; /* these are defaults for no-repeat - clips down to the image location */
			if (bgr.search('repeat-') != -1) { /* now let's revert to dc for repeat-x or repeat-y */
				v = bgr.split('repeat-')[1].touppercase();
				c[altc[v].b1] = 1;
				c[altc[v].b2] = size[altc[v].d];
			}
			if (c.b > size.h) {
				c.b = size.h;
			}
			el.vml.image.shape.style.clip = 'rect('+c.t+'px '+(c.r+fudge)+'px '+c.b+'px '+(c.l+fudge)+'px)';
		}
		else {
			el.vml.image.shape.style.clip = 'rect('+dc.t+'px '+dc.r+'px '+dc.b+'px '+dc.l+'px)';
		}
	},
	figurepercentage: function (bg, size, axis, position) {
		var horizontal, fraction;
		fraction = true;
		horizontal = (axis == 'x');
		switch(position) {
			case 'left':
			case 'top':
				bg[axis] = 0;
				break;
			case 'center':
				bg[axis] = 0.5;
				break;
			case 'right':
			case 'bottom':
				bg[axis] = 1;
				break;
			default:
				if (position.search('%') != -1) {
					bg[axis] = parseint(position, 10) / 100;
				}
				else {
					fraction = false;
				}
		}
		bg[axis] = math.ceil(  fraction ? ( (size[horizontal?'w': 'h'] * bg[axis]) - (size[horizontal?'w': 'h'] * bg[axis]) ) : parseint(position, 10)  );
		if (bg[axis] % 2 === 0) {
			bg[axis]++;
		}
		return bg[axis];
	},
	fixpng: function (el) {
		el.style.behavior = 'none';
		var lib, els, nodestr, v, e;
		if (el.nodename == 'body' || el.nodename == 'td' || el.nodename == 'tr') { /* elements not supported yet */
			return;
		}
		el.isimg = false;
		if (el.nodename == 'img') {
			if(el.src.tolowercase().search(/\.png$/) != -1) {
				el.isimg = true;
				el.style.visibility = 'hidden';
			}
			else {
				return;
			}
		}
		else if (el.currentstyle.backgroundimage.tolowercase().search('.png') == -1) {
			return;
		}
		lib = dd_belatedpng;
		el.vml = {color: {}, image: {}};
		els = {shape: {}, fill: {}};
		for (v in el.vml) {
			if (el.vml.hasownproperty(v)) {
				for (e in els) {
					if (els.hasownproperty(e)) {
						nodestr = lib.ns + ':' + e;
						el.vml[v][e] = document.createelement(nodestr);
					}
				}
				el.vml[v].shape.stroked = false;
				el.vml[v].shape.appendchild(el.vml[v].fill);
				el.parentnode.insertbefore(el.vml[v].shape, el);
			}
		}
		el.vml.image.shape.fillcolor = 'none'; /* don't show blank white shapeangle when waiting for image to load. */
		el.vml.image.fill.type = 'tile'; /* makes image show up. */
		el.vml.color.fill.on = false; /* actually going to apply vml element's style.backgroundcolor, so hide the whiteness. */
		lib.attachhandlers(el);
		lib.givelayout(el);
		lib.givelayout(el.offsetparent);
		el.vmlinitiated = true;
		lib.applyvml(el); /* render! */
	}
};
try {
	document.execcommand("backgroundimagecache", false, true); /* tredosoft multiple ie doesn't like this, so try{} it */
} catch(r) {}
dd_belatedpng.createvmlnamespace();
dd_belatedpng.createvmlstylesheet();