/**
 * @author dylan
 * borderWindows version 0.1.1
 */

function borderWindow(elementId,images,borderSize) {	
	// get element
	originalElement = document.getElementById(elementId);
	//originalElement.id=elementId+"Container";
	
	if (!originalElement) {
		alert('didnt get parent element');
	}
	
	// gather information about the parent element
	// these styles are given to the child element that holds the original content
	originalInnerHTML = originalElement.innerHTML;
	originalBackgroundColor = getStyle(originalElement,"background-color");
	originalBackgroundImage = getStyle(originalElement,"background-image");
	
	// clear parent element content and reset some styles
	originalElement.innerHTML = "";
	sP = originalElement.style;
	sP.backgroundColor = getStyle(originalElement.parentNode,"background-color"); // give it the background-color of its parent element
	sP.backgroundImage = "none";
	
	// calculate sizes of borders
	var originalWidth=originalElement.offsetWidth;
	var originalWidthMinusBorders=originalWidth-(borderSize*2);
	var originalWidthMinusCorners=originalWidth-(borderSize*4);
	
	var originalHeight=originalElement.offsetHeight;
	var originalHeightMinusBorders=originalHeight-(borderSize*2);
	var originalHeightMinusCorners=originalHeight-(borderSize*4);
	
	// create 9 child elements and apply styles
	var childElements = new Array;
	for (var i=0; i<20; i++) {
		
		// create the element and add it to the appropriate place in the dom tree
		var el = document.createElement('div');
		//if (i==10) {
		//	el.id=elementId;
		//} else {
			el.id=elementId+"Child"+i;
		//}	
		
		if (i==7 || i==8 || i==9) {
			var leftBorderEl = document.getElementById(elementId+"Child6");
			leftBorderEl.appendChild(el);
		} else if (i==12 || i==13 || i==14) {
			var leftBorderEl = document.getElementById(elementId+"Child11");
			leftBorderEl.appendChild(el);
		} else {
			originalElement.appendChild(el);
		}
		
		// apply these attributes to all child elements
		var s=el.style;
		s.cssFloat="left";
		s.styleFloat="left";
		
		// apply these attributes to all border elements
		if (i!=10) {
			s.lineHeight="0em";
			s.fontSize="0em";
			s.backgroundImage="none";
		}
		
		// create each element and give it the appropriate styles
		if (i==1) {
			s.width=borderSize+"px";
			s.height=borderSize+"px";
			s.background="url('"+images[0]+"') no-repeat";
		} else if (i==2) {
			s.width=borderSize+"px";
			s.height=borderSize+"px";
			s.background="url('"+images[1]+"') no-repeat";
		} else if (i==3) {
			s.width=originalWidthMinusCorners+"px";
			s.height=borderSize+"px";
			s.background="url('"+images[2]+"') repeat-x";
		} else if (i==4) {
			s.width=borderSize+"px";
			s.height=borderSize+"px";
			s.background="url('"+images[3]+"') no-repeat";
		} else if (i==5) {
			s.width=borderSize+"px";
			s.height=borderSize+"px";
			s.background="url('"+images[4]+"') no-repeat";
		} else if (i==6) {
			s.width=borderSize+"px";
			s.height=originalHeightMinusBorders+"px";
		} else if (i==7) {
			s.width=borderSize+"px";
			s.height=borderSize+"px";
			s.background="url('"+images[5]+"') no-repeat";
		} else if (i==8) {
			s.width=borderSize+"px";
			s.height=originalHeightMinusCorners+"px";
			s.background="url('"+images[6]+"') repeat-y";
		} else if (i==9) {
			s.width=borderSize+"px";
			s.height=borderSize+"px";
			s.background="url('"+images[7]+"') no-repeat";
		} else if (i==10) {
			// this is the element that holds the original content
			s.width=originalWidthMinusBorders+"px";
			s.height=originalHeightMinusBorders+"px";
			el.innerHTML=originalInnerHTML;
			s.backgroundColor=originalBackgroundColor;
			s.backgroundImage=originalBackgroundImage;
		} else if (i==11) {
			s.width=borderSize+"px";
			s.height=originalHeightMinusBorders+"px";
		} else if (i==12) {
			s.width=borderSize+"px";
			s.height=borderSize+"px";
			s.background="url('"+images[8]+"') no-repeat";
		} else if (i==13) {
			s.width=borderSize+"px";
			s.height=originalHeightMinusCorners+"px";
			s.background="url('"+images[9]+"') repeat-y";
		} else if (i==14) {
			s.width=borderSize+"px";
			s.height=borderSize+"px";
			s.background="url('"+images[10]+"') no-repeat";
		} else if (i==15) {
			s.width=borderSize+"px";
			s.height=borderSize+"px";
			s.background="url('"+images[11]+"') no-repeat";
		} else if (i==16) {
			s.width=borderSize+"px";
			s.height=borderSize+"px";
			s.background="url('"+images[12]+"') no-repeat";
		} else if (i==17) {
			s.width=originalWidthMinusCorners+"px";
			s.height=borderSize+"px";
			s.background="url('"+images[13]+"') repeat-x";
		} else if (i==18) {
			s.width=borderSize+"px";
			s.height=borderSize+"px";
			s.background="url('"+images[14]+"') no-repeat";
		} else if (i==19) {
			s.width=borderSize+"px";
			s.height=borderSize+"px";
			s.background="url('"+images[15]+"') no-repeat";
		}
	}
}

// returns the value of an element's style
// hacked from http://www.quirksmode.org/dom/getstyles.html
function getStyle(el,styleProp)
{
	var x = el;
	if (x.currentStyle) {
		// IE
		aStyleProp = styleProp.split("-");
		styleProp = aStyleProp[0]+aStyleProp[1].substr(0,1).toUpperCase()+aStyleProp[1].substr(1,aStyleProp[1].length-1);
		var y = x.currentStyle[styleProp];
	}
	else if (window.getComputedStyle) {
		// Mozilla y Opera
		var y = document.defaultView.getComputedStyle(x,null).getPropertyValue(styleProp);
	}
	return y;
}