// JavaScript Document

var slideShow;
var currentSlide;
var prevSlide;
var nextSlide;
var loadHandle = null;
var totalSlides;
var isIE = !!document.all && !!window.attachEvent && !window.opera;
var hudOffset = 0;

addEventToObject(window, 'onload',initilize);

function initilize(){
	
	slideShow = new Slideshow();
	slideShow.init();
	slideShow.displayImage(imgs[currentSlide]);
}


function Slideshow() {
	
	var me = this;
	
	this.root = document.body;
	this.imageDiv = $('normalImg');
	this.zoomDiv = $('zoomImg');
	this.countDiv = $('counter');
	this.imgInfo = $('imgInformation');
	this.infoButton = $('pieceInfo');
	this.relatedButton = $('relatedButton');
	
	this.init = function() {
		
		totalSlides = parseInt(imgs.length) - 1;
		currentSlide = 0;
		prevSlide = totalSlides;
		nextSlide = currentSlide+1;
	
		addEvent(me.imageDiv, "mousemove", function(e){ 
				var location = getEventMousePos(me.imageDiv, e);
				var imgPos = getElementPos(me.imageDiv);
				//fix ie as it report the position of the mask which really breaks it!
				if (e.srcElement && isIE) {
					var zoomImgPos = getElementPos(e.srcElement);
							location.x -= (imgPos.x - zoomImgPos.x);
							location.y -= (imgPos.y - zoomImgPos.y);
				}
				me.zoomify(location);});
		addEventToObject(me.imageDiv,"onmouseover", function(){ 
												 me.imageDiv.mask.style.visibility='visible';
												 me.zoomDiv.imgFrame.style.visibility = 'visible';
												 });
		addEventToObject(me.imageDiv,"onmouseout", function(){ 
												me.imageDiv.mask.style.visibility='hidden';
												me.zoomDiv.imgFrame.style.visibility = 'hidden';
												});
	};
	
	this.controls = new controlPanel();
	this.pieceInfo = new infoPanel($('gallery'), 400, 160, {
		x:$('normalImg').getPosition($('body')).x, 
		y:$('normalImg').getPosition($('body')).y + 460
		});
	this.related = new infoPanel($('related'), 400, 160, {
		x:$('zoomImg').getPosition($('body')).x + hudOffset, 
		y:$('zoomImg').getPosition($('body')).y + 460 + hudOffset
		});

	
	this.prev = function() {
		
		if(!loadHandle) {
			
			prevSlide = currentSlide;
			currentSlide = (currentSlide == 0) ? totalSlides : currentSlide-1;
			nextSlide = (currentSlide == 0) ? totalSlides : currentSlide-1;
	
			me.displayImage(imgs[currentSlide]);

		}
			
	};
	
	this.next = function() { 
	
		if(!loadHandle) {
			
			prevSlide = currentSlide;
			currentSlide = (currentSlide == totalSlides) ? 0 : currentSlide+1;
			nextSlide = (currentSlide == totalSlides) ? 0 : currentSlide+1;

			me.displayImage(imgs[currentSlide]);
		}
	};
	
	this.displayImage = function(imgObj) { 
		
		//preload the zoomed image
		if (imgObj.loaded || imgObj.type == 'film') {
								
			me.imageDiv.empty();
			me.zoomDiv.empty();
			
			if(imgObj.type == 'film'){
			
				var origImg = document.createElement('img');
				origImg.setAttribute('src', imgObj.src);
			
				var overlay = document.createElement('div');
				overlay.innerHTML = 'Click to play';
				overlay.style.textAlign = 'center';
				overlay.style.backgroundImage = 'url("' + imgObj.src + '")';
				overlay.style.height = '100%';
				overlay.style.margin = 'auto';
				
				me.imageDiv.appendChild(overlay);
				
				overlay.onclick = function(){
				
					me.imageDiv.empty();
					
				var myQuickie = new Quickie(imgObj.zoom, {  
 				 id: 'id',  
 				 width: 400,  
  				height: 400,  
  				container: me.imageDiv,  
 				 attributes: {  
  				  controller: 'true',  
   				 autoplay: 'true'  
  					}  
					});
				
				
				}
			
			}
			
			if(imgObj.type == 'image'){
				
				var origImg = document.createElement('img');
				origImg.setAttribute('src', imgObj.src);
			
				me.imageDiv.appendChild(origImg);
	
	
			var zoomImg = document.createElement('img');
			zoomImg.setAttribute('src', imgObj.zoom);
			zoomImg.style.position = 'relative';
			zoomImg.style.visibility = 'hidden';

			var mask = document.createElement('div');
			mask.style.visibility='hidden';
			mask.style.background = 'url(/images/mask.png)';
			mask.style.position = 'absolute';
			setOpacity(50, mask);
			mask.style.left = '0px';
			mask.style.top = '0px';
			mask.style.float = 'left';
			mask.style.width = '800px';
			mask.style.height = '800px';
			
	
			me.imageDiv.mask = mask;
			me.imageDiv.appendChild(mask);
	
			me.zoomDiv.imgFrame = zoomImg;
			me.zoomDiv.appendChild(zoomImg);
			
			}
			
			me.countDiv.innerHTML = (currentSlide+1) + '/' + (totalSlides+1);
			
			me.imgInfo.innerHTML = '<span class="bold">' + imgObj.pieceName + '</span>' + ' ' + imgObj.date + ', ' + imgObj.material + ' - ' + imgObj.caption;
			
			me.infoButton.onclick = function() { 
			
				var text = document.createElement('div');
				text.innerHTML = imgObj.pieceInfo;
			
				me.pieceInfo.toggle(text, imgObj.material + ', ' + imgObj.dimensions + ' ' + imgObj.date);
				
			};
			
			me.relatedButton.onclick = function() { 
			
				var jsonRequest = new Request.JSON({url: "/include/php/pieceQuery.php", onComplete: function(result){
						var div = document.createElement('div');
						var spacer = document.createElement('div');
						spacer.style.clear = 'both';
						spacer.style.width = '100%';
						result.each(function(item){ 
											 
							var cell = new Element('div', {'styles': {'width': 100, 'height': 150, 'float': 'left','padding': 3} });
						/*
							var cell = document.createElement('div');
								cell.setStyle('width', 100);
								cell.setStyle('height', 150);
								cell.setStyle('float', 'left');
								cell.setStyle('padding', 3);
							*/	
											
							var img = document.createElement('img');
								img.src = item.location + item.thumb;
								
								
								
								cell.appendChild(img);
								
								var a = document.createElement('a');
								a.href = '/expose/gallery.php?pieceID=' + item.pieceID;
								a.onclick  = function(){
									var htmlRequest = new Request.HTML({url: this.href,
									onSuccess: function(tree,elements){
									$('gallery').innerHTML = '';
									$('gallery').adopt(tree);
									initilize();
				
									}}).get();
				
									return false;
								};
				
								var text = document.createElement('div');
								text.innerHTML = item[2];
								
								cell.appendChild(text);
								
								//a.appendChild(img);
								a.appendChild(cell);
								div.appendChild(a);
								div.appendChild(spacer);
							});
						
						me.related.toggle(div,imgObj.pieceName + ': Related work'); 
						}}).get({'pieceArr': imgObj.related});
			
				};
			
			
				
			imgs[nextSlide].cache();
			
		}
		else {
			imgObj.cache(me.displayImage);
		}
	};
	
	this.zoomify = function(location) {
		
		//me.imgInfo.innerHTML = location.x + ' x ' + location.y;
	
		var upLimit = -800;
		var lowLimit = 0;
	
		var positionx = ((0 - location.x)*3 + 200);
		var positiony = ((0 - location.y)*3 +200);
	
		if(positionx < upLimit) { positionx = upLimit; }
		if(positiony < upLimit) { positiony = upLimit; }
		if(positionx > 0) { positionx = lowLimit; }
		if(positiony > 0) { positiony = lowLimit; }
	
		me.zoomDiv.imgFrame.style.left = positionx + 'px';
		me.zoomDiv.imgFrame.style.top = positiony + 'px';
		
		var maskPosx = (-400+location.x);
		var maskPosy = (-400+location.y);
	
		if(maskPosx < -334) { maskPosx = -334; }
		if(maskPosy < -334) { maskPosy = -334; }
		if(maskPosx > -66) { maskPosx = -66; }
		if(maskPosy > -66) { maskPosy = -66; }
	
		me.imageDiv.mask.style.left = maskPosx + 'px';
		me.imageDiv.mask.style.top = maskPosy + 'px';

	
	};
	
	this.displayVideo = function(){
	
		var playOptions = new infoPanel($('normalImg'), 280, 100, $('normalImg').getPosition($('body'))); 
		var text = document.createElement('div');
		text.innerHTML = 'video here';
		playOptions.toggle(text);
	};

}

function controlPanel() {
	
	var me = this;
	var overlay;
	
	//var hud = new guide();
	//build the control panel here
	$('relatedButton').addEvent('mouseover', function(e){ guide.show(this,'related work'); });
	$('relatedButton').addEvent('mouseout', function(e){ guide.hide(); });
	$('pieceInfo').addEvent('mouseover', function() { $('pieceInfo').setStyle('background','#b9b9b9'); guide.show(this,'piece Info'); });
	$('pieceInfo').addEvent('mouseout', function(e) { $('pieceInfo').setStyle('background','#ccc'); guide.hide(); });
	$('backButton').addEvent('mouseover', function() { $('backButton').set('src', '/images/back_on.png'); guide.show(this,'back'); });
	$('backButton').addEvent('mouseout', function() { $('backButton').set('src', '/images/back_off.png'); guide.hide(); });
	$('backButton').addEvent('click', function() { slideShow.prev(); });
	$('forwardButton').addEvent('mouseover', function() { $('forwardButton').set('src', '/images/forward_on.png'); guide.show(this,'forward'); });
	$('forwardButton').addEvent('mouseout', function() { $('forwardButton').set('src', '/images/forward_off.png'); guide.hide(); });
	$('forwardButton').addEvent('click', function() { slideShow.next(); });
	//build the control panel here
	
	var handle;
	
	var guide = {
		
		initialize : function(){
			
			overlay = document.createElement('div');
			overlay.style.display = 'none';
			overlay.id = "overlay";
			overlay.style.position = 'absolute';
			overlay.style.background = '#323232';
			overlay.style.color = '#fff';
			overlay.style.textAlign = 'center';
			overlay.style.overflow = 'hidden';
			overlay.style.padding = '1px';
			overlay.style.zIndex = indexLevel;
			handle = new Fx.Morph(overlay, {duration:300, wait:false})
		
		
			$('gallery').appendChild(overlay);
		
		},
		
		show : function(element, content){
			
			overlay.innerHTML = content;
			overlay.style.left = element.getPosition($('body')).x + 'px';
			overlay.style.top = element.getPosition($('body')).y - 25 + 'px';
			handle.start({'opacity': [0, .8], 'display' : 'block'});	
				
		},
		
		hide : function() {
			
			handle.start({'opacity': [.8, 0], 'display' : 'none'});
		}
	};	
	
	guide.initialize();
}

function relatedPanel() {
	
	
}


function infoPanel(parent, width, height, location) {
	
	var me =this;
	var display = false;
	var draggable = false;
	var infoScroller;
	hudOffset+=10;
	
	var container = document.createElement('div');
		container.style.display = 'none';
		container.style.zIndex = 2;
		container.style.left = location.x + 'px';
		container.style.top = location.y + 'px';
		container.style.width = width + 'px'; //230px
		container.style.height = height + 'px'; //300px

	var overlay = document.createElement('div');
		overlay.id = "overlay";
		overlay.style.background = '#323232';
		overlay.style.color = '#fff';
		overlay.style.textAlign = 'left';
		overlay.style.overflow = 'hidden';
		overlay.style.padding = '10px';
		
			
	var text = document.createElement('div');
		text.className = "hud";
		text.height = '100%';
	
	var textFrame = document.createElement('div');
		textFrame.style.overflow = 'hidden';
		textFrame.style.height = height - 30 + 'px';
		
		textFrame.appendChild(text);
	
	var footer = document.createElement('div');
		footer.style.height = '30px';
		//footer.style.width = 210 - 16 + 'px';
		footer.style.borderTop = '1px solid #999';
		footer.style.marginTop = '5px';
		footer.style.padding = '3px 0 0 0';
		
		
		var footerTxt = new Element('div', {'styles': {'width': width - 36, 'float': 'left', 'margin': '4px 0'}});
		/*
	var footerTxt = document.createElement('div');
	footerTxt.setStyles({
   		width: width - 36,
		float: 'left',
		margin: '4px 0'
	});
		*/
	var hide = document.createElement('img');
		hide.src = '/images/gallery_nav/close_off.png';
		hide.style.float= 'left';
		hide.style.margin = '4px 0';
		hide.style.cursor = 'default';
		
		/*
		hide.addEvent('mouseover', function(){ this.src = '/images/gallery_nav/close_on.png'; });
		hide.addEvent('mouseout', function(){ this.src = '/images/gallery_nav/close_off.png'; });
		*/
		hide.onmouseover = function(){ this.src = '/images/gallery_nav/close_on.png'; };
		hide.onmouseout = function(){ this.src = '/images/gallery_nav/close_off.png'; };
		hide.onclick = function() { me.toggle('',''); }

	footer.appendChild(footerTxt);
	footer.appendChild(hide);
	overlay.appendChild(textFrame);
	overlay.appendChild(footer);
	
	container.appendChild(overlay);
	parent.appendChild(container);
	
	this.toggle = function(content, info) {
		
		(content != '') ? text.appendChild(content) : text.innerHTML = '';
		footerTxt.innerHTML = info;
		if(display == false){ 
			me.fadeIn(); 
			if(!draggable) { makeDragable(overlay, container, 1); overlay.set('opacity', 0.80); draggable = true; }
			}
		else if(display == true) { 
			hudOffset-=10;
			me.fadeOut();
			infoScroller.remove(); infoScroller='';
		}
	};
	
	this.fadeIn = function() {
		var handle = new Fx.Morph(container, {
			duration:300, 
			onComplete: function() {
			
				infoScroller = new scrollBar(container, text, textFrame);
				infoScroller.show();
			}});
		handle.start({'opacity': [0, 1], 'display' : 'block'});
		display = true;
	}
	
	this.fadeOut = function() {
		var handle = new Fx.Morph(container, {duration:300,
			onComplete: function() {
				container.style.display = 'none';
			}
		});
		handle.start({'opacity': [1, 0]});
		display = false;
	}
}



function slideObject(src, zoom, pieceName, caption, pieceInfo, material, dims, date, relatedWork) {
	
	var me = this;
	
	this.src = src;
	this.zoom = zoom;
	var extension = zoom.split(".").pop();
	this.type = (extension == 'jpg') ? 'image' : 'film';
	this.pieceName = pieceName;
	this.caption = caption;
	this.pieceInfo = pieceInfo;
	this.material = material;
	this.dimensions = dims;
	this.date = date;
	this.related = relatedWork
	this.loaded = false;
	
	//don't cache films
	
	if(me.type == 'image'){
		this.cache = function(callback) {

			loadHandle = true;
			var preloader = new Image();
		
		
			preloader.onload = function() {
			
				me.loaded = true;			
				loadHandle = false;
			
				details = 'loaded';
			
				if (callback) { callback(me); }
			};
		
		preloader.src = me.src;
		};
	}
	
}