// declare global variables for the gallery
var galleryLoadStatus = false;
var	resizeInProgress = false;
var loadReturnArray;
var opusGalleryWidth;
var opusGalleryHeight;
var opusGalleryTotal;
var opusGalleryCurrent = 0;
var opusGalleryParent;
var opusGalleryMargin = 20;
var opusGalleryTitles;
var opusGalleryDescriptions;
var opusGalleryCredits;
var opusGalleryLinkPath;
var opusGalleryIds;

var newGallery = new Class({

	initialize: function(options){
		// Initialise the variables
		this.options = options;
		var linkpath = this.options.link_path;
		opusGalleryLinkPath = linkpath;
		var globaldescription = this.options.globaldescription;
		var globaltitle = this.options.globaltitle;
		var ids = this.options.ids;
		opusGalleryIds = ids;
		var credits = this.options.credits;
		opusGalleryCredits = credits;
		var descriptions = this.options.descriptions;
		opusGalleryDescriptions = descriptions;
		var titles = this.options.titles;
		opusGalleryTitles = titles;
		
		var filenames_lg = this.options.filenames_lg;
		
		if(this.options.filenames_small){
			var filenames_small = this.options.filenames_small;
			var sm_total = filenames_small.length;
			var thumbnails = true;		
		}else{
			var thumbnails = false;
		}	
		var lg_total = filenames_lg.length;
		var path = this.options.path;
		var holder = $(this.options.holder);
		opusGalleryParent = holder;

		// Margin
		
		if(this.options.margin){
			var margin = this.options.margin;
		}else{
			var margin = 0;
		}
		opusGalleryMargin = margin;
		
		//Set height and width of the gallery
		var width = 800;
		var height = 600;		
		if(this.options.width){
			var width = this.options.width;			
		}
		if(this.options.height){
			var height = this.options.height;			
		}
		opusGalleryWidth = width;
		opusGalleryHeight = height;
		
		//Navigation position
		if(this.options.nav){
			var nav = this.options.nav;	
		}else{
			var nav = 'after';
		}
		
		// Arrows
		if(this.options.arrows){
			var arrows = this.options.arrows;	
		}else{
			var arrows = 'no';
		}

		
		// Check that there are the same number of large and small images. If not return total to the lower value
		if(this.options.filenames_small){
			var total = this.checkImages(lg_total,sm_total);
			opusGalleryTotal = total;	
		}else{
			opusGalleryTotal = lg_total
		}
		//alert('#'+holder+'  '+globaltitle+' : '+globaldescription+'-> TOTAL: '+total+' WIDTH: '+width+' HEIGHT: '+height+' IDS: '+ids+' CREDITS: '+credits+' TITLES: '+titles+' DESC: '+descriptions);
		
		// Initiate the gallery
		this.init(width,height,holder);
		
		var myTitle = this.createTitle(globaltitle);
		this.insertElementPos(myTitle,holder,'before');
		
		
		var imageHolder = this.createImageHolder();
		this.styleImageHolder(imageHolder,width,height);
		this.insertElement(imageHolder,holder);
		
		var infoHolder = this.createInfoBox();
		this.insertElement(infoHolder,holder);
		
		
		// Create thumb holder div
		if(thumbnails){		
			var thumbholder = this.createThumbHolder();
			this.insertElementPos(thumbholder,holder,nav);
			this.styleThumbHolder(thumbholder,width,total);
		}		
		
		if(arrows == 'yes'){
			var arrowNavigation = this.createArrows();
			this.insertElementPos(arrowNavigation,holder,'before');
			this.addArrowEvents(path,filenames_lg,imageHolder);
		}		
		
		if(thumbnails){
			this.createThumbs(total,width,thumbholder);
			this.loadThumbs(path,filenames_small);
			this.thumbEvents(thumbholder,filenames_lg,path,imageHolder)
		}		
		
		var firstLoad = new opusLoader({url: path+filenames_lg[opusGalleryCurrent],holder: imageHolder, id:0});
	},
	
	// Function to check number of thumbs and large images	
	checkImages: function(large,small){
		var dImage = large - small;
		if(dImage == 0){
			return large;
		}else if(dImage < 0){
			return large;
		}else if(dImage > 0){
			return small;
		}
	},
	
	// initiate and style the holder div
	init: function(width,height,holder){
		holder.setStyles({
			'width': opusGalleryWidth,
			'height': opusGalleryHeight,
			'background-color': 'white',
			'display': 'inline',
			'float': 'left',
			'clear': 'both'
		})
	},	
	
	createThumbs: function(total,width,target){
		var thumbWidth = Math.floor(width/total)-13;
		for(i=0; i<total; i++){
			var myThumb = new Element('div',{'class': 'og_thumb'});
			myThumb.setStyles({
				'width' : thumbWidth,
				'height' : thumbWidth,
				'margin-left': 5,
				'margin-top': 5, 				
				'padding-left': 5,
				'padding-top': 5,
				'border-color': '#cccccc',
				'border-style': 'solid',
				'border-width': 1,				
				'background-color': 'white',
				'display' : 'inline',
				'float': 'left',
				'opacity': 0.5
			});
			myThumb.inject(target);
		}
	},
	
	loadThumbs: function(path,thumbs){
		var images = new Array();
		for(i=0; i<opusGalleryTotal; i++){
			images[i] = path+thumbs[i];
		}
		
		var loader = new Asset.images(images,{
			onProgress: function(counter,index){
			},
			
			onComplete: function(){
				var tw = Math.floor(opusGalleryWidth/opusGalleryTotal)-18;
				var thumbElements = $('gallery_thumb_holder').getElements('div');
				thumbElements.each(function(thumb,i){
					myImg = new Element('img',{src:images[i], width:tw, height:tw});
					myImg.inject(thumb);
				})
			}	
		});		
	},
	
	createArrows: function(){
		var arrow_nav = new Element('div',{id: 'arrow_nav'});
		var rightArrow = new Element('div',{'class': 'right_arrow'});
		var leftArrow = new Element('div',{'class': 'left_arrow'});
		leftArrow.inject(arrow_nav);
		rightArrow.inject(arrow_nav);
		arrow_nav.setStyles({
			'width': opusGalleryWidth
		});
		return arrow_nav;
	},
	
	addArrowEvents: function(path,images,imageholder){
		var rArrow = $('arrow_nav').getElements('.right_arrow');
		var lArrow = $('arrow_nav').getElements('.left_arrow');
		rArrow.addEvents({
			'click': function(){				
				if((galleryLoadStatus == false) && (resizeInProgress == false)){			
					opusGalleryCurrent +=1;
					if(opusGalleryCurrent > (opusGalleryTotal-1)){
						opusGalleryCurrent = 0;
					}					
					var nextLoad = new opusLoader({url: path+images[opusGalleryCurrent],holder: imageholder, id:opusGalleryCurrent});
				}
			}
		});
		lArrow.addEvents({
			'click': function(){				
				if((galleryLoadStatus == false) && (resizeInProgress == false)){			
					opusGalleryCurrent -=1;
					if(opusGalleryCurrent < 0){
						opusGalleryCurrent = (opusGalleryTotal-1);
					}							
					var nextLoad = new opusLoader({url: path+images[opusGalleryCurrent],holder: imageholder, id:opusGalleryCurrent});
				}
			}
		});		
	},
	
	thumbEvents: function(targetholder,images,path,imageholder){
		var eventTargets = $(targetholder).getElements('div');
		eventTargets.each(function(target,i){
			target.addEvents({
				'click': function(){
					if((galleryLoadStatus == false) && (resizeInProgress == false)){
						var nextLoad = new opusLoader({url: path+images[i],holder: imageholder, id:i});
						opusGalleryCurrent = i;	
					}
				},
				'mouseenter': function(){
					target.setStyles({'opacity':1});
				},
				'mouseleave': function(){
					target.setStyles({'opacity':0.5});					
				}
			})
		})
	},
	
	// create image holder div
	createImageHolder: function(){
		var myImageHolder = new Element('div',{id: 'image_holder'});
		return myImageHolder;
	},
	
	// create thumb holder div
	createThumbHolder: function(){
		var myThumbHolder = new Element('div',{id: 'gallery_thumb_holder'});
		return myThumbHolder;
	},
		
	createTitle: function(title){
		var titleHolder = new Element('div',{id: 'gallery_title'});
		titleHolder.setStyles({
			'width': opusGalleryWidth
		});
		titleHolder.set('text',title);
		return titleHolder;
	},
	
	createInfoBox: function(){
		var infoBox = new Element('div',{id: 'gallery_info'});
		var infoBoxTitle = new Element('div',{id: 'gallery_info_title'});
		//var infoBoxDescription = new Element('div',{id: 'gallery_info_description'});		
		var infoBoxCredit = new Element('div',{id: 'gallery_info_credit'});
		infoBoxTitle.inject(infoBox);
		//infoBoxDescription.inject(infoBox);
		infoBoxCredit.inject(infoBox);
		infoBox.setStyles({
			'width': 'auto',
			'height': 'auto',
			'background-color': 'white'
		});	
		return infoBox;
	},
		
	styleImageHolder: function(imageholder,width,height){
		var marginLeft = (width/4);
		var marginTop = (height/4);
		imageholder.setStyles({
			'width': width/2,
			'height': height/2,
			'margin-left': marginLeft,
			'margin-top': marginTop,
			'background-color': '#cccccc'
		})
	},
	
	styleThumbHolder: function(target,width,total){
		var height = Math.floor(width/total);
		target.setStyles({
			'width': width,
			'height': height+5,
			'background-color': '#ededed',
			'display': 'inline',
			'float': 'left',
			'clear': 'both'			
		})
	},
		
	insertElement: function(target,parent){
		target.inject(parent);
	},

	insertElementPos: function(target,parent,pos){
		target.inject(parent,pos);
	}

	
});

var opusLoader = new Class({	
	initialize: function(options){
		this.options = options;
		galleryLoadStatus = true;
		var parent = this.options.parent;
		var holder = this.options.holder;
		var url = this.options.url;
		var id = this.options.id;
		var loadArray;
		this.doLoad(url,holder,id);
	},
	
	doLoad: function(url,holder,id){
		this.createLoaderBar(opusGalleryWidth,opusGalleryHeight);
		var myLoader = new Asset.image(url,{
			onload: function(){
				galleryLoadStatus = false;
				loadArray = [this,this.width,this.height];
				var imageRatio = this.width/this.height;
				var imageWidth;
				var imageHeight;
				if((this.width + opusGalleryMargin) > opusGalleryWidth){
					var imageWidth = opusGalleryWidth - opusGalleryMargin;
					var imageHeight = imageWidth/imageRatio;
				}else{
					var imageWidth = this.width;
					var imageHeight = this.height;					
				}
				var myTest = new galleryLoad({image: loadArray[0] ,width: imageWidth, height: imageHeight,holder: holder, id: id});
				var loaderbox = $('load_overlay');
				loaderbox.dispose();
			}
		})		
	
	},
	
	createLoaderBar: function(width,height){
		var left_margin = (opusGalleryWidth-width)/2;
		var top_margin = (opusGalleryHeight-height)/2;		
		var loadOverlay = new Element('div',{'id': 'load_overlay'});
		loadOverlay.setStyles({
			'display': 'block',
			'position': 'absolute',
			'float': 'left',
			'width': width,
			'height': height,
			'margin-left': left_margin,
			'margin-top': top_margin,			
			'background-color': 'white',			
			'opacity': 0.8,
			'z-index': 100
		});
		loadOverlay.inject(opusGalleryParent,'top');
	}	
	
});

var galleryLoad = new Class({
	
	initialize: function(options){
		this.options = options;		
		var margin = opusGalleryMargin;
		var id = this.options.id;
		var width = this.options.width;
		var height = this.options.height;
		var image = this.options.image;
		var holder = this.options.holder;
		var total_width = width+margin;
		var total_height = height+margin;
		var margin_left = (opusGalleryWidth/2) - (total_width/2);
		var margin_top = 5;
		var duration = 500;		
		var checkImg = this.checkTargetContents(holder);	
		if(checkImg > 0){
			this.removeTargetContents(holder);
		}
		this.infoBoxUpdate(id,width,duration,margin_left);	
		this.resizeHolder(holder,total_width,total_height,margin_left,margin_top,duration);		
		var wait = setTimeout(function(){
			var fadeFX = new Fx.Morph(image,{
				duration: duration
			});
			image.setStyles({
				'opacity': 0,		
				'width': width,
				'height': height,
				'margin-left': margin/2,
				'margin-top': margin/2
			})
			image.inject(holder);
			fadeFX.start({
				'opacity': 1
			});
		},duration);
		
		this.addImageEvents(id,image);
	},
	
	infoBoxUpdate: function(id,width,d,left){
		var infoBox = $('gallery_info');	
		var infoFX = new Fx.Morph(infoBox,{
			duration: d
		});
		
		infoFX.start({
			'margin-left': left+10
		});

		var infoTitle = $('gallery_info_title');
		infoTitle.set('text',opusGalleryTitles[id]);
		//var infoDescription = $('gallery_info_description');
		//infoDescription.set('text',opusGalleryDescriptions[id]);
		var infoCredit = $('gallery_info_credit');
		infoCredit.set('text', opusGalleryCredits[id]);		
	},
	
	addImageEvents: function(id,image){
		var imageParent = $('image_holder');
		var infoShowHide = $('gallery_info');
		imageParent.removeEvents('click');
		imageParent.removeEvents('mouseover');
		imageParent.removeEvents('mouseleave');		
		imageParent.addEvents({
			'click': function(){
				if(galleryLoadStatus == false){
					var redirectURL = opusGalleryLinkPath+""+opusGalleryIds[id];
					window.location = redirectURL;
				}
			}/*,
			'mouseover': function(){
				infoShowHide.setStyles({
					'opacity': 0.7
				});
			},
			'mouseleave': function(){
				infoShowHide.setStyles({
					'opacity': 0
				});			
			}*/
		});
	},
	
	resizeHolder: function(target,w,h,ml,mt,d){
		
		var myFX = new Fx.Morph(target,{
			duration: d
		});
		
		resizeInProgress = true;
		
		myFX.start({
			'width': w,
			'height': h,
			'margin-left': ml,
			'margin-top': mt
		});
		
		var fxWait = setTimeout(function(){
			resizeInProgress = false;
		},d);
	},
	
	checkTargetContents: function(injectElement){
		var getContents = injectElement.getElements('img').length;
		return getContents;
	},
	
	removeTargetContents: function(injectElement){
		var removeElements = $(injectElement).getElements('img');
		if(removeElements.length > 0){
			for(i=0; i<removeElements.length; i++){
				removeElements.dispose();						
			}
		}
	}
	
});