//Init nav
var nav;
Event.observe(window,"load",function() {
	//Create new portfolio nav
	if($('portfolioNav')) {
		nav = new PortfolioNav($('portfolioNav'));
	} else
		alert('portfolioNav not found');
});
//Portfolio Nav
function PortfolioNav(div) {
	//Portfolio nav div
	this.div = $(div);
	//Array of portfolio nav item divs
	this.itemDivs = false;										//Portfolio items are 56px+7px=63px wide
	//Array of portfolio nav item classes
	this.items = new Array();
	//Left arrow div
	this.leftArrowDiv = this.div.getElementsByClassName('portfolioNavArrowLeft')[0];
	//Right arrow div
	this.rightArrowDiv = this.div.getElementsByClassName('portfolioNavArrowRight')[0];
	//Overflow div containing nav items
	this.overflowDiv = this.div.getElementsByClassName('portfolioNavItemsOverflow')[0];
	//Effect queue for movement
	this.moveEffectQueue = 'portfolioMoveQueue';
	//Portfolio nav position
	this.navPosition = 0;
	if(!this.leftArrowDiv)
		alert("Unable to find left arrow");
	if(!this.rightArrowDiv)
		alert("Unable to find right arrow");
	if(!this.overflowDiv)
		alert("Unable to find overflow");
	this.init();
}

PortfolioNav.prototype = {
	init:function() {
		//Get portfolio nav item divs
		this.itemDivs = $A(this.div.getElementsByClassName('portfolioNavItemContainer'));
		//Resize overflow div
		this.overflowDiv.style.width = ((this.itemDivs.length+1)*63)+"px";
		//Create nav item classes
		if(this.itemDivs.length > 0) {
			this.itemDivs.each(function(node) {
				//alert(node);
				this.items.push(new PortfolioNavItem(node));
			}.bind(this));
		} else
			alert('no portfolioNavItems found');
		
		//Set up arrow mouse events
		Event.observe(this.leftArrowDiv,"click",this.leftArrowClick.bindAsEventListener(this));
		Event.observe(this.rightArrowDiv,"click",this.rightArrowClick.bindAsEventListener(this));
		
		//Set arrows
		this.setArrows();
	},
	leftArrowClick:function() {
		//Check if we're at leftmost edge
		if(this.navPosition > 0) {
			//Move nav left by width of one item
			Effect.MoveBy(this.overflowDiv,0,63,{duration:0.3,queue:{position:'end',scope:this.moveEffectQueue}});
			//Decrement nav position by 1
			this.navPosition--;
			//Set active/disabled left & right arrows
			this.setArrows();
		}
	},
	rightArrowClick:function() {
		//Check if we're at rightmost edge
		if(this.navPosition < (this.itemDivs.length - 14)) {
			//Move nav right by width of one item
			Effect.MoveBy(this.overflowDiv,0,-63,{duration:0.3,queue:{position:'end',scope:this.moveEffectQueue}});
			//Increment position by 1
			this.navPosition++;
			//Set active/disabled left & right arrows
			this.setArrows();
		}
	},
	unsetSelected:function() {
		this.items.each(function(node) {
			node.unsetSelected();
		});
	},
	setArrows:function() {
		//If we have enough items to need arrows
		if(this.itemDivs.length - 14 > 0) {
			//Disable left arrow
			if(this.navPosition <= 0)
				this.leftArrowDiv.style.visibility = 'hidden';
			else
				this.leftArrowDiv.style.visibility = 'visible';
			//Disable right arrow
			if(this.navPosition >= (this.itemDivs.length - 14))
				this.rightArrowDiv.style.visibility = 'hidden';
			else
				this.rightArrowDiv.style.visibility = 'visible';
		} else {
			this.leftArrowDiv.style.visibility = 'hidden';
			this.rightArrowDiv.style.visibility = 'hidden';
		}
	}
};

//Portfolio Nav Item
function PortfolioNavItem(div) {
	this.div = $(div);
	this.image = this.div.getElementsByClassName('portfolioNavImage')[0];
	this.selected = false;
	this.client = '';
	this.init();
}

PortfolioNavItem.prototype = {
	init:function() {
		//Listeners
		Event.observe(this.div,"mouseover",this.mouseOver.bindAsEventListener(this));
		Event.observe(this.div,"mouseout",this.mouseOut.bindAsEventListener(this));
		Event.observe(this.div,"click",this.onClick.bindAsEventListener(this));
		//Set selected
		if(this.div.hasClassName('portfolioNavItemSelected'))
			this.selected = true;
		//Set client name
		this.client = this.div.id.replace('NavItem','');
	},
	mouseOver:function(e) {
		//If item isn't selected swap image
		if(!this.selected) {
			this.div.addClassName('mouseOver');
		}
	},
	mouseOut:function(e) {
		//If item isn't selected swap back to original image
		if(!this.selected)
			this.div.removeClassName('mouseOver');
	},
	onClick:function(e) {
		//Unset all other nav items
		nav.unsetSelected();
		//Set this nav item to selected
		this.setSelected();
		//AJAX request for art
		new Ajax.Request('portfolio/'+this.client+'/art.html', {
			method: 'get',
			onSuccess: this.onClickCallback.bindAsEventListener(this),
			onFailure: function(transport) { alert('There was an error processing your request: '+transport.status); }
	 	});
	},
	onClickCallback:function(response) {
		$('portfolioContent').innerHTML = response.responseText;
	},
	setSelected:function() {
		//PNG fix doesn't work if you add class with transparent background image
		this.div.addClassName('portfolioNavItemContainerSelected');
		//this.div.removeClassName('transparent50');
		this.selected = true;
	},
	unsetSelected:function() {
		this.div.removeClassName('portfolioNavItemContainerSelected');
		//this.div.addClassName('transparent50');
		this.selected = false;
	}
};