// Class:	ImageViewer
// Author:	Robin Crama
// Version:	1.0

var ImageViewer = Class.create(
{
	initialize: function()
	{
	},
	create: function(_container,_width,_height,_attributes,_playlist)
	{
		this.h = _height;
		this.w = _width;
		if(_attributes) this.attr = _attributes;
		if(_playlist) 	this.pll = _playlist;
		this.setConfig();
		
		document.observe("dom:loaded", function() {
			imageviewer.container = $(_container);
			imageviewer.setElements();
			imageviewer.init();
		});
	},
	
	setConfig: function()
	{
		if(this.attr.bgcolor) 		{ this.bgcolor = this.attr.bgcolor; 			} else { this.bgcolor = "#000000"; };
		if(this.attr.url) 			{ this.url = this.attr.url; 					};
		if(this.attr.imgscale) 		{ this.imgscale = this.attr.imgscale; 			} else { this.imgscale = false; };
		if(this.attr.navmode) 		{ this.navmode = this.attr.navmode; 			} else { this.navmode = "image"; };
		if(this.attr.navtextcolor) 	{ this.navtextcolor = this.attr.navtextcolor; 	} else { this.navtextcolor = "#2a2828"; };
		if(this.attr.navprevtext) 	{ this.navprevtext = this.attr.navprevtext; 	} else { this.navprevtext = "Previous"; };
		if(this.attr.navnexttext) 	{ this.navnexttext = this.attr.navnexttext; 	} else { this.navnexttext = "Next"; };
		if(this.attr.navmargin) 	{ this.navmargin = this.attr.navmargin; 		} else { this.navmargin = 20; };
		if(this.attr.navopac) 		{ this.navopac = this.attr.navopac; 			} else { this.navopac = 0.5; };
		if(this.attr.navoveropac) 	{ this.navoveropac = this.attr.navoveropac; 	} else { this.navoveropac = 0.9; };
		if(this.attr.overviewnav) 	{ this.overviewnav = this.attr.overviewnav; 	} else { this.overviewnav = false; };
		if(this.attr.overviewbg) 	{ this.overviewbg = this.attr.overviewbg; 		} else { this.overviewbg = "#ffffff"; };
		if(this.attr.overviewopacity) { this.overviewopacity = this.attr.overviewopacity; } else { this.overviewopacity = 0.4; };
		if(this.attr.transitions) 	{ this.transitions = this.attr.transitions; 	} else { this.transitions = false; };
		if(this.attr.transmode) 	{ this.transmode = this.attr.transmode; 		} else { this.transmode = "fade"; };
		if(this.attr.transdur) 		{ this.transdur = this.attr.transdur; 			} else { this.transdur = 0.8; };
		if(this.attr.loop) 			{ this.loop = this.attr.loop; 					} else { this.loop = false; };
		if(this.w >= this.h) 		{ this.hor = true; 								} else { false; };
		if(this.pll) {
			this.total = this.pll.length;
			if(this.total > 0) { this.pllmode = true; } else { this.playlistmode = false; };
			this.curasset = 0;
		};
		this.firstimg = true;
	},
	
	setElements: function()
	{
		this.container.setStyle({'backgroundColor': this.bgcolor, 'height': this.h+'px', 'width': this.w+'px'});
		
		this.asset = new Element('div', { 'id': 'asset', 'style': 'color: white; position: absolute; width: '+this.w+'px;'});
		this.asset.setAttribute('onselectstart', 'javascript:return false;');
		this.asset.setAttribute('onmousedown', 'javascript:return false;');
		this.asset.update("<img id=\"assetresource\" />");
		this.container.insert(this.asset);
		
		if(this.overviewnav) {
			this.navtoggle = false;
			var p = 25;
			var oh = this.h*p/100;
			var mt = this.h-oh;
			var nh = oh-4;
			var cw = nh*this.total;
			this.overview = new Element('div', { 'id': 'overview', 'style': 'color: white; position: absolute; width: '+this.w+'px; height: '+oh+'px; margin-top: '+mt+'px; overflow: hidden;'});
			this.container.insert(this.overview);
			this.ovbg = new Element('div', { 'id': 'ovbg', 'style': 'background-color: '+this.overviewbg+'; width: '+this.w+'px; height: '+oh+'px; position: absolute;'});
			this.ovbg.setOpacity(this.overviewopacity);
			this.overview.insert(this.ovbg);
			this.content = new Element('div', {'id': 'ovcontent', 'style': 'width: '+cw+'px; position: absolute;'})
			this.overview.insert(this.content);
			this.overview.setOpacity(0);
			
			this.container.observe('mousemove', function(e) {
				var y = e.clientY-imageviewer.container.viewportOffset()[1];
				var h = imageviewer.h-oh;
				if(y > h)
				{
					if(imageviewer.navtoggle == false)
					{
						imageviewer.navtoggle = true;
						imageviewer.doTransition('overview',imageviewer.transmode,0.3 , 0.01,1,function () {} );
					}
				} else {
					if(imageviewer.navtoggle)
					{
						imageviewer.navtoggle = false;
						imageviewer.doTransition('overview',imageviewer.transmode,0.3 ,1, 0.01,function () {} );
					}
				}
			});
			
			this.overview.observe('mouseover', function(e) {
				imageviewer.overview.observe('mousemove', function(e) {
					var ml = Math.round(((e.clientX-imageviewer.overview.viewportOffset()[0])*100/imageviewer.w)*(cw-imageviewer.w)/100);
					imageviewer.content.setStyle({'marginLeft': '-'+ml+'px'});
				});
			});
			this.overview.observe('mouseout', function(e) {
				imageviewer.overview.stopObserving('mousemove');
			});
			
			this.thumbs = [];
			for (var i = 0; i<this.total; i++)
			{
				this.thumbs[i] = new Element('img', { 'id': i,'src': this.pll[i], 'style': 'float:left; width: '+nh+'px; height: '+nh+'px' });
				this.content.insert(this.thumbs[i]);
				this.thumbs[i].observe('click', function(e) { 
					var i = e.target.readAttribute('id');
					imageviewer.loadImage(imageviewer.pll[i]);
					imageviewer.curasset = i;
				});
				this.thumbs[i].observe('mouseover', function(e) { 
					var fs = nh+10;
					e.target.setStyle({'cursor': 'pointer'});
				});
			}
		}
		
		if(this.pllmode) {
			this.prev = new Element('div', { 'id': 'prev', 'style': 'color: '+this.navtextcolor+'; position: absolute;' });
			this.next = new Element('div', { 'id': 'next', 'style': 'color: '+this.navtextcolor+'; position: absolute;' });
			
			function loadPrevImg(){ imageviewer.prev.update("<img src=\"img/imageviewer/prev.png\" />"); setSpecsPrev(); };
			function loadNextImg(){ imageviewer.next.update("<img src=\"img/imageviewer/next.png\" />"); setSpecsNext(); };
			
			function setSpecsPrev()
			{
				imageviewer.prev.setAttribute('onselectstart', 'javascript:return false;');
				imageviewer.prev.setAttribute('onmousedown', 'javascript:return false;');
				imageviewer.container.insert(imageviewer.prev);
				var ml = imageviewer.navmargin;
				var mt = (imageviewer.h*.5)-(150*.5);
				imageviewer.prev.setStyle({'marginLeft' : ml+'px', 'marginTop' : mt+'px'});
				imageviewer.prev.observe('click', function(e) { imageviewer.prevImage(); });
				imageviewer.prev.observe('mouseover', function(e) { imageviewer.prev.setStyle({'cursor':'pointer'}); imageviewer.prev.setOpacity(imageviewer.navoveropac); });
				imageviewer.prev.observe('mouseout', function(e) { imageviewer.prev.setStyle({'cursor':'pointer'}); imageviewer.prev.setOpacity(imageviewer.navopac); });
				imageviewer.prev.setOpacity(imageviewer.navopac);
			}
			
			function setSpecsNext()
			{
				imageviewer.next.setAttribute('onselectstart', 'javascript:return false;');
				imageviewer.next.setAttribute('onmousedown', 'javascript:return false;');
				imageviewer.container.insert(imageviewer.next);
				var ml2 = imageviewer.w-imageviewer.navmargin-74;
				var mt2 = (imageviewer.h*.5)-(150*.5);
				imageviewer.next.setStyle({'marginLeft' : ml2+'px', 'marginTop' : mt2+'px'});
				imageviewer.next.observe('click', function() { imageviewer.nextImage(); });
				imageviewer.next.observe('mouseover', function(e) { imageviewer.next.setStyle({'cursor':'pointer'}); imageviewer.next.setOpacity(imageviewer.navoveropac); });
				imageviewer.next.observe('mouseout', function(e) { imageviewer.next.setStyle({'cursor':'pointer'}); imageviewer.next.setOpacity(imageviewer.navopac); });
				imageviewer.next.setOpacity(imageviewer.navopac);
			}
			
			switch(this.navmode){
				case "text":
					this.prev.update(this.navprevtext);
					this.next.update(this.navnexttext);
					setSpecsPrev();
					setSpecsNext();
				break;
				case "image":
					var myImage = new Image();
					myImage.onload = loadPrevImg;
					myImage.src = "img/imageviewer/prev.png";
					var myImage2 = new Image();
					myImage2.onload = loadNextImg;
					myImage2.src = "img/imageviewer/next.png";
				break;
			}
		}
		
	},
	
	init : function()
	{
		if(this.pllmode) { imageviewer.loadImage(this.pll[0]); } else {
			if(this.url) { imageviewer.loadImage(this.url); } else {
				$('asset').update("(\"no url specified\")");
			}
		}
	},
	
	loadImage: function(url)
	{
		function getWidthAndHeight() {
			imageviewer.asset.update("<img id=\"assetresource\" />");
			if(imageviewer.transitions) $('assetresource').setOpacity(0);
			
			// STAP 1
			imgW = this.width; 
			imgH = this.height;
			if(imgW > imgH) { imagehor = true; } else { imagehor = false; };
			
			if(imageviewer.hor){
				if(imagehor){ 
					var p = imageviewer.w*100/imgW;
				} else { 
					var p = imageviewer.h*100/imgH;
				}
			} else{ 
				if(imagehor){ 
					var p = imageviewer.w*100/imgW;
				} else { 
					var p = imageviewer.h*100/imgH;
					if(imgW >= imgH) { p = imageviewer.w*100/imgW; };
				}
			}
			
			// STAP 2
			var frameH = p*imgH/100;
			var frameW = p*imgW/100;
			
			// STAP 4.1
			var setH = frameH;
			var setW = frameW;
			
			// STAP 3
			var ori = false;;
			if(!imageviewer.imgscale)
			{
				if(imgH < imageviewer.h && imgW < imageviewer.w)
				{
					setH = imgH;
					setW = imgW;
					ori = true;
				}
			}
			
			if(imageviewer.hor){
				if(imagehor){ 
					var p = imageviewer.w*100/imgW;
					var o1 = (imageviewer.h-setH)*.5;
					var o2 = 0;
					if(ori) { o1 = (imageviewer.h-setH)*.5; }
				} else { 
					var p = imageviewer.h*100/imgH;
					var o1 = 0;
					var o2 = (imageviewer.w-setW)*.5;
					if(ori) { o1 = (imageviewer.h-setH)*.5; }
				}
			} else{ 
				if(imagehor){ 
					var p = imageviewer.h*100/imgH;
					var o1 = (imageviewer.h-setH)*.5;
					var o2 = 0;
					if(ori) { o1 = (imageviewer.h-setH)*.5; }
				} else { 
					var p = imageviewer.w*100/imgW;
					var o1 = (imageviewer.h-setH)*.5;
					var o2 = (imageviewer.w-setW)*.5;
					if(ori) { o1 = (imageviewer.h-setH)*.5; }
				}
			}

			//Margin
			var stylestr;
			stylestr = "margin-top: "+o1+"px; margin-left: "+o2+"px";
			$('assetresource').writeAttribute('style', stylestr);
			
			//URL
			$('assetresource').writeAttribute('src', url);
			
			
			if(!imageviewer.firstimg) { if(imageviewer.transitions) $('assetresource').setOpacity(0) };
			
			
			//HeightWidth
			$('assetresource').writeAttribute('width', setW);
			$('assetresource').writeAttribute('height', setH);
			$('assetresource').observe('error', function() { $('asset').update("(\"url is broken\")"); });
			
			if(imageviewer.firstimg) { imageviewer.firstimg = false; } else {
				if(imageviewer.transitions) $('assetresource').fade({ duration: imageviewer.transdur, from: 0, to: 1 });
			};
		};
		
		if(this.firstimg) {  
		image();
		} else {
		if(imageviewer.transitions) this.doTransition('assetresource',this.transmode,imageviewer.transdur,1,0,image);
		}
		
		function image()
		{
			var myImage = new Image();
			myImage.onload = getWidthAndHeight;
			myImage.src = url;
		}

	},
	
	setImageSize: function(url,t)
	{
		var imgw = t.width; 
		var imgh = t.height;
		if(imgw > imgh) { scalestr = "width=\""+imageviewer.w+"\""; } else { scalestr = "height=\""+imageviewer.h+"\""; };
		imageviewer.asset.update("<img id=\"assetresource\" src=\""+url+"\" "+scalestr+" />");
		$('assetresource').observe('error', function() { $('asset').update("(\"url is broken\")"); });
	},
	
	nextImage: function()
	{
		if(this.curasset == this.total-1){ if(this.loop) { this.curasset = 0; }; } else { this.curasset++; };
		if(this.pllmode) { imageviewer.loadImage(this.pll[this.curasset]); } else {
		if(this.url) { imageviewer.loadImage(this.url); } else { $('asset').update("(\"no url specified\")"); }
		}
	},
	
	prevImage: function()
	{
		if(this.curasset == 0){ if(this.loop) { this.curasset = this.total-1; }; } else { this.curasset--; };
		if(this.pllmode) { imageviewer.loadImage(this.pll[this.curasset]); } else {
		if(this.url) { imageviewer.loadImage(this.url); } else { $('asset').update("(\"no url specified\")"); }
		}
	},
	
	doTransition: function(_id,_type,_duration,_from,_to,_callback)
	{
		switch(_type)
		{
			case "fade":
				$(_id).fade({ duration: _duration, from: _from, to: _to, afterFinish: _callback});
			break;
			default:
				$(_id).fade({ duration: _duration, from: _from, to: _to, afterFinish: _callback});
			break;
		}
	}
} );
var imageviewer = new ImageViewer();