$(document).ready(function() {
	if (document.getElementById("main")) {

	// colour fades
		$('#slider ul a').each(
			function (i) {
				$(this).html( $(this).html() + '<span></span>');
			
				//set opacity to 0
				$(this).children('span').fadeTo(1,0,'');

				$(this).hover(
					function() { //mouseover	
						$(this).children('span').css({
							visibility: 'visible'
						});
						$(this).children('span').fadeTo("normal",1,'');
					},
					function() { //mouseout
						$(this).children('span').fadeTo("slow",0,'');
					}
				);
			
			}
		);


		 $('#content').append('<div id="controls"><a id="arrowLeft" href="#"><em>&lt;</em></a> <a id="arrowRight" href="#"><em>&gt;</em></a></div><div id="shadowLeft"></div><div id="shadowRight"></div>');
	
	  	var $masked = $('#slider ul');
		var $controls = $('#controls');
		var $arrowLeft = $('#arrowLeft');
		var $arrowRight = $('#arrowRight');
		var $shadowLeft = $('#shadowLeft');
		var $shadowRight = $('#shadowRight');
	
		var panelCount = $masked.children('li').size();
	
		$shadowLeft.css({
			visibility: 'hidden'
		});
		
		$shadowRight.css({
			visibility: 'hidden'
		});
		
		if (!$.browser.msie) {
			$shadowLeft.fadeTo(1,0,'');
			$shadowRight.fadeTo(1,0,'');
		}

		// constants
		maskWidth = (parseInt($masked.children('li').css('width'))+1) * 3;
		
		totalWidth = (parseInt($masked.children('li').css('width'))+1) * panelCount;
		speed = 160*panelCount;
		inMotion = false;
	
		// set width
		$masked.css({ width: totalWidth});


		// slide right
	  	$arrowRight.click(function() {
			var maskX = parseInt($masked.css('left'));
			if (maskX < 0 && !inMotion ) {
				inMotion = true;
				if (maskX + maskWidth >0) {
	   				$masked.animate({
						left: 0
						},speed,'easeOutBack',manageControls, false);  
				} else {	
					$masked.animate({
						left: (maskX + maskWidth)
						},speed,'easeOutBack',manageControls, false);
				}
			}
	   		return false;
	 	});

		manageControls =  function() {
			inMotion = false;
			if (panelCount>3) {
				var maskX = parseInt($masked.css('left'));
				if (maskX==0) {
					$arrowLeft.css({ visibility: 'visible' });
					$arrowRight.css({ visibility: 'hidden' });
					if ($.browser.msie) {
						$shadowRight.css({ visibility: 'hidden' });
					}
				} else if (maskX+totalWidth- maskWidth == 0) {
					$arrowLeft.css({ visibility: 'hidden' });
					$arrowRight.css({ visibility: 'visible' });
					if ($.browser.msie) {
						$shadowLeft.css({ visibility: 'hidden' });
					}
				} else {
					$arrowLeft.css({ visibility: 'visible' });
					$arrowRight.css({ visibility: 'visible' });
				}
			} else {
				$arrowLeft.css({ visibility: 'hidden' });
				$arrowRight.css({ visibility: 'hidden' });
			}
		}
		
		
			// slide left
	  	$arrowLeft.click(function() {	
			
			var maskX = parseInt($masked.css('left'));
			if (maskX > (maskWidth - totalWidth) && !inMotion ) {
				
				inMotion = true;
				if ((maskX-maskWidth + totalWidth) < maskWidth) {
	   				$masked.animate({
						left: (maskWidth-totalWidth)
						},speed,'easeOutBack',manageControls, false);  
				} else {
					$masked.animate({
						left: (maskX -maskWidth)
						},speed,'easeOutBack',manageControls, false);
				}
			} 
			return false;
	 	});

		//shadow
		$arrowLeft.hover(
			function(){
				$shadowLeft.css({
					visibility: 'visible'
				});
				if (!$.browser.msie) {
					$shadowLeft.fadeTo("normal",1,'');
				}
			},
			function(){
				if (!$.browser.msie) {
					$shadowLeft.fadeTo("normal",0,'');
				} else {
					$shadowLeft.css({
						visibility: 'hidden'
					});
				}
			}
		);
	
		$arrowRight.hover(
			function(){
				$shadowRight.css({
					visibility: 'visible'
				});
				if (!$.browser.msie) {
					$shadowRight.fadeTo("normal",1,'');
				}
			},
			function(){
				if (!$.browser.msie) {
					$shadowRight.fadeTo("normal",0,'');
				} else {
					$shadowRight.css({
						visibility: 'hidden'
					});
				}
			}
		);
		
		
		// controls
		manageControls();
	}
	
});