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

	// Also todo - add a timeout of say 20 seconds after which time a hit appears telling user how to navigate if nothing has happened
	//
	
    var portfolio = $('portfolio');
    portfolio.set('rel',0); // set the rel to be the current portfolio item being viewed
    var ul = portfolio.getElement('ul');
    var lis = ul.getElements('li');
    var nxt = $$('.portfolio-nav-right');
    var prv = $$('.portfolio-nav-left');
    var current_width = 700;
    var total_width = current_width * lis.length;

    for(var x in lis)
    {
        //alert(typeof lis[x].setStyle);
        if(typeof lis[x].setStyle == 'function')
        {
            //alert('display ' + x);
        	lis[x].setStyle('display','inline');
        }
    }
    ul.setStyle('width',total_width);
    
    nxt.addEvent('click',function(){
        var current_left = ul.getStyle('left').replace(/px$/).toInt();
        var current_view = portfolio.get('rel').toInt();
        // find the width of the current item so we know how much to move by
        var current_li = lis[current_view];
        //var current_width = current_li.getStyle('width').replace(/px$/).toInt();
        if (lis[current_view + 1] != undefined){
            ul.set('tween',{duration:400}).tween('left',current_left - current_width);
            portfolio.set('rel',current_view + 1);
        }
        else
        {
            ul.set('tween',{duration:400}).tween('left',0);
            portfolio.set('rel',0);
        }
        return false;
    });

    prv.addEvent('click',function(){
        var current_left = ul.getStyle('left').replace(/px$/).toInt();
        var current_view = portfolio.get('rel').toInt();
        // find the width of the current item so we know how much to move by
        var current_li = lis[current_view];
        //var current_width = current_li.getStyle('width').replace(/px$/).toInt();
        if (lis[current_view - 1] != undefined){
            ul.set('tween',{duration:400}).tween('left', current_left + current_width);
            portfolio.set('rel',current_view - 1);
        }
        else
        {
            ul.set('tween',{duration:400}).tween('left', -(total_width) + current_width);
            portfolio.set('rel',lis.length - 1);
        }
        return false;
    });
});