window.addEvent("domready",function() {
	var menuitems = $$('#menu ul li a');
	var menuslide = $('slide');
	var left = $('leftbtn');
	var right = $('rightbtn');
	var itemwidth = menuitems[0].getStyle("width").toInt()+5;
	var visibleitems = ($('mask').getStyle("width").toInt()/itemwidth).round();
	var maxmove = menuitems.length - visibleitems;
	var maxcheck = 0;
	var blockfx = false;
	var offset=0;
	var rootPath = "http://www.richard-bell.co.uk";
	var text = $('itemtext');
	var image = $('itemlarge');
	var imagecontainer = $('imagecontainer');
	var activeItem = 0;

	
	left.addEvent("click", function() {
		if((maxcheck!=-maxmove)&&(blockfx==false)) {
			slideMenu(1)
		}
	});
	right.addEvent("click", function() {
		if((maxcheck!=0)&&(blockfx==false)) {
			slideMenu(0)
		}
	});
	
	function slideMenu(pos) {
		
		currentpos = menuslide.getStyle("left").toInt();
		
		if(pos==1) {
			move = currentpos-itemwidth
			maxcheck--;
		}
		else {
			move = currentpos+itemwidth
			maxcheck++;
		}

		if(blockfx==false) {
			var myFx = new Fx.Tween(menuslide,{duration:1000, link:'ignore',onComplete: function() {
	    		blockfx=false;
	    		checkarrow(maxcheck)
	    	}	    	
			});
			
			myFx.start('left', currentpos,move);
			blockfx=true;
		}
	}
	
	function checkarrow(max) {
				if(max==-maxmove) {
					arrowchange(left,"inactive");
					arrowchange(right,"active");
				}
				else if (max==0) {
					arrowchange(left,"active");
					arrowchange(right,"inactive");
				}
				else {
					arrowchange(left,"active");
					arrowchange(right,"active");
				}
	}
	
	function arrowchange(arrow,state) {
		if(state=="inactive") {
			arrow.addClass("inactive");
			arrow.removeClass("active");
		}
		else {
			arrow.removeClass("inactive");
			arrow.addClass("active");
		}
		
	}
	
	function imageLoaded(img) {
		var newImage = new Element('img', {
	    src: img,
	    styles: {
        	opacity: 0
    	}
	    
		});
		imagecontainer.removeClass("loading");
		newImage.inject(imagecontainer);
		newImage.fade("in");

	}
	
	var req = new Request.JSON({
		method: 'get',
		onComplete: function(response) {
			var myEffect = new Fx.Morph(text, {duration: 400, transition: Fx.Transitions.Sine.easeOut, onComplete: function() {
				text.empty();
				text.set({html: response.text});
				text.fade("in");
			}
			});

			myEffect.start({
			    'opacity': [1, 0]
			});
			
			imagecontainer.empty();
			
			newImage = Asset.image(response.image, {
			    onLoad: imageLoaded(response.image)
			});

					
		}
	})
	
	menuitems.each(function (el,k) {
		
		if(el.hasClass('active')==true) {
			activeItem = k;	
		}
		if(el.hasClass('active')==true&&k>3) {
			offset = -((k-maxmove)*itemwidth);
			menuslide.setStyle("left",offset);
		}

		var morph = new Fx.Morph(el,{ 'duration':'400', link:'cancel' });
		var url = el.get("href");
		var filename = url.substring(url.lastIndexOf('/'));
	    el.addEvents({
	      'mouseenter' : function() { morph.start({ 'opacity':1 }) },
	      'mouseleave' : function() {
	      	if(k!=activeItem) {
	      		morph.start({ 'opacity': 0.5})
	      	}
	      },
	      'click': function(evt) {
	      		evt.stop();
	      		if(k!=activeItem) {
	      		imagecontainer.addClass("loading");
	      		menuitems[activeItem].removeClass("active");
	      		menuitems[activeItem].setStyle("opacity",0.5);
	      		activeItem = k;
				menuitems[activeItem].addClass("active");
				menuitems[activeItem].setStyle("opacity",1);
	      		req.options.url =  rootPath+'/index.php/portfolio/ajax'+filename;
				req.send();
				}
	      }
	    
	    });
	});
	
	maxcheck = offset/itemwidth
	checkarrow(maxcheck);
	
	
	

})