// JavaScript Document
// Crystal Pix website scripts

//Gallery navigation
var createSlideNav = function(navId) {
	var nav = $(navId).getElements('a');
	var categoryMove = new Fx.Tween($('categories'),{'link':'cancel'});
	nav.activeElement = 0;
	
	var activateButton = function(el) {
			nav[nav.activeElement].overEl.fx.start('width','0px');
			el.overEl.fx.start('width',el.getStyle('width'));
			nav[nav.activeElement].activeItem = false;
			el.activeItem = true;
			nav.activeElement = el.posIndex;
	
	}
	
	nav.each(function(el,i) {
		el.posIndex = i;
		el.activeItem =false;
		
		var overEl = new Element('div',
		{
			'class':'overstate',
			'styles':{
				'background-color':'#FFFFFF',
				'height':'30px',
				'width':'0px',
				'background-image':'url(images/work_buttons.gif)'
			}
		}
		
		);
		overEl.fx = new Fx.Tween(overEl,{'link':'cancel'});
		el.overEl = overEl;
		overEl.inject(el);
		el.setStyle('background-image','url(images/work_buttons.gif)');
		el.yPos = -(el.getStyle('height').toInt() * i);
		el.setStyle('background-position','0px '+el.yPos+'px');
		var p = '-'+el.getStyle('width').toInt()+'px -'+(el.getStyle('height').toInt()*el.posIndex)+'px';
		el.overEl.setStyle('background-position',p);
		el.addEvent('click',function(e) {
			e.preventDefault();
			if(el.activeItem) {
			//do nothing
			}else{
				activateButton(this);
        		var tgt = this.posIndex+1;
				var tgtTop = (tgt.toInt() * -420)+420;
				categoryMove.start('top',tgtTop);
				
			}
			
		});
	
	});
	
	
	activateButton(nav[0]);
	}