/* Portfolio class */
var Portfolio = Class.create({
	parentCtl: null,
	imageData: null,
	currentImage: 0,
	menuStructure: '{ "onlocation": "On location", "studio": "Studio", "details": "Details", "interiors": "Interiors", "turntables": "Turntables" }'.evalJSON(),
	defaultMenu: 'onlocation',
	activeMenu: null,
	loadingText: 'Loading portfolio data...',
	initialize: function(NameParentCtl) {
		this.parentCtl = $(NameParentCtl);
		$(this.parentCtl).innerHTML = this.loadingText;
		this.activeMenu = this.defaultMenu;
		this.buildControl();
	},
	buildControl: function() {
		var dt = new Date();
		new Ajax.Request('/data/portfolio.json.php?c=' + this.activeMenu + '&dt=' + dt.getTime(), {
			onSuccess: function(transport) {
				if(transport.responseText != '') {
					this.imageData = transport.responseText.evalJSON(false);
					$(this.parentCtl).innerHTML = '';
					this.createPicsRows();
					this.createFullDiv();
					this.createMenuDiv();
					this.addEvents();
				}
				else {
					this.createMenuDiv();
					for (var m in this.menuStructure) {
						if(m != this.activeMenu) {
							Event.observe(m, "click", this.handleMenuClick.bindAsEventListener(this));
						}
					}
					alert('Sorry this category is empty!');
				}
			}.bind(this)
		})
	},
	removeControl: function() {
		$(this.parentCtl).innerHTML = '';
		this.removeEvents();
		loadedPicIndx = null;
	},
	createMenuDiv: function() {
		var menuDiv = document.createElement("div");
		with (menuDiv) {
			style.position = 'absolute';
			style.top = '125px';
			style.left = '30px';
			ID = 'menuStrip';
			var table = document.createElement("table");
			table.id = "pMenuTable";
			table.cellPadding = "0";
			table.cellSpacing = "0";
			table.border = 0;
			table.align = "left";
			var tbody = document.createElement("tbody");
			table.appendChild(tbody);
			var row = document.createElement("tr");		
			tbody.appendChild(row);
			var menuCell = document.createElement("td");
			menuCell.style.fontSize = '18';
			var i = 0;
			//alert(this.menuStructure.length);
			for (var key in this.menuStructure) { 
				if (this.menuStructure.hasOwnProperty(key)) {
					var menuLink = document.createElement("a");
					with (menuLink) {
						href = '#';
						(key == this.activeMenu) ? className = 'pMenuActive' : className = 'pMenu';
						id = key;
						innerHTML = this.menuStructure[key];
					}
					menuCell.appendChild(menuLink);
					(i < 4) ? menuCell.innerHTML += '&nbsp;|&nbsp;' : menuCell.innerHTML += '';
					i++;
				}
			}			
			row.appendChild(menuCell);
			appendChild(table);
		}
		$(this.parentCtl).appendChild(menuDiv);
	},
	createPicsRows: function() {
		var table = document.createElement("table");
		table.id = "picsTable";
		table.cellPadding = "5";
		table.cellSpacing = "0";
		table.width = "1024px";
		table.border = 0;
		table.style.marginTop = '25px';
		table.align = "center";
		var tbody = document.createElement("tbody");
		table.appendChild(tbody);
		var row = document.createElement("tr");		
		tbody.appendChild(row);
		var picsCell = document.createElement("td");
		for(var i = 0; i < this.imageData.images.length; i++) {
			picsCell.innerHTML += '<img id="img_s_' + i + '" title="click to enlarge" class="smallImages" style="cursor:pointer; margin:2px; padding:0px; border:1px solid #41403D; float: left; width:150px;" align="left" src="' + this.imageData.images[i].path + '" border="0">';
		}
		row.appendChild(picsCell);
		$(this.parentCtl).appendChild(table);
	},
	createFullDiv: function() {
		var body = document.getElementsByTagName("body")[0];
		var imgFullDiv = document.createElement("div");
		with (imgFullDiv) {
			id = 'imgFullDiv';
			style.position = 'absolute';
			style.top = 0;
			style.left = 0;
			style.cursor = 'pointer';
			style.display = 'none';
			style.backgroundColor = '#000000';
			style.width = '100%';
			style.height = '100%';
			style.backgroundRepeat = 'no-repeat';
			style.backgroundPosition = '50% 50%';
			title = 'click to close the image';
		}
		body.appendChild(imgFullDiv);
		Event.observe('imgFullDiv', "click", function(obj) { 
			$(Event.element(obj)).hide();
		})	
	},
	addEvents: function() {
		for (var m in this.menuStructure) {
			if(m != this.activeMenu) {
				Event.observe(m, "click", this.handleMenuClick.bindAsEventListener(this));
			}
		}
		for(var i = 0; i < this.imageData.images.length; i++) {
			Event.observe('img_s_' + i, "mouseover", this.handleImageMouseover.bindAsEventListener(this));
			Event.observe('img_s_' + i, "mouseout", this.handleImageMouseout.bindAsEventListener(this));
			switch(this.imageData.images[i].type) {
				case "image":
					Event.observe('img_s_' + i, "click", this.handleImageClick.bindAsEventListener(this, i));
				break;
				case "video":
					Event.observe('img_s_' + i, "click", this.handleVideoClick.bindAsEventListener(this, i));
				break;
			}
		}	
	},
	removeEvents: function() {
		for (var m in this.menuStructure) {
			if(m != this.activeMenu) {
				Event.stopObserving(m, "click", this.handleMenuClick.bindAsEventListener(this));
			}
		}
		for(var i = 0; i < this.imageData.images.length; i++) {
			Event.stopObserving('img_s_' + i, "mouseover");
			Event.stopObserving('img_s_' + i, "mouseout");
			switch(this.imageData.images[i].type) {
				case "image":
					Event.stopObserving('img_s_' + i, "click");
				break;
				case "video":
					Event.stopObserving('img_s_' + i, "click");
				break;
			}
		}	
	},
	handleMenuClick: function(obj) {
		this.activeMenu = $(Event.element(obj)).id;
		this.removeControl();
		$(this.parentCtl).innerHTML = this.loadingText;
		this.buildControl();
	},
	handleImageMouseover: function(obj) {
		$(Event.element(obj)).style.border = '1px solid #FF9C00';
	},
	handleImageMouseout: function(obj) {
		$(Event.element(obj)).style.border = '1px solid #41403D';
	},
	handleImageClick: function(obj, imgIndex) {
		showPopWin($(Event.element(obj)).src.replace('_S.jpg','_M.jpg').replace('small','medium'), 800, 600, null, true, this.imageData.images[$(Event.element(obj)).id.replace('img_s_','')].comment, this.imageData.images[$(Event.element(obj)).id.replace('img_s_','')].type, imgIndex);
	},
	handleVideoClick: function(obj, imgIndex) {
		showPopWin($(Event.element(obj)).src.replace('_V.jpg','.mov').replace('small','video'), 800, 600, null, true, 'Click and drag with your mouse inside of the image', this.imageData.images[$(Event.element(obj)).id.replace('img_s_','')].type, imgIndex);
	}
});