window.addEvent('load', init);
window.addEvent('domready', ready);
/*window.addEvent('load', function() {
	// Initialize Lightbox
	Lightbox.init({showControls: true});
});*/

function init() {	
	// Initialize the accordion and display the first item by default
	var accordion = new Accordion('#gallery h1', '#gallery .thumbnails', {
		show: 2,
		opacity : true,
		alwaysHide: true,
		onActive: function(toggler, element) {
			toggler.addClass('active');
			$E('.state', toggler).setText('Close');
		},
		onBackground: function(toggler, element) {
			toggler.removeClass('active');
			$E('.state', toggler).setText('Open');
		}
	}, $('gallery'));
	
	// get the Fragment Identifier (#) from URL and display
	// the appropriate accordion group
	var fragmentID = location.href.getFragmentIdentifier();
	$$('#gallery h1').each(function(item, index) {
		if (item.id == fragmentID)
			accordion.display(index);
	});
	
	// Initialize Lightbox
	Lightbox.init({showControls: true});
};

function ready() {
	
	// Default preview image and add onMouseOver functionality to thumbnails
	$$('#gallery .thumbnails').each(function(item, index) {
		if ($E('.preview', item)) {
		//alert(item.getFirst().getNext().className);
		var preview = $E('.preview', item);//item.getFirst();
		var firstThumb = $E('.group', item).getFirst().getFirst();//preview.getNext().getFirst().getFirst();
		var first = firstThumb.getProperty('href');
		var paths = first.split('/');
		var path = paths[0];
		for (var i=1; i<paths.length-1; i++)
			path = path + '/' + paths[i];
		//alert(path + '/preview/' + paths[paths.length-1]);
		new Element('img', {
			'src': path + '/preview/' + paths[paths.length-1],
			'alt': ''
		}).injectInside(preview);
		var caption = new Element('div', {
			'class': 'caption'
		});
		caption.setText(firstThumb.getProperty('title'));
		caption.injectInside(preview);
		}
	});
	
	$$('#gallery .thumbnails .thumb img').each(function(item, index) {
		item.addEvent('mouseenter', function(e) {
			var par = $E('.preview', this.getParent().getParent().getParent().getParent());
			par.getFirst().remove();
			par.getFirst().remove();
			var paths = item.getParent().getProperty('href').split('/');
			var path = paths[0];
			for (var i=1; i<paths.length-1; i++)
				path = path + '/' + paths[i];
			new Element('img', {
				'src': path + '/preview/' + paths[paths.length-1],
				'alt': ''
			}).injectInside(par);
			var caption = new Element('div', {
				'class': 'caption'
			});
			caption.setText(item.getParent().getProperty('title'));
			caption.injectInside(par);
			//alert(this);
		});
	});
}

String.extend({
	getFragmentIdentifier: function() {
		return o = this.split('#')[1];
	}
});

window.addEvent('domready', function() {
	var active = $('playlist').getElement('a img.active');
	$$('#playlist a').each(function(item) {
		item.addEvents({
			'mouseenter': function() {
				var img = this.getElement('img');
				if (!img.hasClass('active')) {
					img.addClass('highlight');
				}
			},
			'mouseleave': function() {
				this.getElement('img').removeClass('highlight');
			},
			'click':function(e) {
				new Event(e).stop();
				if (active) { active.removeClass('active'); }
				active = this.getElement('img');
				active.addClass('active').removeClass('highlight');
				var vid = this.getProperty('href').replace(/^[^v]+v.(.{11}).*/,"$1");
				var embed = '<p></p><object width="425" height="344"><param name="movie" value="http://www.youtube.com/v/'+vid+'&hl=en&fs=1&rel=0&color1=0x3a3a3a&color2=0x999999"></param><param name="allowFullScreen" value="true"></param><param name="allowscriptaccess" value="always"></param><embed src="http://www.youtube.com/v/'+vid+'&hl=en&fs=1&rel=0&color1=0x3a3a3a&color2=0x999999" type="application/x-shockwave-flash" allowscriptaccess="always" allowfullscreen="true" width="425" height="344"></embed></object>';
				$('player').empty().setHTML(embed);
			}});
	});
});