/* PhotoGallery
----------------------------------------------------------------------------------------*/
var PhotoGallery = Class.create({
	initialize: function(container, overlay) {
		this.container = container;
		this.overlay = overlay;
		this.thumbs = this.container.select("li.photo");
		this.dir = "/img/media/photo/large/"; //dir of large photos
		this.loader = this.overlay.down('.loader').hide();
		this.closeBtn = this.overlay.down('.close');
		this.slidesContainer = this.overlay.down('.slides');
		this.slides = [];
		this.prevBtn = $('btnPicPrev');
		this.nextBtn = $('btnPicNext');
		this.viewTrigger = $('btnViewSlideShow');
		this.modalWindow = $('modal_overlay');
		this.slideIndex = this.overlay.down('.index');
		this.slideTotal = this.overlay.down('.total');
		
		// slideshow specific variables
		this.initial = 1;
		this.delay = 5;
		this.fadeDuration = .4;
		this.current = this.initial;
		this.show = null,
		this.hide = null;
		
		this.setup();
	},
	setup: function() {
		this.thumbs.each(function(el, i) {
			this.thumbTitle = el.down('.title').innerHTML;
			this.slideTitle = new Element('h6').update('Photo Gallery ');
			this.photoName = el.down('img').id;
			this.photo = new Element('img').writeAttribute('src', this.dir + this.photoName).addClassName('photo');
			this.slides[i] = new Element('div', { 'class' : 'slide' }).hide();
			this.slides[i].insert(this.slideTitle);
			this.slides[i].insert(this.photo);
			this.slidesContainer.insert(this.slides[i]);
			el.observe('click', this.open.bindAsEventListener(this, i));
		}.bind(this));
		
		
		this.slideTotal.update(this.slides.length);
		this.closeBtn.observe('click', this.close.bind(this));
		
		this.prevBtn.observe('click', this.back.bindAsEventListener(this));
		this.nextBtn.observe('click', this.forward.bindAsEventListener(this));
		this.viewTrigger.observe('click', this.view.bind(this));
	},	
	back: function(ev){
		if (this.show || this.hide) return;
		this.pause(); 
		if (this.current == 0)
			this.goTo(this.slides.length-1);
		else
			this.goTo(this.current-1);
			
		ev.stop(); 
	},
	forward: function(ev){
		if (this.show || this.hide) return;
		this.pause();
		this.next();
		ev.stop(); 
	}, 
	start: function(){
		if (this.timer) return;
		this.timer = setTimeout(this.next.bind(this), this.delay * 1000); 
	},
	showOnly: function(el){
		this.slides.invoke('hide');
		el.show();
	},
	pause: function(){
		if (this.timer){
			clearTimeout(this.timer);
			this.timer = false;
		}
		this.hide ? this.hide.cancel() : 0; 
		this.show ? this.show.cancel() : 0;
	},
	next: function(){
		this.timer = false;
		if (this.current == this.slides.length-1)
			this.goTo(0);
		else
			this.goTo(this.current+1);
		this.start();
	},
	goTo: function(idx, dur){
		if (idx == this.current) {
			this.show = new Effect.Appear(this.slides[this.current],{duration: this.fadeDuration || 2, afterFinish:function(){this.show=null;}.bind(this)});
		}
		else {
		
			this.hide = new Effect.Fade(this.slides[this.current], {duration : this.fadeDuration || 2, afterFinish:function(){this.hide=null;}.bind(this)});
			this.current = idx;
			this.show = new Effect.Appear(this.slides[this.current],{duration: this.fadeDuration || 2, afterFinish:function(){this.show=null;}.bind(this)});
			this.start();
			this.updateCounter();
		}
	},
	updateCounter: function() {
		this.slideIndex.update(this.current+1);
	},
	open: function(ev, i) {
	
		
	
		this.centerPop();
		this.initModalWindow();
		this.overlay.show();
		this.goTo(i);
		
		ev.stop();
	},
	view: function() {
		this.centerPop();
		this.initModalWindow();
		this.overlay.show();
		this.showOnly(this.slides[0]);
		this.goTo(0);
	},
	close: function(ev, i) {
		this.modalWindow.hide();
		this.overlay.hide();
		this.hideAll();
		//this.loader.show();
		this.pause();
		ev.stop();
	},
	hideAll: function() {
		this.slides.invoke('hide');
	},
	centerPop: function() {
		Position.Center(this.overlay);
	},
	initModalWindow: function() {
		this.modalWindow.style.height = $$('body').first().getHeight() + "px";
		this.modalWindow.show();
	}
});

/* FlashGallery
----------------------------------------------------------------------------------------*/
var FlashGallery = Class.create({
	initialize: function(container, overlay, width, height, aplay){
		this.container = container;
		this.overlay = overlay;
		this.width = width;
		this.height = height;
		//this.dir = "/flash/flv/";
		//this.player = "/flash/allen_player.swf";
		this.player = "http://www.youtube.com/v/";
		this.playerDiv = $('flash_player');
		this.playerDivHTML = $('flash').innerHTML;
		this.closeBtn = this.overlay.down('.close');
		this.modalWindow = $('modal_overlay');
		this.videos = [];
		//this.aplay = aplay; // autoplay = true or false
		
		this.flashvars = {};
		//	this.flashvars.graphic_url =  "/img/media/misc/media.main.vid.pic.jpg";
			
		this.params = {};
			this.params.wmode = "transparent";
			this.params.allowscriptaccess = "always";
		
		this.thumbs = this.container.select("li.video");
		this.overlayThumbs = this.overlay.select("li.video");
		
		this.thumbs.each(function(el, i) {
			this.videos[i] = this.player + this.thumbs[i].down('img').id;
			el.observe('click', this.open.bindAsEventListener(this, i));
		}.bind(this));
		
		this.overlayThumbs.each(function(el, i) {
			el.observe('click', this.swapVideo.bindAsEventListener(this, i));
		}.bind(this));
		
		this.closeBtn.observe('click', this.close.bind(this));
	},
	open: function(ev, i) {
		this.centerPop();
		this.initModalWindow();
		this.overlay.show();
		this.showActive(i);
		//this.flashvars.video_url = this.videos[i];
		//this.flashvars.aplay = this.aplay;
		swfobject.embedSWF(this.player + this.thumbs[i].down('img').id + '&enablejsapi=1' + '&playerapiid=ytplayer' + '&fs=1' + '&autoplay=1' + '&showsearch=0' + '&rel=0', this.playerDiv.id, this.width, this.height, "8.0.0", "expressInstall.swf", this.flashvars, this.params);
		this.overlay.down('h4').innerHTML = this.thumbs[i].down('.title').innerHTML;

		if(ev) { 
			ev.stop();
		}
	},
	close: function(ev) {
		this.overlay.fade({duration: .1, afterFinish:function(){
			$('flash').update(this.playerDivHTML);
		}.bind(this)});
		
		this.modalWindow.hide();
		this.overlay.hide();
		this.deselectAll();

		if(ev) { 
			ev.stop();
		}
	},
	centerPop: function() {
		Position.Center(this.overlay);
	},
	initModalWindow: function() {
		this.modalWindow.style.height = $$('body').first().getHeight() + "px";
		this.modalWindow.show();
	},
	swapVideo: function(ev, i) {
		this.showActive(i);
		this.flashvars.video_url = this.videos[i];
		//this.flashvars.aplay = this.aplay;
		swfobject.embedSWF(this.player + this.thumbs[i].down('img').id + '&enablejsapi=1' + '&playerapiid=ytplayer' + '&fs=1' + '&autoplay=1' + '&showsearch=0' + '&rel=0', this.playerDiv.id, this.width, this.height, "8.0.0", "expressInstall.swf", this.flashvars, this.params);
		this.overlay.down('h4').innerHTML = this.overlayThumbs[i].down('.title').innerHTML;
		
		ev.stop();
	},
	deselectAll: function() {
		this.overlayThumbs.invoke('removeClassName', 'active');
	},
	showActive: function(i) {
		this.deselectAll();
		this.overlayThumbs[i].addClassName("active");
	}
});

/*----------------------------------------------------------------------------------------*/

document.observe('dom:loaded', function(){
	new PhotoGallery($('colB'), $('overlayPic'));
	new FlashGallery($('colA'), $('overlayVid'), 366, 277, true);
	
});