/****
Joshua Manns
Exit 31 Creative

****/
var e31gallerynum = 0;
var e31gallery = new Class({
	
	initialize: function(params){ //Set up vars
		e31gallerynum++;
		this.current_img = 0;
		this.num_photos = 0;
		this.img_big_urls = [];
		this.img_thumb_urls = [];
		this.layout = params.layout || 'default',
		this.source = params.source;
			this.source.type = params.source.type || 'xml';
			this.source.service = params.source.service || 'flickr';
			this.source.data = params.source.data;
			this.source.method = params.source.method || 'get';
			this.source.params = params.source.params || '';
		this.gallery = params.gallery;
		this.main = params.main;
		this.prev_thumb = params.prev_thumb;
		this.next_thumb = params.next_thumb;
		this.prev_button = params.prev_button;
		this.next_button = params.next_button;
		this.all_thumbs = params.all_thumbs;
		this.all_thumbs_toggle = params.all_thumbs_toggle;
		this.all_thumbs_shade = params.all_thumbs_shade;
		this.all_thumbs_toggle_img = params.all_thumbs_toggle_img || 'images/e31gallery_thumb_toggle.png';
		this.prev_button_img = params.prev_button_img || 'images/e31gallery_arrow_left.gif';
		this.next_button_img = params.next_button_img || 'images/e31gallery_arrow_right.gif';
		this.gallery_width = params.gallery_width || 650;
		this.gallery_height = params.gallery_height || 400;
		this.all_thumbs_width = params.all_thumbs_width || 410;
		this.all_thumbs_height = params.all_thumbs_height || 400;
		this.thumb_size = params.thumb_size || 75;
		this.main_max_width = params.main_max_width || 410;
		this.main_max_height = params.main_max_height || 335;
		this.set_interface();
		this.get_data(this.source); //Get the data
		return;
	},
	
	set_interface: function(){
		var class_obj = this;
		switch(this.layout){
			case 'default':
				this.gallery.setStyles({
					width: this.gallery_width,
					height: this.gallery_height,
					overflow: 'hidden',
					'background-color': '#000000'
				});
				this.main.setStyles({
					position: 'absolute',
					width: this.main_max_width,
					height: this.main_max_height,
					'margin-top': '16px',
					'margin-left': this.gallery_width/2 - this.main_max_width/2 + 'px',
					'background-color': '#ffffff',
					'background-image': 'url(images/ajax-loader.gif)',
					'background-repeat': 'no-repeat',
					'background-position': 'center center',
					overflow: 'hidden'
				});
				this.main.top_pos = this.main.getStyle('margin-top');
				//this.main.adopt(new Element('img',{id: 'e31gmain' + e31gallerynum, src: ''}));
				this.prev_button.setStyles({
					position: 'absolute',
					width: '48px',
					height: '68px',
					'margin-top': '150px',
					'margin-left': '43px',
					cursor: 'pointer',
					opacity: '.5'
				});
				this.next_button.setStyles({
					position: 'absolute',
					width: '48px',
					height: '68px',
					'margin-top': '150px',
					'margin-left': '565px',
					cursor: 'pointer',
					opacity: '.5'
				});
				this.prev_button.addEvent('click', function(e){
					class_obj.load_photo(class_obj.current_img - 1);
				});
				this.next_button.addEvent('click', function(e){
					class_obj.load_photo(class_obj.current_img + 1);
				});
				this.prev_button.addEvent('mouseenter', function(e){
					this.tween('opacity', 1);
					class_obj.prev_thumb.tween('opacity', 1);
				});
				this.next_button.addEvent('mouseenter', function(e){
					this.tween('opacity', 1);
					class_obj.next_thumb.tween('opacity', 1);
				});
				this.prev_button.addEvent('mouseleave', function(e){
					this.tween('opacity', .5);
					class_obj.prev_thumb.tween('opacity', .5);
				});
				this.next_button.addEvent('mouseleave', function(e){
					this.tween('opacity', .5);
					class_obj.next_thumb.tween('opacity', .5);
				});
				
				this.prev_thumb.addEvent('mouseenter', function(e){
					this.tween('opacity', 1);
					class_obj.prev_button.tween('opacity', 1);
				});
				this.next_thumb.addEvent('mouseenter', function(e){
					this.tween('opacity', 1);
					class_obj.next_button.tween('opacity', 1);
				});
				this.prev_thumb.addEvent('mouseleave', function(e){
					this.tween('opacity', .5);
					class_obj.prev_button.tween('opacity', .5);
				});
				this.next_thumb.addEvent('mouseleave', function(e){
					this.tween('opacity', .5);
					class_obj.next_button.tween('opacity', .5);
				});
				this.prev_button.adopt(new Asset.image(this.prev_button_img, {title: 'Previous'}));
				this.next_button.adopt(new Asset.image(this.next_button_img, {title: 'Next'}));
				this.prev_thumb.setStyles({
					position: 'absolute',
					width: this.thumb_size,
					height: this.thumb_size,
					'background-color': '#eeeeee',
					border: '2px solid #656565',
					'margin-top': '270px',
					'margin-left': '25px',
					cursor: 'pointer'
				});
				this.next_thumb.setStyles({
					position: 'absolute',
					width: this.thumb_size,
					height: this.thumb_size,
					'background-color': '#eeeeee',
					border: '2px solid #656565',
					'margin-top': '270px',
					'margin-left': '550px',
					cursor: 'pointer'					
				});
				this.prev_thumb.addEvent('click', function(e){
					class_obj.load_photo(class_obj.current_img - 1);
				});
				this.next_thumb.addEvent('click', function(e){
					class_obj.load_photo(class_obj.current_img + 1);
				});
				this.all_thumbs.setStyles({
					position: 'absolute',
					width: this.all_thumbs_width,
					height: '0px',
					'background-color': '#000',
					
					'margin-top': '0px',
					'margin-left': this.gallery_width/2 - this.all_thumbs_width/2 + 'px',
					'overflow-y': 'scroll',
					'display': 'block'
				});
				this.all_thumbs.final_height = this.all_thumbs_height;
				this.all_thumbs_toggle.setStyles({
					position: 'absolute',
					'margin-top': '14px',
					'margin-left': '16px',
					cursor: 'pointer'
				});
				this.all_thumbs_toggle.adopt(new Asset.image(this.all_thumbs_toggle_img, {title: 'Show/Hide Thumbs'}));
				this.all_thumbs_toggle.addEvent('click', function(e){
					class_obj.load_all_thumbs();
				});
				this.all_thumbs_shade.setStyles({
					width: class_obj.gallery_width,
					height: class_obj.gallery_height,
					opacity: 0,
					display: 'none',
					'background-color': '#000000',
					position: 'absolute'
				});
				this.all_thumbs_shade.final_height = this.all_thumbs_height;
		}
	},
	
	get_data: function(source){
		var time_qs = "randtime=" + $time();
		var params = '';
		for(i in source.params){
			params += i + '=' + escape(source.params[i]) + '&';
		}
		try{
			var class_obj = this; //Set a reference to class object since onComplete callback 'this' is different scope
			var ajax_result = new Request({
				url: source.data,
				method: source.method,
				onComplete: function(response){
					if(response != ''){
						class_obj.process_data(response);
					}
				}
			}).send(params + time_qs);
		}
		catch(err){
			alert('Error loading gallery.\ncode: ' + err.code);
			return;
		}
	},
	
	process_data: function(data){
		var xml_doc;
		try{ //IE
			xml_doc = new ActiveXObject('Microsoft.XMLDOM');
			xml_doc.async = 'false';
			xml_doc.loadXML(data);
		}
		catch(err){
			try{ //Other browsers
				parser = new DOMParser();
				xml_doc = parser.parseFromString(data,'text/xml');
			}
			catch(err){
				alert('Error processing gallery data.  message: ' + err.message);
				return;
			}
		}
		switch(this.source.service){
			case 'flickr': this.process_flickr(xml_doc);
		}
	},
	
	process_flickr: function(xml_doc){
		//alert(xml_doc.getElementsByTagName("photoset")[0].getAttribute('total'));
		this.num_photos = xml_doc.getElementsByTagName("photoset")[0].getAttribute('total');
		var photos = xml_doc.getElementsByTagName("photo");
		var class_obj = this;
		for(i=0; i<photos.length; i++){
			var p = photos[i];
			class_obj.img_big_urls.push('http://farm' + p.getAttribute('farm') + '.static.flickr.com/' + p.getAttribute('server') + '/' + p.getAttribute('id') + '_' + p.getAttribute('secret') + '.jpg');
			class_obj.img_thumb_urls.push('http://farm' + p.getAttribute('farm') + '.static.flickr.com/' + p.getAttribute('server') + '/' + p.getAttribute('id') + '_' + p.getAttribute('secret') + '_s.jpg');
		};
		
		this.load_photo(this.current_img);
	},
	
	load_photo: function(img){
		if(!this.img_big_urls[img]){
			return false;
		}
		var class_obj = this;
		this.current_img = img;
		if(this.main.getElements('img').length > 2){
			this.purge_big_imgs(2);
		}
		this.main_photo_load_start();
		var big_img = new Asset.image(this.img_big_urls[img], {
				onload: function(e){
					class_obj.main.adopt(this);
					class_obj.resize_main(this);
					class_obj.main_photo_load_complete();
				}
		});
		big_img.setStyles({
			'opacity': 0,
			'display': 'block',
			'position': 'absolute'
		});
		if(img > 0){
			var prev_img_thumb = new Asset.image(this.img_thumb_urls[img-1], {
					onload: function(e){
						class_obj.prev_thumb.empty();
						class_obj.prev_thumb.adopt(this);
						
					}
			});
			class_obj.prev_thumb.setStyle('display', 'block');
			class_obj.prev_thumb.tween('opacity', 1);
			class_obj.prev_button.setStyle('display', 'block');
			class_obj.prev_button.tween('opacity', 1);
		}else{
			class_obj.prev_button.setStyle('opacity', 0);
			class_obj.prev_thumb.setStyle('opacity', 0);
			class_obj.prev_thumb.setStyle('display', 'none');
			class_obj.prev_button.setStyle('display', 'none');
		}
		if(img < this.num_photos - 1){
			var next_img_thumb = new Asset.image(this.img_thumb_urls[img+1], {
					onload: function(e){
						class_obj.next_thumb.empty();
						class_obj.next_thumb.adopt(this);
						
					}
			});
			class_obj.next_thumb.setStyle('display', 'block');
			class_obj.next_thumb.tween('opacity', 1);
			class_obj.next_button.setStyle('display', 'block');
			class_obj.next_button.tween('opacity', 1);
		}else{
			class_obj.next_thumb.setStyle('opacity', 0);
			class_obj.next_button.setStyle('opacity', 0);
			class_obj.next_thumb.setStyle('display', 'none');
			class_obj.next_button.setStyle('display', 'none');
		}		
	},
	
	resize_main: function(img){
		var w = img.getProperty('width');
		var h = img.getProperty('height');
		var mw = this.main_max_width;
		var mh = this.main_max_height;
		var aspect_ratio = w/((h!=0) ? h : .001);
		if(aspect_ratio > 1){
			if(w > mw){
				img.setStyle('width', mw);
				img.setStyle('height',(mw/w)*h);
			}
		}else if(aspect_ratio < 1){
			if(h > mh){
				img.setStyle('height', mh);
				img.setStyle('width', (mh/h)*w);
			}
		}
		this.main.morph({
			width: img.getStyle('width'),
			height: img.getStyle('height'),
			'margin-left': (this.gallery_width/2 - img.getStyle('width').toInt()/2) + 'px'
		});
		
	},
	
	main_photo_load_start: function(){
		$(this.main).getElements('img').morph({opacity: 0});
	},
	
	main_photo_load_complete: function(){
		var class_obj = this;
		$(this.main).getElements('img').set('morph', {onComplete: function(e){
					class_obj.purge_big_imgs(1);
				}
			});
		$(this.main).getElements('img').morph({opacity: 1});
	},
	
	purge_big_imgs: function(num_to_keep){
		var big_img_els = this.main.getElements('img');
		for(i=0; i<big_img_els.length-num_to_keep; i++){
			big_img_els[i].destroy();
		}
	},
	
	load_all_thumbs: function(){
		var class_obj = this;
		if(!this.all_thumbs.showing || this.all_thumbs.showing == false){
			this.all_thumbs.setStyles({
				'display': 'block'
			});
			this.all_thumbs.morph({
				opacity: 1,
				height: class_obj.all_thumbs.final_height
			});
			this.all_thumbs.showing = true;
			this.all_thumbs_shade.setStyle('display', 'block');
			this.all_thumbs_shade.morph({
				opacity: .8,
				height: class_obj.all_thumbs_shade.final_height
			});
		}else{
			this.all_thumbs.morph({
				opacity: 0,
				height: '0px'
			});
			this.all_thumbs_shade.morph({
				opacity: 0,
				height: '0px'
			});
			this.all_thumbs.showing = false;
		}
		if(!this.all_thumbs.getElement('img')){
			for(i=0; i<this.num_photos; i++){
				var thumb_div = new Element('div', {
					styles: {
						'float': 'left',
						width: class_obj.thumb_size,
						height: class_obj.thumb_size,
						'margin': '7px',
						'background-color': '#eeeeee',
						border: '2px solid #656565',
						cursor: 'pointer'
					}
				});
				thumb_div.photo_num = i;
				thumb_div.adopt(new Asset.image(this.img_thumb_urls[i]));
				thumb_div.addEvent('click', function(e){
					class_obj.load_photo(this.photo_num);
					class_obj.all_thumbs.morph({
						opacity: 0,
						height: '0px'
					});
					class_obj.all_thumbs_shade.morph({
						opacity: 0,
						height: '0px'
					});
					class_obj.all_thumbs.showing = false;
				});
				this.all_thumbs.adopt(thumb_div);
			}
		}
	}
});