window.addEvent('domready', function() {
	var status = {
		'true': 'open',
		'false': 'close'
	};
	
	//--horizontal
	var myHorizontalSlide = new Fx.Slide('portfolio_holder', {mode: 'horizontal'});
	
	var links=$$('a.h_toggle')
	links.each(function(item, index){
		if(item.id==curmenu){
			item.set({'styles': {'color': '#353535', 'text-decoration':'none'}});
		}else{
			item.set({'styles': {'color': '#aaaaaa','text-decoration':'none'}});
		}
		item.addEvent('click', function(e){
			links.each(function(item, index){
				item.set({'styles': {'color': '#aaaaaa', 'text-decoration':'none'}});
			});
			item.set({'styles': {'color': '#353535','text-decoration':'underline'}});
			curmenu=item.id;
			curhtml=item.id;
			e.stop();
			myHorizontalSlide.toggle();
		});
		item.addEvent('mouseover', function(e){
			item.set({'styles': {'color': '#ff0000','text-decoration':'underline'}});
		});
		item.addEvent('mouseout', function(e){
			if(item.id==curmenu){
				item.set({'styles': {'color': '#353535', 'text-decoration':'none'}});
			}else{
				item.set({'styles': {'color': '#aaaaaa','text-decoration':'none'}});
			}
		});
	});
	$('next').addEvent('click', function(e){
		if(curhtml==itemcount){
			curhtml=0;
		}else{
			curhtml++;
		}
		curmenu=curhtml;
		links.each(function(item, index){
			if(item.id==curmenu){
				item.set({'styles': {'color': '#353535', 'text-decoration':'none'}});
			}else{
				item.set({'styles': {'color': '#aaaaaa','text-decoration':'none'}});
			}
		});
		e.stop();
		myHorizontalSlide.toggle();
	});
	$('next').addEvent('mouseover', function(e){
		$('next').set({'styles': {'color': '#ff0000','text-decoration':'underline'}});
	});
	$('next').addEvent('mouseout', function(e){
		$('next').set({'styles': {'color': '#aaaaaa','text-decoration':'none'}});
	});
	
	$('back').addEvent('click', function(e){
		if(curhtml==0){
			curhtml=itemcount;
		}else{
			curhtml--;
		}
		curmenu=curhtml;
		links.each(function(item, index){
			if(item.id==curmenu){
				item.set({'styles': {'color': '#353535', 'text-decoration':'none'}});
			}else{
				item.set({'styles': {'color': '#aaaaaa','text-decoration':'none'}});
			}
		});
		e.stop();
		myHorizontalSlide.toggle();
	});
	$('back').addEvent('mouseover', function(e){
		$('back').set({'styles': {'color': '#ff0000','text-decoration':'underline'}});
	});
	$('back').addEvent('mouseout', function(e){
		$('back').set({'styles': {'color': '#aaaaaa','text-decoration':'none'}});
	});

	// When Horizontal Slide ends its transition, we check for its status
	// note that complete will not affect 'hide' and 'show' methods
	myHorizontalSlide.addEvent('complete', function() {
		if(status[myHorizontalSlide.open]=='close'){
			$('portfolio_holder').set({html: rowsarray[curhtml]});
			myHorizontalSlide.slideIn();
		}
	});
});