var nav_el_width = 0;
var num_portfolio_items;
var portfolio_nav_size;
var portfolio_nav_offsets;
window.addEvent("domready",function(){
	portfolio_nav_offsets = {
		x: ($('portfolio_nav').getPosition().x - $('content').getPosition().x),
		y: ($('portfolio_nav').getPosition().y - $('content').getPosition().y)
	}
	var loader = new Element('div').setProperty('id','ajax_loader').setOpacity(0).injectTop('content');
	loader.setStyles({
		'left' : ($('portfolio_nav').getCoordinates().width - loader.getCoordinates().width) / 2 + portfolio_nav_offsets.x,
		'top' : ($('portfolio_nav').getCoordinates().height - loader.getCoordinates().height) / 2 + portfolio_nav_offsets.y
	})
	
	var overlay = new Element('div').setProperty('id','portfolio_nav_overlay').setOpacity(0).injectTop('content');
	overlay.addEvent('click',function(ev){
		new Event(ev).preventDefault().stopPropogation();
	});
	overlay.setOpacity(0.01).setStyles({
		'left' : (portfolio_nav_offsets.x),
		'top' : (portfolio_nav_offsets.y),
		'width' : $('portfolio_nav').getSize().size.x + 'px',
		'height' : $('portfolio_nav').getSize().size.y + 'px',
		'position' : 'absolute',
		'visibility' : 'hidden',
		'z-index': 100
	});
	nav_el_width = $$("#p_nav_wrapper .wrapper")[1].getLeft() - $$("#p_nav_wrapper .wrapper")[0].getLeft();
	num_portfolio_items = $$("#p_nav_wrapper .wrapper").length;
	portfolio_nav_size = $("p_nav_wrapper").getStyle("width").toInt();
	// Do this in reverse or else elements slide over due to the box model and 
	// all end up in the same spot
	$$('#p_nav_wrapper .wrapper').reverse().each(function(n){
		n.setStyles({
			left: (n.getCoordinates().left - $('p_nav_buts').getCoordinates().left) + 'px',
			top: 0,
			position: 'absolute'
		})
		n.addClass('original__').setProperty("title",n.getFirst().getProperty('href'));
	});
	/*$$("#portfolio_nav a").each(function(n){n.addEvent('click',function(ev){
		var e = new Event(ev);
		e.preventDefault();
	})});*/
	$("left").replaceWith(new Element('div').setProperty('id','left'));
	$("right").replaceWith(new Element('div').setProperty('id','right'));
	$("left").addEvent("click",function(){
		this.blur();
		if (!this.clicked) {
			slide_bar((nav_el_width * 1.5),this);
		}
	});
	$("right").addEvent("click",function(ev){
		this.blur();
		if (!this.clicked) {
			slide_bar(-(nav_el_width * 1.5),this);
		}
	});
	$("p_nav_wrapper").addEvent('click',function(ev){
		var the_event = new Event(ev);
		the_event.preventDefault();
		var n = the_event.target;
		if (n.parentNode.tagName.toLowerCase() == "a") {
			n = n.parentNode;
		}
		if (n.getProperty("href") != null && n.getProperty("href").length > 0) {
			ajax_loader(true);
			var new_content = $('inner_content').clone();
			coords = $('inner_content').getCoordinates();
			new_content.empty();
			new_content.setStyles(
				{
					background: '#fff',
					position: 'absolute', 
					visibility: 'hidden', 
					opacity: 0, 
					zIndex: 100, 
					width: coords.width,
					left: coords.left,
					top: coords.top,
					height: coords.height,
					overflow: 'hidden',
					display: 'none'
				}
			).setProperty('id','new_content');
			new_content.injectAfter($('inner_content'));
			new Ajax((n.href + (/\/$/.test(n.href) ? '' : '/') + 'ajax'),
				{
					onSuccess: function() {
						/* $('new_content').effect('opacity',
							{
								onComplete: function() {
								},
								duration: 500
							}
						).start(1); */
						ajax_loader(false);
						$('inner_content').empty();
						$('inner_content').adopt($('new_content').getChildren());
						$('new_content').remove();
						loadNavBar();
						runSIFR();
					},
					onFailure: function() {
						ajax_loader(false);
						$('new_content').remove();
					},
					update: "new_content", 
					data: "ajax=true"
				}
			).request();
		}
	});
	loadNavBar();
	update_bar();
});

function slide_bar(amt,self_node) {
	var movement = new Object();
	$$('#p_nav_buts .wrapper').each(function(n,idx){
		movement[idx] = { 'left': [n.getStyle('left').toInt() + 'px',(n.getStyle('left').toInt() + amt) + 'px'] }
	});
	new Fx.Elements($$('#p_nav_buts .wrapper'),{
		duration:1000, 
		onStart: function(){self_node.clicked = true;}, 
		onComplete: function(){self_node.clicked = false; update_bar();}
	}).start(movement);
}

function update_bar(){
	$$("#p_nav_buts .clone__").each(function(n){
		if ( (n.getCoordinates().right > $('p_nav_wrapper').getLeft()) && (n.getLeft() < $('p_nav_wrapper').getCoordinates().right) ) {
			var target_node = $$('#p_nav_buts .original__[title="' + n.getAttribute('title') + '"]')[0]
			if ( (target_node.getCoordinates().right > $('p_nav_wrapper').getLeft()) && (target_node.getLeft() < $('p_nav_wrapper').getCoordinates().right) ) {
				target_node.removeClass("original__").addClass("clone__");
			} else {
				target_node.remove();
			}
			n.removeClass("clone__").addClass("original__");
		} else {
			n.remove();
		}
	});
	
	/*$$("#p_nav_buts .original__").each(function(node,idx){
		if ( idx <= first - 2 ) {
			node.injectInside($('p_nav_buts'));
		}
	});*/
		
//	var first = Math.floor(-$('p_nav_buts').getStyle('margin-left').toInt()/nav_el_width);
	var before = 0, after = 0, first = 0;
	$$('#p_nav_buts .original').each(function(n){
		if (n.getCoordinates().right < $('p_nav_wrapper').getLeft()) {
			first++;
		}
	});
	after = Math.max(0,Math.ceil(($('p_nav_wrapper').getSize().size.x - $$("#p_nav_buts .original__").getLast().getCoordinates().right + $('p_nav_buts').getLeft())/nav_el_width) + 2);
	before = Math.max(0,Math.floor(($('p_nav_buts').getLeft() - $$("#p_nav_buts .original__")[0].getLeft())/nav_el_width) + 2);
	$$("#p_nav_buts .original__").each(function(node,idx){
		 if (idx+before >= this.length) {
			node.clone().
				removeClass('original__').
				addClass('clone__').
				setStyle('left',$$("#p_nav_buts .original__")[0].getStyle('left').toInt() - (nav_el_width * ( this.length - (idx) ))).
				setProperty("title",node.getProperty('title')).
				injectBefore($$('#p_nav_buts .original__')[0]);
			num_portfolio_items++;
		} else if (idx < after) {
			node.clone().
				removeClass('original__').
				addClass('clone__').
				setStyle('left',$$("#p_nav_buts .wrapper").getLast().getStyle('left').toInt() + nav_el_width).
				setProperty("title",node.getProperty('title')).
				injectInside($("p_nav_buts"));
			num_portfolio_items++;
		}
	},$$("#p_nav_buts .original__"));
	//$('p_nav_buts').setStyle('margin-left',-nav_el_width * 2);
	num_portfolio_items = $$("#p_nav_buts .wrapper").length;	
}

function ajax_loader(display) {
	if (display) {
		$('portfolio_nav_overlay').setStyle('visibility','visible');
		$('inner_content').effect('opacity',{duration:300}).start(0.4);
		if (window.ie) {
			$('img_wrapper').effect('opacity',{duration:300}).start(0.4);
		}
		$('ajax_loader').effect('opacity',{duration:300}).start(0.9);
	} else {
		$('inner_content').effect('opacity',{duration:300,onComplete:function(){$('portfolio_nav_overlay').setStyle('visibility','hidden');}}).start(1);
		if (window.ie) {
			$('img_wrapper').effect('opacity',{duration:300}).start(1);
		}
		$('ajax_loader').effect('opacity',{duration:300}).start(0);
	}
}

function loadNavBar() {
	/* The moving image arrow */
	var cur_image = 1;
	var blue_arrow = new Element('div').setProperty('id','blue_arrow');
	var num_pos = [4,27,50,73,96,119,142,165,189,215,246,276,306,336];
	blue_arrow.setStyles({
		background: "url('/media/images/v3/blue_arrow.png') no-repeat top left",
		width: '23px',
		height: '27px',
		position: 'absolute',
		left: '4px',
		top: '-2px',
		aopacity: 0
	});
	
	$('number_bar').adopt(blue_arrow);
	// $('blue_arrow').effect('opacity').start(1);
	$('overlay_number_bar').setStyles({
		width: '23px',
		marginLeft: '4px',
		backgroundPosition: '-4px 0px',
		visibility: 'visible'
	});
	$('number_bar').setStyles({
		width: ( num_pos[$$('.img_nav').length - 1] + $('blue_arrow').getStyle('width').toInt()) + 'px'
	})
	if (window.ie6) {
		$('overlay_number_bar').setStyle('background-image',"url('/media/images/v3/numbers_white.gif')");
		$('blue_arrow').setStyles({
			background: 'none',
			filter: "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='/media/images/v3/blue_arrow.png',sizingMethod='crop')"
		})
	}
	
	$$('.img_nav').each(function(n){
		n.setStyles({
			position: 'absolute',
			top: '0',
			left: (num_pos[n.getText().toInt()-1] + 'px')
		});
		n.addEvent('click',function(ev){
			var e = new Event(ev).preventDefault();
			new Event(ev).preventDefault();
			e.target.blur();
			
			new Asset.image(
				$("img_wrapper").getFirst().src.replace(/\d/,n.getText().toInt()),
				{
					onload: function() {
						var img = this;
						img.setStyles({ display: '',position: 'absolute', left: 0, top: 0, opacity: 0});
						img.effect('opacity', {onComplete: function(){$("img_wrapper").getFirst().src = img.src; img.remove()}}).start(1);
						//});
					}
				}
			).injectAfter($("img_wrapper").getFirst()).setStyle('display','none');						
			var old_image = cur_image;
			cur_image = e.target.getText().toInt();
			var cur_x = $('blue_arrow').getStyle('left').toInt();
			var new_x = num_pos[cur_image-1];
			new Fx.Elements([$('blue_arrow'),$('overlay_number_bar')], {
				duration: 500,
				transition: Fx.Transitions.Sine.easeOut
			}).start({
				'0': {
					'left': [cur_x+'px',new_x+'px']
				},
				'1': {
					'left': [(cur_x-4)+'px',(new_x-4)+'px'],
					'background-position': [(-cur_x)+'px 0px',(-new_x)+'px 0px']
				}
			})
		})
	});				
}