/*
* $('cf-itunes') is the base DL container
*/

if(typeof(ITunes) == "undefined") ITunes = {};

ITunes.Modal = {
	
	// configurable things
	bgColor: "#f00",  // #000518 // #A0A5A9
	borderColor: "#f00",
	startWidth: 358,
	startHeight: 167,
	modalHeight: 167,
	modalWidth: 358,
	yOffset: 0,
	xOffset: 0,
	fadeToOpacity: 100,
	
	// changes below here may break things
	overlayAlpha: 100,
	overlayWidth: 360,
	overlayHeight: 157,
	growWidth: 510,
	growHeight: 345,
	overlay: null,
	dlFrame: null,
	overlayX: 0,
	overlayY: 0,
	frameAlpha: 100,
	animationId: false,
		
	init: function(color, borderColor, startWidth, startHeight, offset) {
				
		if (color) this.bgColor = color;
		if (borderColor) this.borderColor = borderColor;
		if (startWidth) this.startWidth = startWidth;
		if (startHeight) this.startHeight = startHeight;
		if (offset) this.yOffset = offset;
				
		if (AC.Detector.isIEStrict()){
			this.startHeight += 16;
			this.overlayHeight += 11;
		}
		
		this.modalWidth = this.startWidth;
		this.modalHeight = this.startHeight;
		this.overlayX = Math.ceil((Element.getDimensions(document.body).width - this.overlayWidth) / 2);
		this.overlayX -= this.xOffset;
		this.overlayY = Element.getDimensions($('main')).height + this.yOffset; // the current height of the "main" container plus the target's height
		
		this.overlay = document.createElement('div');
		document.body.appendChild(this.overlay);
		UI.alpha(this.overlay, this.overlayAlpha);
		Element.setStyle(this.overlay, {
			position: "absolute",
			top: this.overlayY + "px",
			left: this.overlayX + "px",
			width: this.startWidth + "px",
			height: this.startHeight + "px",
			backgroundColor: this.bgColor,
			borderTop: "1px solid " + this.borderColor,
			borderLeft: "1px solid " + this.borderColor,
			borderRight: "1px solid " + this.borderColor,
			zIndex: "1000"
		});
		
		
		this.dlFrame = document.createElement('iframe');
		this.dlFrame.width = "345";
		this.dlFrame.height = "330";
		this.dlFrame.scrolling = "no"
		this.dlFrame.frameBorder = "0";
		
		
		if (AC.Detector.isMac()) {
			this.dlFrame.src = "download_mac.html";
		} else {
			this.dlFrame.src = "download_win.html";
		}
			
		this.overlay.appendChild(this.dlFrame);
		UI.alpha(this.dlFrame, this.frameAlpha);
		Element.setStyle(this.dlFrame, {
			position: "absolute",
			width: "345px",
			height: "330px",
			border: "none",
			top: "4px",
			left: "4px",
			backgroundColor: "transparent",
			zIndex: "1001",
		  	visibility: "hidden"
		});
		
		// kick off animation
		this.animationId = setInterval(this.animate.bind(this), 40);
	}, 
	
	animate: function() {
		if (this.modalHeight >= this.growHeight) {
			clearInterval(this.animationId);
			Element.setStyle(this.dlFrame, { visibility: "visible" });
		} else {
			this.overlayAlpha = UI.genericDecel(this.overlayAlpha, this.fadeToOpacity, 5);
			UI.alpha(this.overlay, this.overlayAlpha);
			
			var oldMH = this.modalHeight;
			this.modalHeight = UI.genericDecel(this.modalHeight, this.growHeight, 5);
			this.overlayY -= (this.modalHeight - oldMH);
			UI.scaleAndMove(this.overlay, this.overlayX, this.overlayY, this.modalWidth, this.modalHeight);
		}
	},
	
	rewind: function() {
		this.animationId = setInterval(this.rewindDim.bind(this), 40);
	},
	
	rewindDim: function() {
		if (this.modalHeight == this.overlayHeight) {
			// Clean up
			clearInterval(this.animationId);
			Element.remove(this.dlFrame);
			Element.remove(this.overlay);
			
			this.overlayAlpha = 100;
			this.modalHeight = this.startHeight;
			this.modalWidth = this.startWidth;
		} else {
			var oldMH = this.modalHeight;
			this.modalHeight = UI.genericDecel(this.modalHeight, this.overlayHeight, 3);
			this.overlayY -= (this.modalHeight - oldMH);
			UI.scaleAndMove(this.overlay, this.overlayX, this.overlayY, this.modalWidth, this.modalHeight);
			Element.setStyle(this.dlFrame, { visibility: "hidden" });
			this.overlayAlpha = UI.genericDecel(this.overlayAlpha, 0, 3);
			UI.alpha(this.overlay, this.overlayAlpha);
		}
	},
	
	flipToReqs: function() {
			UI.alpha($('reqs'), 0);
			$('reqs').style.visibility = "visible";	
			
			new Effect.Opacity('itdownload',{
				duration: 0.5, 
				transition: Effect.Transitions.linear, 
				from: 1.0, to: 0.0, 
				afterFinish: function(){
					$('itdownload').style.visibility = "hidden"} });
			
			new Effect.Opacity('reqs',{ 
				duration: 0.5, 
				transition: Effect.Transitions.linear, 
				from: 0.0, to: 1.0 });
	},
	
	flipToDl: function() {
		Element.setStyle($('itdownload'), { visibility: "visible" });
		new Effect.Opacity('reqs', { 
			duration: 0.5, 
			transition: Effect.Transitions.linear, 
			from: 1.0, to: 0.0, 
			afterFinish: function(){
				$('reqs').style.visibility = "hidden"} 
		});
		
		new Effect.Opacity('itdownload', { 
			duration: 0.5, 
			transition: Effect.Transitions.linear, 
			from: 0.0, to: 1.0 
		});
	}
};

var UI = {
	
	genericDecel: function(from, to, rate) {
		
		var n = from - ( (from - to ) * rate/10 );
		if (Math.abs(to - n) > 1) {
			return n;
		} else {
			return to;
		}
	},

	alpha: function(id, a) {
		$(id).style.filter = "alpha("+a+")";
		$(id).style.opacity = a/100+"";
	},
	
	move: function(id, x, y) {
		id.style.left = x+"px";
		id.style.top = y+"px";
	},
	
	scaleAndMove: function(id, x, y, w, h) {
		id.style.left = x+"px";
		id.style.top = y+"px";
		id.style.width = w+"px";
		id.style.height = h+"px";
	}
	
};