function show_port(item,idx,fade) {
	if (item.getParent('li').hasClass('selected') ) {
		
		wides[idx].setStyle('z-index',1);
	  //	$('wide_title').set('text', wides[idx].getElement('img').get('alt') );
		Cufon.replace('#wide_title');
	}
	else {
		if ( wides[idx] ) wides[idx].setStyles({'left':770,'z-index':2});
	}
	
	
	
	item.addEvent('click', function(e) {
		e.stop();
		if (item.getParent('li').hasClass('selected') || busy ) {

		}
		else {
			busy = true;
			
			for (var i = wides.length - 1; i >= 0; i--){
				if ( i == idx ) {
					// console.log( wides[idx] );
					
					// $('wide_title').set('text', wides[idx].getElement('img').get('alt') );
					Cufon.replace('#wide_title');
					wides[idx].set('tween',{
							onComplete: function(){
								ports_img.setStyle('opacity',0.4);

								wides.each(function(w,j) {
									if ( w != wides[idx] ) {
										w.setStyles({'left':770,'z-index':2});
									}
								});
									
								wides[idx].setStyle('z-index',1);
								ports_li.removeClass('selected');
								dots_li.removeClass('selected');
								dots_li[idx].addClass('selected');

								busy = false;
								
							}
							})
					wides[idx].tween('left',0);
				}
				else {
					// wides[i].tween('opacity',0);
				}
					
			};
			ports_img.set('tween',{
				onComplete: function() {
					this.element.setStyles({opacity:0.01,'margin-left':0})
					this.element.set('tween',{onComplete: function(){this.element.getParent('li').addClass('selected')}});
					(function() {this.element.tween('opacity',1)}).delay(10,this);
				}
			});
			ports_img[idx].tween('margin-left',-170);
			
			ports.removeClass('selected');
			item.getParent('li').addClass('selected')
		}
	})	
	
	
}


var wides,dots,dots_li,ports,ports_img,ports_li, busy = false ;




window.addEvent('domready', function() {

if ( Browser.Engine.gecko || Browser.Engine.trident  )

   	 $('mainnav').getElements('li a').each( function(item){
		if ( !item.hasClass('clicked') ) {
			item
				.addEvent('mouseenter', function() {
					this.getElement('span').fade(1);
				})
				.addEvent('mouseleave',function(){
					this.getElement('span').fade(0.01)
				})
				.addEvent('focus', function() { 				
					this.getElement('span').fade(1)
				})
				.addEvent('blur',function(){
					this.getElement('span').fade(0.01)
				})
				.getElement('span').setStyles('opacity',0.01);
				// console.log(item)
		}
		
	}) 


	wides = $$('#wide_show li').setStyle('position','absolute');
	dots = $$('#breadcrumb a');
	dots_li = $$('#breadcrumb li');
    ports = $$('#portfolio a');
   	ports_img = $$('#portfolio img');
	ports_li = $$('#portfolio li');

	ports.each( function(item, idx ) { show_port( item,idx ) } );
	dots.each( function(item, idx ) { show_port( item,idx ) } );

})