/**
 * @author Ryan Olds <http://moonshadowecommerce.com>
 * @copyright 2009 Moonshadow Ecommerce 
 */

if(typeof(Prototype) == "undefined")
	throw "Control.ScrollBar requires Prototype to be loaded.";
if(typeof(Control.Slider) == "undefined")
	throw "Control.ScrollBar requires Control.Slider to be loaded.";
if(typeof(Object.Event) == "undefined")
	throw "Control.ScrollBar requires Object.Event to be loaded.";
if(typeof(Control.ScrollBar) == "undefined")
	throw "MobiSafari requires Object.ScrollBar to be loaded.";

MobiSafariPreviewer = Class.create({
	initialize: function(url,portrait,landscape,startingDisplay) {
		this.url = url;
		this.containerPortrait = $(portrait);
		this.containerLandscape = $(landscape);
		
		if(this.containerPortrait == undefined) throw('invalid portrait container');
		if(this.containerLandscape == undefined) throw('invalid landscape container');
	
		this.activeOrientation = null;
		this.activeContainer = null;
		this.activeIframe = null;
		
		this.viewport = null;
		this.constraints = null;	
		this.loadingImg = new Image();
		this.loadingImg.src = "loading.gif";
		
		this.doLog = 0;
		
		startingDisplay = (startingDisplay == 'h') ? 'h' : 'v';		
		if(startingDisplay == 'v')  { this.setupPortrait();this.containerLandscape.style.display = 'none';  } else {  this.containerPortrait.style.display = 'none';$('right-col').style.width = "100%";this.setupLandscape(); }
		this.changePage(this.url);
	},
	buildDisplay: function(container,orientation) {
		var abv = 'port';
		switch(orientation) {
		case 'portrait':
			abv = 'port';
			break;
		case 'landscape':
			abv = 'land';
			break;		
		}
		
		if($("iphone-"+abv+"-frame") != undefined) {return true;}
		if($(container) == undefined) throw('invalid build container');
		
		var controlsDiv = document.createElement("div");
		controlsDiv.id = "controls-"+abv;
		var iphoneDiv = document.createElement("div");
		iphoneDiv.id = "iphone-"+abv;		
		var iphoneCon = document.createElement("div");
		iphoneCon.id = "iphone-"+abv+"-container";		
		var trackDiv = document.createElement("div");		
		trackDiv.id = "iphone-"+abv+"-track";
		var handleDiv = document.createElement("div");
		handleDiv.id = "iphone-"+abv+"-handle";
		var trackHDiv = document.createElement("div");
		trackHDiv.id = "iphone-"+abv+"-track-h";
		var handleHDiv = document.createElement("div");
		handleHDiv.id = "iphone-"+abv+"-handle-h";
		var contentDiv = document.createElement("div");
		contentDiv.id = "iphone-"+abv+"-content";		
		var iframe = document.createElement('iframe');
		iframe.id = "iphone-"+abv+"-frame";
		iframe.name = "iphone-"+abv+"-frame";
		
		
		var rotate = document.createElement('div');
		var rotateImg = document.createElement('img');
		rotateImg.id = 'iphone-'+abv+'-rotate';
		rotateImg.src = 'rotate.gif';
		
		var zoomOut = document.createElement('div');
		var zoomOutImg = document.createElement('img');
		zoomOutImg.id = 'iphone-'+abv+'-zoom-out';
		zoomOutImg.src = 'zoom_out.gif';		
		var zoomIn = document.createElement('div');
		var zoomInImg = document.createElement('img');
		zoomInImg.id = 'iphone-'+abv+'-zoom-in';
		zoomInImg.src = 'zoom_in.gif';
		
		zoomInImg.style.display = "none";
		zoomOutImg.style.display = "none";
		
		rotateImg.onclick = function () { previewer.log('rotate');previewer.changeOrientation(); }
		zoomOutImg.onclick = function () { previewer.log('zooming out');previewer.zoomOut(); }
		zoomInImg.onclick = function () { previewer.log('zooming in');previewer.zoomIn(); }
		
		rotate.appendChild(rotateImg);
		zoomOut.appendChild(zoomOutImg);
		zoomIn.appendChild(zoomInImg);
		
		trackDiv.appendChild(handleDiv);
		trackHDiv.appendChild(handleHDiv);		
		contentDiv.appendChild(iframe);
		
		iphoneCon.appendChild(trackDiv);
		iphoneCon.appendChild(contentDiv);	
		iphoneCon.appendChild(trackHDiv);
		
		controlsDiv.appendChild(rotate);
		controlsDiv.appendChild(zoomIn);
		controlsDiv.appendChild(zoomOut);
		
		iphoneDiv.appendChild(iphoneCon);
		container.appendChild(controlsDiv);
		container.appendChild(iphoneDiv);	
		
		if(abv == "port") {
			this.portScrollbar = new Control.ScrollBar('iphone-'+abv+'-content','iphone-'+abv+'-track');
			this.portScrollbarH = new Control.ScrollBarH('iphone-'+abv+'-content','iphone-'+abv+'-track-h');
		} else {
			this.landScrollbar = new Control.ScrollBar('iphone-'+abv+'-content','iphone-'+abv+'-track');
			this.landScrollbarH = new Control.ScrollBarH('iphone-'+abv+'-content','iphone-'+abv+'-track-h');
		}
		
		return true;
	},	
	setupPortrait: function() {		
		if(document.getElementById('controls-port') != undefined) { 
			this.log('Portrait already setup');
		} else {		
			this.buildDisplay(this.containerPortrait,'portrait');
		}
		
		this.activeOrientation = 'portrait';
		this.activeContainer = this.containerPortrait;
		this.activeScrollbar = this.portScrollbar;
		this.activeScrollbarH = this.portScrollbarH;
		this.activeZoomOut = $('iphone-port-zoom-out');
		this.activeZoomIn = $('iphone-port-zoom-in');
		this.activeIframe = $('iphone-port-frame');
		this.deviceWidth = 320;
	},	
	setupLandscape: function() {
		if(document.getElementById('controls-land') != undefined) {
			this.log('Landscape already setup');
		} else {
			this.buildDisplay(this.containerLandscape,'landscape');
		}		
		
		this.activeOrientation = 'landscape';
		this.activeContainer = this.containerLandscape;
		this.activeScrollbar = this.landScrollbar;
		this.activeScrollbarH = this.landScrollbarH;
		this.activeZoomOut = $('iphone-land-zoom-out');
		this.activeZoomIn = $('iphone-land-zoom-in');
		this.activeIframe = $('iphone-land-frame');
		this.deviceWidth = 480;
	},
	changeOrientation: function() {
		if(this.doingChange == 1) { return false; }
		this.doingChange = 1;
		
		if(this.activeOrientation == "portrait") {
			Effect.Fade(this.activeContainer,{afterFinish: function(effect) { $('right-col').style.width = "100%";}});
			this.setupLandscape();
		} else {
			Effect.Fade(this.activeContainer,{afterFinish: function(effect) { $('right-col').style.width = "600px";}});			
			this.setupPortrait();
		}
		
		this.activeZoomIn.style.display = "none";
		this.activeZoomOut.style.display = "none";
		
		Effect.Appear(this.activeContainer,{ queue: 'end',afterFinish: function(effect) { previewer.changePage(previewer.url);}});
	},
	zoomIn: function() {		
		if(window.frames[this.activeIframe.name].document.getElementById('webimage') != null) {				
			var theImg = window.frames[this.activeIframe.name].document.getElementById('webimage');			
			var theWidth = theImg.style.width.replace(/px/,'');	

			if(((parseInt(theWidth) * 1.1)/this.deviceWidth) >= parseFloat(this.viewport.maximum_scale)) {
				theImg.style.width = (parseFloat(this.viewport.maximum_scale) * this.deviceWidth) + 'px';
			}
			else {
				theImg.style.width = (parseInt(theWidth) * 1.1) +'px';
			}
		}

		this.callOnIframeChange();
	},
	zoomOut: function() {		
		if(window.frames[this.activeIframe.name].document.getElementById('webimage') != null) {
			var theImg = window.frames[this.activeIframe.name].document.getElementById('webimage');			
			var theWidth = theImg.style.width.replace(/px/,'');	

			if(this.viewport.minimum_scale == undefined) { this.viewport.minimum_scale = 1; }
			if(((parseInt(theWidth) / 1.1)/this.deviceWidth) <= parseFloat(this.viewport.minimum_scale)) {
				theImg.style.width = this.deviceWidth+'px';
			}
			else {
				theImg.style.width = (parseInt(theWidth) / 1.1) +'px';
			}
		}

		this.callOnIframeChange();
	},
	changePage: function(url) {
		if(this.activeIframe == undefined) { this.log('Previewer not setup'); return false; }
		
		this.activeIframe.src = 'loading.html';		
		if((url.indexOf("http://") == -1) && (url.indexOf("https://") == -1)) url = "http://"+url;
		
		this.url = url;

		if(url.indexOf("?") != -1) {
			url = url+"&ipview=1&orientation="+this.activeOrientation;
		} else {
			url = url+"?ipview=1&orientation="+this.activeOrientation;
		}
		
		new Ajax.Request("get.php?u="+url,
		{
			method:'get',
			onCreate: function() {
							
			},
			onSuccess: function(transport) {
				theResponse = transport.responseText.evalJSON() || "no response text";
				previewer.viewport = theResponse.viewport;
				previewer.constraints = previewer.calculateConstraints();
				previewer.activeIframe.src = 'container.php?orientation='+previewer.activeOrientation+'&u='+theResponse.image;
			},
			onComplete: function() {
				
			},
			onFailure: function() { previewer.activeIframe.src = ""; }
		});	
	},	
	callOnIframeChange: function() {
		if(window.frames[this.activeIframe.name].document.getElementById('webimage') != null) {			
			this.activeIframe.style.height = window.frames[this.activeIframe.name].document.getElementById('webimage').height;
			this.activeIframe.style.width = window.frames[this.activeIframe.name].document.getElementById('webimage').width;

			this.activeScrollbar.recalculateLayout();
			this.activeScrollbarH.recalculateLayout();	

			this.activeScrollbar.recalculateLayout();
			this.activeScrollbarH.recalculateLayout();	
		}

		this.checkControls();
		this.doingChange = 0;
	},
	calculateConstraints: function() {
		constraints = new Object();
		constraints.zoomOut = true;
		constraints.zoomIn = true;
		
		if(this.viewport.minimum_scale != undefined && this.viewport.maximum_scale != undefined) {
			if(this.viewport.minimum_scale == this.viewport.maximum_scale) {
				constraints.zoomOut = false;
				constraints.zoomIn = false;							
			}
		}
		else {
			if(this.viewport.minimum_scale != undefined) {
				constraints.zoomOut = this.viewport.minimum_scale * this.deviceWidth;
			}

			if(this.viewport.maximum_scale != undefined) {
				constraints.zoomIn = this.viewport.maximum_scale * this.deviceWidth;
			}
			
			if(this.viewport.user_scalable != undefined) {
				if(this.viewport.user_scalable == "no" || this.viewport.user_scalable == 0) {
					constraints.zoomOut = false;
					constraints.zoomIn = false;
				}
			}
		}
		return constraints;
	},
	checkControls: function() {		
		if(this.constraints == undefined) {
			this.constraints = this.calculateConstraints();	
		}
		
		if(this.constraints.zoomOut != false) {
			if((this.constraints.zoomOut != false ||
					this.constraints.zoomOut > parseInt(this.activeIframe.style.width.replace(/px/,''))) &&
					parseInt(this.activeIframe.style.width.replace(/px/,'')) > this.deviceWidth) {

				this.activeZoomOut.style.display = "block";

			} else { 
				this.activeZoomOut.style.display = "none";
			}
		}
		else {
			this.activeZoomOut.style.display = "none";
		}

		if(this.constraints.zoomIn != false) {
			if(this.constraints.zoomIn != false ||
					this.constraints.zoomIn >= parseInt(this.activeIframe.style.width.replace(/px/,''))) {
				this.activeZoomIn.style.display = "block";
			} else {
				this.activeZoomIn.style.display = "none";
			}
		}
		else {
			this.activeZoomIn.style.display = "none";
		}		
	},	
	log: function(message) {
		//if(console != undefined && this.doLog == 1) {
		//	console.log(message);
		//}
	}		
});