var Headr = {
	//configurable properties
	leftSrc:	false,	//path to the left corner graphic
	rightSrc:	false,	//path to the right corner graphic
	bkgrdClr:	'#ffffff', //headr span background-color
	
	//internal properties
	elements: 	{
			span:	document.createElement('span')
	},
	imgObjs: 	[
		{w:false, h:false},
		{w:false, h:false}
	],
	
	isWindowLoaded:	false,

	initialize: function(params){
		this.leftSrc = params.leftSrc;
		this.rightSrc = params.rightSrc;
		this.bkgrdClr = (typeof(params.bkgrdClr) != 'undefined') ? params.bkgrdClr : this.bkgrdClr;
		
		this.testWindowLoaded();
		this.preloadImages();
	}, //end of initialize
	
	testWindowLoaded: function(){
		Event.observe(window,'load',
			function(){
				this.isWindowLoaded = true;
			}.bind(this)
		);
	}, //end of testWindowLoaded
		
	preloadImages: function(){
		var imgSrcs = [this.leftSrc,this.rightSrc];
		var imgObj = [];
		imgSrcs.each(
			function(item,i){
				imgObj[i] = new Image();
				imgObj[i].onload = function(){
						this.imgObjs[i].w = imgObj[i].width;
						this.imgObjs[i].h = imgObj[i].height;
						
						//if window.onload has already fired then proceed, otherwise proceed on load.
						if (i == this.imgObjs.length-1){
							if (this.isWindowLoaded == true){
								this.callLoadEvent();
							}else{
								Event.observe(window,'load',
									function(){
										this.callLoadEvent();
									}.bind(this)
								);
							}
						}	
				}.bind(this)
				imgObj[i].src = item;
			}.bind(this)
		)
	}, //end of preloadImages
	
	callLoadEvent: function(){	
		var headers = $$('.headr');
		headers.each(
			function(item,i){
				var headrParams = {
					header:		item,
					spanLeft:	this.elements.span.cloneNode(true),
					spanMid:	this.elements.span.cloneNode(true),
					spanRight:	this.elements.span.cloneNode(true)
				}
				var headrInstance = new HeadrObj(headrParams);
			}.bind(this)
		)
	} //end of callLoadEvent
} //end of Headr

var HeadrObj = Class.create();
HeadrObj.prototype = {

	headrElements:		{
		header:				{el:false, width:false, height:false, x:0, y:0},
		spanLeft:			{el:false, width:false, height:false, x:false, y:0},
		spanMid:			{el:false, width:false, height:false, x:false, y:0},
		spanRight:			{el:false, width:false, height:false, x:false, y:0}
	},
	
	//internal properties
	headerParent:		{
		el:false, 
		width:false
	},
	
	imgLDimensions:		false,
	imgRDimensions: 	false,
	

	initialize: function (params){
		this.headrElements.header.el = params.header;
		this.headrElements.header.el.setStyle({display:'inline'});
		this.headrElements.header.width = $(this.headrElements.header.el).getWidth();
		this.headrElements.header.height = Headr.imgObjs[0].h;
		
		this.headerParent.el = $(this.headrElements.header.el.parentNode);
		this.headerParent.el.setStyle({position:'relative'});
		this.headerParent.width = this.headerParent.el.getWidth();
				
		this.headrElements.spanLeft.el = $(params.spanLeft);
		this.headrElements.spanLeft.width = Headr.imgObjs[0].w;
		this.headrElements.spanLeft.height = Headr.imgObjs[0].h;
		
		this.headrElements.spanRight.el = $(params.spanRight);
		this.headrElements.spanRight.width = Headr.imgObjs[1].w;
		this.headrElements.spanRight.height = Headr.imgObjs[1].h;

		this.headrElements.spanMid.el = $(params.spanMid);
		this.headrElements.spanMid.height = Headr.imgObjs[0].h;
		this.headrElements.spanMid.width = (this.headerParent.width - this.headrElements.header.width - this.headrElements.spanLeft.width - this.headrElements.spanRight.width);
		
		//alert (this.headrElements.spanLeft.width);
		
		//set element offsets
		this.headrElements.spanLeft.x = this.headrElements.header.x + this.headrElements.header.width;
		this.headrElements.spanMid.x = this.headrElements.spanLeft.x + this.headrElements.spanLeft.width;
		this.headrElements.spanRight.x = this.headrElements.spanMid.x + this.headrElements.spanMid.width;
		
		this.makeLeftCorner();
		this.makeMiddleSpan();
		this.makeRightCorner();
	},

	makeLeftCorner: function(){
		this.headerParent.el.insert({bottom:this.headrElements.spanLeft.el});
		this.headrElements.spanLeft.el.setAttribute('class', 'headr-leftSpan');
		this.headrElements.spanLeft.el.setStyle({
			display:			'block',
			position:			'absolute',
			width:				this.headrElements.spanLeft.width+'px',
			height:				this.headrElements.spanLeft.height+'px',
			left:				this.headrElements.spanLeft.x+'px',
			top:				this.headrElements.spanLeft.y+'px',
			backgroundImage:	'url('+Headr.leftSrc+')'
		});

	}, //end of makeLeftCorner

	makeMiddleSpan: function(){
		this.headerParent.el.insert({bottom:this.headrElements.spanMid.el});
		this.headrElements.spanMid.el.setAttribute('class', 'headr-middleSpan');
		this.headrElements.spanMid.el.setStyle({
			display:			'block',
			position:			'absolute',
			width:				this.headrElements.spanMid.width+'px',
			height:				this.headrElements.spanMid.height+'px',
			left:				this.headrElements.spanMid.x+'px',
			top:				this.headrElements.spanMid.y+'px',
			backgroundColor:	Headr.bkgrdClr
		});

	}, //end of makeMiddleSpan

	makeRightCorner: function(){
		this.headerParent.el.insert({bottom:this.headrElements.spanRight.el});
		this.headrElements.spanRight.el.setAttribute('class', 'headr-rightSpan');
		this.headrElements.spanRight.el.setStyle({
			display:			'block',
			position:			'absolute',
			width:				this.headrElements.spanRight.width+'px',
			height:				this.headrElements.spanRight.height+'px',
			left:				this.headrElements.spanRight.x+'px',
			top:				this.headrElements.spanRight.y+'px',
			backgroundImage:	'url('+Headr.rightSrc+')'
		});

	} //end of makeRightCorner
} //end of HeadrObj
var headr1 = Headr.initialize({
	leftSrc: 'http://www.shrineaudio.com/img/leftCorner10pxRadius.png',
	rightSrc: 'http://www.shrineaudio.com/img/rightCorner10pxRadius.png'
});