/*	---------------------------------------------------------------------------
	CLASS:		Portfolio
	ABOUT:		Custom class for Jennifer Spencer Design Portfolio
				Shows portfolio elements using on-page anchors to select the target images
*/

var Portfolio = new Class({
	Implements: Options,
	options: {
		onComplete: $empty,
		onStart: $empty
	},
	initialize: function(){
		// add click events to all on-page anchor tags
		$$('a[href^="#"]').addEvent('click',function(e) {
			e.stop();
			var el = e.target;
			var id = el.get('href').split('#')[1];
			this.show(id);
		}.bind(this));

		// create pagination for all clients
		this.clients = $$('div.Client');
		this.clients.each(function(client,index) {
			client.getElements('h2')[0].adopt(this.paginate(client))
		}.bind(this));

		// hide loading and display secondary nav
		window.addEvent('load',function(e) {
			var secondary = $('Secondary');
			var y = secondary.getSize().y;
			$('TOC').setStyle('height',y);
			secondary.setStyle('bottom',y);
			$('Loading').fade(0);
			
			/* HACK:	allow loading div to fade,
						then destroy after a delay of one second. 
						we should really do this as a chain 
			*/
			(function(){ 
				$('Loading').destroy();
				secondary.tween('bottom',0);
			}).delay(1000);
		});

		// show the first client
		var href=window.location.href;
		var id = (href.indexOf('#') > 0)?href.split('#')[1]:this.clients[0].get('id').replace('Project','');
		this.show(id);

	},
	paginate: function(client) {
		var ul = new Element('ul',{'class':'Pagination'});
		var images = client.getElements('img')
		images.each(function(img,i) {
			img.setStyle('z-index',images.length-i);
			var li = new Element('li',{
				'text':i+1,
				'events':{
					'click':function(e) { 
						var el = e.target;
						el.getParent().getChildren().removeClass('Active');
						el.addClass('Active');
						
						images.setStyle('opacity',0);
						img.fade('in');
					}
				}
			});
			if(i==0) li.addClass('Active');
			ul.adopt(li);
		});
		return ul;
	},
	show: function(id) {
		// make the secondary navigation list item active
		var li = $$('a[href$='+id+']')[0].getParent('li');
		li.getParent('ul').getChildren('li').removeClass('Active');
		li.addClass('Active');
		
		// hide all clients
		this.clients.setStyles({
			'display':'block',
			'opacity':0
		});
		
		// display the current client
		var client = $(id+'Project');
		client.fade('in');
	}
});