/*
sample usage:

inish: gPromo = new promoBox(promoARY, "gPromo", 10)
	promoBox(
		ary from xml (sample -- with used vars)
			podheader:"Incentives and Offers",
			header:"Great Vehicles - Great offers",
			action:"/incentives/offers/",
			image:"/assets/images/promo/hp_promo_1.jpg",
			text:"Great deals on great Ford vehicles are going on now at a dealership near you."
		str	name of variable being set
		
		int	animation speed
	)

To display the promobox, include this in your page where you want the boxes to show up.
	
document.write(gPromo.draw()) <-- promoHTML
gPromo.setConstants() <-- store widths and heights of outputed html

*/
function promoBox(oAry, sName, iRate, my_sens){
	this.ary = oAry
	this.name = sName
	this.rate = 40 //iRate*2
	this.animationTO = this.TO = 0
	var userAgent = window.navigator.userAgent
	this.browser = 0  //firefox
	if(userAgent.search(/MSIE/g) > -1){
		this.browser = 1
	} else {
		if(userAgent.search(/Netscape/g) > -1) this.browser = 2
	}
	this.que = {} //object of promotion boxes that are animating
	this.curOn = 0 //object of the promobox that is animating up or null
	this.draw = function(){
		
		//change this stuff if you want a different look
		var z = 1
		var ary = ['<table cellpadding=0 cellspacing=0 border=0><tr>']
		//alert(this.ary.length)
		for(var i = 0;i<this.ary.length;i++){
			if(!this.ary[i]) break;
			if(i!=0){
				if(my_sens!=1){ 
			ary[ary.length] = '</tr><tr><TD style="width:20px;"><img src="images/spacer.gif" width="20" alt=""></td></tr><tr>'
				}else{
			ary[ary.length] = '<TD style="width:32px;"><img src="images/spacer.gif" width="32" alt=""></td>'
				}
			} 
			ary[ary.length] = '<TD width=215 align=left>'
			ary[ary.length] = '	<table cellpadding=0 cellspacing=0 border=0>'
			ary[ary.length] = '		<tr>'
			ary[ary.length] = '			<td width=215 id="promoCon_'+i+'" onclick="'+this.name+'.click('+i+')" onmouseover="'+this.name+'.overOut(this, event, '+i+')" onmouseout="'+this.name+'.overOut(this, event, '+i+')" style="cursor:pointer">'
			ary[ary.length] = '				<div style="position:relative;z-index:'+(z+1)+'">'
			ary[ary.length] = '					<div style="z-index:'+(z+2)+'">'
			ary[ary.length] = '						<table cellpadding=0 cellspacing=0 border=0>'
			ary[ary.length] = '							<tr>'
			ary[ary.length] = '								<td class="promo_headLine_off" style="width:215px; height:27px;background-image:url(\'images/top_carre.gif\');" align="center">'+this.ary[i].podheader+'</td>'
			ary[ary.length] = '							</tr>'
			ary[ary.length] = '						</table>'
			ary[ary.length] = '					</div> '
			ary[ary.length] = '					<div id="promoHead_on_'+i+'" class="promo_box_head_on" style="z-index:'+(z+3)+'">'
			ary[ary.length] = '						<table cellpadding=0 cellspacing=0 border=0>'
			ary[ary.length] = '							<tr>'
			ary[ary.length] = '								<td class="promo_headLine_on" style="width:215px; height:27px;background-image:url(\'images/top_carre_over.gif\');" align="center">'+this.ary[i].podheader+'</td>'
			ary[ary.length] = '							</tr>'
			ary[ary.length] = '						</table>'
			ary[ary.length] = '						<div id="promoArrow_'+i+'" class="promo_box_arrow_on" style="top:-10px;z-index:'+(z+10)+'"><img src="images/spacer.gif"></div>'
			ary[ary.length] = '					</div>'
			ary[ary.length] = '				</div>'
			ary[ary.length] = '				<table height=108 width=215 cellpadding=0 cellspacing=0 border=0 >'
			ary[ary.length] = '					<tr>'
			ary[ary.length] = '						<td style="height:108px; width:4px; background-image:url(images/carre_border_left.gif);"><img src="images/spacer.gif" width="4" alt=""></td>'
			ary[ary.length] = '						<td colspan=3 class="promo_box_image_td" valign="top" style="height:117px; width:207px;">'
			ary[ary.length] = '							<div style="position:relative;z-index:'+(z+4)+'">'
			ary[ary.length] = '								<div style="z-index:'+(z+5)+'; padding-left:2px;">'
			ary[ary.length] = '									<img src="upload/uploads/image/tunnels/'+this.ary[i].image+'"><BR>'
			ary[ary.length] = '									<div class="promo_subHead" align="left">'+this.ary[i].header+'</div>'
			ary[ary.length] = '								</div>'								
			ary[ary.length] = '								<div id="promoCopy_on_'+i+'" style="position:absolute; top:117px;width:207px;height:0px;overflow:hidden;background-color:#FFFFFF;display:none;z-index:'+(z+8)+'">'//padding-left:4px; padding-right:4px; 
			ary[ary.length] = '									<table cellpadding=0 cellspacing=0 border=0 height=100%>'
			ary[ary.length] = '										<TR>'
			ary[ary.length] = '											<TD valign=top>'
			ary[ary.length] = '												<div class="promo_subHead">'
			ary[ary.length] = 													this.ary[i].header
			ary[ary.length] = '												</div>'
			ary[ary.length] = '												<div class="promo_text">'
			ary[ary.length] = 													this.ary[i].text
			ary[ary.length] = '												</div>'
			ary[ary.length] = '											</td>'
			ary[ary.length] = '										</tr>'
			ary[ary.length] = '										<tr>'
			ary[ary.length] = '											<td valign=bottom style="padding-left:4px;font-family:verdana;font-size:10px;color:#666666;">'
													//var sGoImg = 'btn_go.gif';
													//if (this.ary[i].actionlabel.toLowerCase().indexOf("go")==-1)
														//sGoImg = 'btn_learn_more.jpg';		
			ary[ary.length] = '												'+this.ary[i].actionlabel//<img src="images/' + sGoImg +'">'
			ary[ary.length] = '											</td>'
			ary[ary.length] = '										</tr>'
			ary[ary.length] = '									</table>'
			ary[ary.length] = '								</div>'
			ary[ary.length] = '							</div>'
			ary[ary.length] = '						</td>'
			ary[ary.length] = '						<td style="height:108px; width:4px; background-image:url(images/carre_border_right.gif);"><img src="images/spacer.gif" width="4" alt=""></td>'
			ary[ary.length] = '					</tr>'
			ary[ary.length] = '				</table>'
			ary[ary.length] = '				<table cellpadding=0 cellspacing=0 border=0 width=215 height=10>'
			ary[ary.length] = '					<tr>'
			ary[ary.length] = '						<td style="height:10px; width:4px; background-image:url(images/carre_border_left.gif);"><img src="images/spacer.gif" width="4" height="10" alt=""></td>'
			ary[ary.length] = '						<td style="height:10px; width:207px; padding-bottom:3px;" align="right">'
			ary[ary.length] = '							<div id="promo_line_'+i+'" style="width:99px;height:1px;overflow:hidden;-moz-opacity:1.0;opacity:1.0;filter:alpha(opacity=100);z-index:6"></div>'
			ary[ary.length] = '							<div id="promo_more_'+i+'" style="padding-right:5px;width:100px;-moz-opacity:1.0;opacity:1.0;filter:alpha(opacity=100);z-index:7"><TABLE width=100% cellpadding=0 cellspacing=0 border=0><TR><TD align=right style="font-family:verdana;font-size:10px;color:#666666;">'+this.ary[i].actionlabel+'</td></tr></table>'
			ary[ary.length] = '						</td>'
			ary[ary.length] = '						<td style="height:10px; width:4px; background-image:url(images/carre_border_right.gif);"><img src="images/spacer.gif" width="4" height="10" alt=""></td>'
			ary[ary.length] = '					</tr>'
			ary[ary.length] = '					<tr>'
			ary[ary.length] = '						<td colspan="3"><img src="images/carre_border_bottom.gif"></td>'
			ary[ary.length] = '					</tr>'
			ary[ary.length] = '				</table>'
			ary[ary.length] = '			</td>'
			ary[ary.length] = '		</tr>'
			ary[ary.length] = '	</table>'
			ary[ary.length] = '</td>'
			z+=10
		}
		ary[ary.length] = '	</tr></table>'
		return ary.join("\n")
	}
	this.setConstants = function(){
		//get the mesurements of the promotion boxes.
		if(!this.constants){
			this.constants = []
			for(var i = 0;i<this.ary.length;i++){
				if(!this.ary[i]) break;
				var offSet = parseInt(document.getElementById("promoCopy_on_"+i).style.top)
				this.constants[this.constants.length] = {	
					lineWidth:document.getElementById("promo_line_"+i).offsetWidth,
					textHeight:document.getElementById("promoCopy_on_1").offsetHeight,
					textOffset:offSet,
					arrowOffset:parseInt(document.getElementById("promoArrow_"+i).style.top),
					arrowRate:Math.abs(parseFloat(document.getElementById("promoArrow_"+i).style.top)/(offSet/this.rate))
				}
			}
		}
	}
	this.click = function(iInt){
		//called when the user clicks the promo with the index of the promo box inside the this.ary
		var action = this.ary[iInt].action
		if(action.search(/javascript:/gi) > -1){
			eval(action)
		} else {
			document.location = action
		}
	}
	this.overOut = function(oObj, oEvent, iInt){
		/*
		called onmouseOver and onmouseOut
			oObj	the table objectect that contains the promo
			oEvent	the event object
			iInt	the promo index of this.ary
		*/
		bIsAnimating = 0
		for(e in this.que){
			bIsAnimating = 1
			break
		}
		if(oEvent.type.toLowerCase() == "mouseover"){
			if(!this.constants){
				 this.setConstants()
			}
			if(this.que[oObj.id] && this.que[oObj.id].direction == 1){
				clearTimeout(this.TO)
				return
			}
			if(this.curOn  && this.que[this.curOn]){
				this.que[this.curOn].direction = -1
				clearTimeout(this.TO)
				bIsAnimating = 0
			}
			this.curOn = oObj.id
			document.getElementById("promoCopy_on_"+iInt).style.display = "";
			if(this.que[oObj.id]){
				this.que[oObj.id].direction = 1
			} else {
				this.que[oObj.id] = {
					direction:1,
					iInt:iInt,
					lineWidth:this.constants[iInt].lineWidth,
					textHeight:this.constants[iInt].textHeight,
					textOffset:this.constants[iInt].textOffset,
					top:this.constants[iInt].textOffset,
					arrow:this.constants[iInt].arrowOffset,
					arrowRate:this.constants[iInt].arrowRate,
					time:0
				}
			}
		} else {
			this.TO = setTimeout(this.name+".out()",50)
		}
		if(!bIsAnimating) this.animate()
	}
	this.out = function(){
		//delay method to handle bubble events
		this.que[this.curOn].direction = -1
		this.curOn = 0 
		this.animate()
	}
	this.animate = function(){
		clearTimeout(this.animationTO)
		//guess what this does ;)
		counter = 0
		for(var e in this.que){
			targ = this.que[e]
			var header = document.getElementById("promoHead_on_"+targ.iInt)
			var line = document.getElementById("promo_line_"+targ.iInt)
			var text = document.getElementById("promoCopy_on_"+targ.iInt)
			var arrow = document.getElementById("promoArrow_"+targ.iInt)
			var more = document.getElementById("promo_more_"+targ.iInt)
			var inverse = -targ.direction
			targ.time += this.rate*targ.direction
			if(targ.time > targ.textOffset) targ.time = targ.textOffset
			if(targ.time < 0) targ.time = 0
			targ.arrow += targ.arrowRate * targ.direction
			var w = targ.lineWidth - (targ.time)
			if(w < 0) w = 0
			line.style.width = w
			text.style.top = targ.top - (targ.time)
			text.style.height = targ.time
			arrow.style.top = targ.arrow
			text.style.zIndex = text.style.zIndex
			arrow.style.zIndex = arrow.style.zIndex
			switch(this.browser){
				case 0:
					var pUp = targ.time/100
					var pDown = 1+((targ.time/100)*inverse)
					if(pUp > 1) pUp = 1
					if(pDown > 1) pDown = 1
					header.style.opacity = pUp
					more.style.opacity = pDown
					line.style.opacity = pDown
				break
				case 1:
					var pUp = targ.time
					var pDown = (100)+(targ.time*inverse)
					if(pUp > 100) pUp = 100
					if(pDown > 100) pDown = 100
					header.filters[0].opacity = pUp
					more.filters[0].opacity = pDown
					line.filters[0].opacity = pDown
				break
				case 2:
					var pUp = targ.time/100
					var pDown = 1+((targ.time/100)*inverse)
					if(pUp > 1) pUp = 1
					if(pDown > 1) pDown = 1
					header.style.MozOpacity = pUp
					more.style.MozOpacity = pDown
					line.style.MozOpacity = pDown
				break
			}
			if(targ.time == 0 || targ.time == targ.textOffset){
				if(targ.time == 0){
					delete(this.que[e])
					document.getElementById("promoCopy_on_"+targ.iInt).style.display = "none"
				}	
			} else {
				counter++
			}
		}
		if(counter) this.animationTO = setTimeout(this.name+".animate()", 1)
	}
}