Element.Properties.href = {get: function(){
	return (!this.href) ? null : this.getAttribute('href', 2);
}};

var slide = function (box, phase) {
	var mt = box.getStyle('margin-top').toInt();
	var sq = -6;
	var space = 50;

	var myMorph = (phase=='in') ? {
			'margin-top':	[mt-space, mt],
			'opacity': 		[0, 1],
			'clip': 		[[sq, box.offsetWidth, sq, sq],[sq, box.offsetWidth, box.offsetHeight, sq]] 									} : {
			'margin-top':	[mt, mt], 
			'opacity': 		[1, 0],
			'clip': 		[[sq, box.offsetWidth, box.offsetHeight, sq],[sq, box.offsetWidth, sq, sq]] 									};

	return new Fx.Morph(box,{
			duration:		2000,
			transition:		new Fx.Transition(Fx.Transitions.Back, 3).easeInOut,
			link: 			'chain'
		}).start(myMorph);

}

var fade = function (img, phase) {

	var myMorph = (phase=='in') ? {
			'opacity': 		[0, 1]
		} : {
			'opacity': 		[1, 0]
		};
		
	return new Fx.Morph(img,{
			duration:		2000, 
			link: 			'chain'
		}).start(myMorph);

}

function changeScreen(el) {
		stopScreenShow();
		var newView = $(el.getAttribute('href').split('#')[1]).getParent(); // New Screen
		var box = newView.getElement('.main').getElement('.box'); // New Box
			box.set('opacity',0); // Set initial value for new Box			
		var img = box.getParent(); // New Image
			img.setStyle('z-index',100); // Set image as top layer
			img.getParent().setStyle('z-index',100); // Set view as top layer
			img.getParent().set('visibility','visible'); // Set view visible
			img.getParent().set('opacity',1); // Set view opacity
		var old = $$('.active')[0]; // Select old
				old.setStyle('z-index',1);
				fade(old,'out');
		img.set('opacity',0); // Set initial value for new Image
		newView.addClass('active'); // Show new Screen
		newView.getElement('.main').addClass('active'); // Show new Box
		fade(img,'in').addEvent('complete', function() { // Fade in new Screen
			$$('.active_link').removeClass('active_link'); // Remove Highlight
			old.removeClass('active'); // Hide old Screen
			old.getElements('.active').removeClass('active');
			el.getParent().addClass('active_link'); // Highlight new Link
			el.getParent().getChildren('ul').getElement('li').addClass('active_link'); // Highlight new Sublink
			slide(box,'in');
			// if(!newView.get('class').contains('noslide')) startScreenShow();
		});
}

function changeBox(el) {
		var newView = $(el.href.split('#')[1]).getParent().getParent().getParent();
		var box = newView.getElement('.box'); // New Box
			box.set('opacity',0); // Set initial value for new Box
		var img = box.getParent(); // New Image
		var old = $$('.active')[1]; // Select old
			old.setStyle('z-index',1);
			fade(old,'out');
		img.setStyle('z-index',100); // Set image as top layer
		img.set('opacity',0); // Set initial value for new Image
		newView.addClass('active'); // Show new Screen
		fade(img,'in').addEvent('complete', function() { // Fade in new Screen
			$$('.sub_nav .active_link').removeClass('active_link'); // Remove Highlight
			old.removeClass('active'); // Hide old Screen
			el.getParent().addClass('active_link'); // Highlight new Link
			newView.addClass('active');
			slide(box,'in');
		});
}

function addLinks() {	
	$$('#top_nav li a').each(function(el) {
		el.addEvent('click',function(e) {
		new Event(e).stop();
		if(!el.getParent().get('class').contains('active')) {
			if(!el.getParent().getParent().get('class').contains('sub_nav')) {
				changeScreen(el);
			} else {
				changeBox(el);
			}
		}
		});		
	});
}

function addSqueezeBoxes() {
SqueezeBox.parsers.extend({

	gallery: function(preset) {
		return (preset || (this.url && !(/^(?:javascript|#)/i).test(this.url))) ? this.url : false;
	}
});

SqueezeBox.handlers.extend({

	gallery: function(url) {
		this.asset = new Request.HTML($merge({
			method: 'get'
		}, this.options.ajaxOptions)).addEvents({
			onSuccess: function(resp, rtext) {
				size = {x: rtext[0].getStyle('width'), y: rtext[0].getStyle('height')};					
				size.x = size.x.toInt() + 10;
				size.y = size.y.toInt() + 10;
				this.asset = resp;
				this.asset.width = size.x;
				this.asset.height = size.y;
				this.applyContent(this.asset, size);
					
				this.fireEvent('onAjax', [resp, this.asset]);
				this.asset = null;
			}.bind(this),
			onFailure: this.onError.bind(this)
		});
		this.asset.send.delay(10, this.asset, [{url: url}]);
	}
	
});

	SqueezeBox.initialize({	
		onUpdate: function() {
				window.sb = (SqueezeBox.url.contains('.html')) ? SqueezeBox.url: window.sb;
				window.img = SqueezeBox.url;
				if($$('a[rel=image]').length>0) SqueezeBox.assign($$('a[rel=image]'));
 		},
		onClose: function (e) {
			if(window.img.contains('.jpg')) {
				window.img = false;
				(function() {$$('a[href='+window.sb+']').fireEvent('click')}).delay(10);
				return false;
			}
		},		
		ajaxOptions: {
			method: 'get' // we use GET for requesting plain HTML
		}
	});
	SqueezeBox.assign($$('a[rel=boxed]'),{handler: 'gallery'});
}

function screenShow() {
	var view = $$('#top_nav > .active_link');
	var submenu = view.getElements('.sub_nav > li > a');
	var subview = view.getElement('.sub_nav > .active_link');
	try {
		var nextLink = subview.getNext().getElement('a')[0];
	} catch(e) {
		var nextLink = submenu[0][0];
	}
		changeBox(nextLink);	
}

function startScreenShow() {
	window.screenshow = screenShow.periodical(9000);
	if($('pause_btn'))	$('pause_btn').setStyle('display','block');
	if($('play_btn'))	$('play_btn').setStyle('display','none');		
}

function stopScreenShow() {
	if(window.screenshow) $clear(window.screenshow);
	if($('pause_btn'))	$('pause_btn').setStyle('display','none');
	if($('play_btn'))	$('play_btn').setStyle('display','block');		
}

function playNext() {
	stopScreenShow();
	var view = $$('#top_nav > .active_link');
	var submenu = view.getElements('.sub_nav > li > a');
	var subview = view.getElement('.sub_nav > .active_link');
	try {
		var nextLink = subview.getNext().getElement('a')[0];
	} catch(e) {
		var nextLink = submenu[0][0];
	}
		changeBox(nextLink);
}


function playPrev() {
	stopScreenShow();
	var view = $$('#top_nav > .active_link');
	var submenu = view.getElements('.sub_nav > li > a');
	var subview = view.getElement('.sub_nav > .active_link');
	try {
		var prevLink = subview.getPrevious().getElement('a')[0];
	} catch(e) {
		var prevLink = submenu[0][submenu[0].length];
	}
		changeBox(prevLink);
}

function init() {
	addLinks();
	addSqueezeBoxes();
	
	// Initial Box Slide In
	var box = $$('.active')[0].getElement('.box');
		box.set('opacity',0);
	slide(box,'in');
	// startScreenShow();
	new Element('div', {'id': 'prev_btn'}).inject($('page')).addEvent('click',playPrev);
	new Element('div', {'id': 'play_btn'}).inject($('page')).addEvent('click',function() {
		startScreenShow();
	});
	new Element('div', {'id': 'pause_btn'}).inject($('page')).addEvent('click',function() {
		stopScreenShow();
	});	
	new Element('div', {'id': 'next_btn'}).inject($('page')).addEvent('click',playNext);
	if($('pause_btn'))	$('pause_btn').setStyle('display','none');
	if($('play_btn'))	$('play_btn').setStyle('display','block');		
}

window.addEvent('domready', init);