window.addEvent('domready', function()
{	
	function getIEv()
	{
		var rv = -1; // Return value assumes failure.
		if (navigator.appName == 'Microsoft Internet Explorer')
		{
			var ua = navigator.userAgent;
			var re  = new RegExp("MSIE ([0-9]{1,}[\.0-9]{0,})");
			if (re.exec(ua) != null)
			rv = parseFloat( RegExp.$1 );
		}
		return rv;
	}
	function ie8()
	{
		var ver = getIEv();
		if ( ver > -1 && ver >= 8.0 ) return true;
		else return false;
	}
	
	if ($('cells') && $('slidebar'))
	{		
		// For each work cell, set up mouse interaction
		var cells = $$('div.cell');
			
		cells.each(function(cell)
		{
			cell.addEvents({
				'mouseenter': function()
				{
					cell.getElement('div.description').fade('show');
					cell.getElement('div.preview').tween('height',1).get('tween').chain(function(){cell.getElement('div.preview').fade('hide')});
				},
				'mouseleave': function()
				{
					cell.getElement('div.preview').fade('show');
					cell.getElement('div.preview').tween('height',222);
				}
			});
		});
			
		// Show the first three images and hide others
		for (i=0;i<cells.length;i++)
		{
			if (i<3)
			{
				cells[i].fade('show');
			}
			else
			{
				cells[i].fade('hide');
				if (ie8()) cells[i].getElement('div.title').setStyle('visibility','hidden');
			}
			
			
		}
		
		// Set up slide width
		var cellswidth = (cells.length-3)*(293+25);
		
		// Create the new slider instance
		var slideBar = new Slider($('slidebar'), $('slider'),
		{
			steps: cellswidth, range: [0], // Smooth sliding    /* steps: cells.length-3, range: [0,cellswidth], // Snap to key points */
		
			// Listen for movement
			onChange: function(value)
			{
				if (this.knob.pressed) $('cells').setStyle('left', value*(-1)); // Quick change
				else $('cells').tween('left', value*(-1)); // Smooth move on release
				
				//Get distance from left edge
				var leftdistance = $('subcontent').getPosition().x - $('cells').getPosition().x;
				var rightdistance = leftdistance + 1000;
				
				//Control fading in and out of objects at window edges
				//For IE8, ignore opacity and just show everything
				for (i=0;i<cells.length;i++)
				{
					if (ie8())
					{
						cells[i].setStyle('opacity',1);
						cells[i].getElement('div.title').setStyle('visibility','visible');
					}
					else
					{
						if ((leftdistance-cells[i].getPosition($('cells')).x) < 350)
							cells[i].setStyle('opacity', (1.25 - (leftdistance-cells[i].getPosition($('cells')).x)/350*1.5));
						if ((rightdistance-cells[i].getPosition($('cells')).x) < 350)
							cells[i].setStyle('opacity', -0.25 + (rightdistance-cells[i].getPosition($('cells')).x)/350*1.5);
					}
				}
			},
			
			// When let go, perform
			onComplete: function(value)
			{
				// Reset slider to trigger smooth slide
				slideBar.knob.pressed = false;
				
				// Calculate nearest step
				var distancestep = Math.round(($('subcontent').getPosition().x - $('cells').getPosition().x) / (293+25));
				
				// Snap to nearest step (triggers smooth move)
				slideBar.set(distancestep*(293+25));
				
				// Make sure three closest projects are faded in and the rest are not
				// For IE8, just force absolute opacities
				for (i=0;i<cells.length;i++)
				{
					if (i==distancestep || i==distancestep+1 || i==distancestep+2)
					{
						if (ie8())
						{
							cells[i].fade('show');
							cells[i].getElement('div.title').setStyle('visibility','visible');
						}
						else
						{
							cells[i].fade('in');
						}
					}
					else
					{
						if (ie8())
						{
							cells[i].fade('hide');
							cells[i].getElement('div.title').setStyle('visibility','hidden');
						}
						else
						{
							cells[i].fade('out');
						}
					}
				}
			}
		});
		
		// Attach press and hover detection functions to knob
		slideBar.knob.addEvent('mouseenter', function() { this.hover = true; });
		slideBar.knob.addEvent('mouseleave', function() { this.hover = false; });
		slideBar.knob.addEvent('mousedown', function() { this.pressed = true; });
		slideBar.knob.addEvent('mouseup', function() { this.pressed = false; });
		
		// Removing existing events to prevent clicking on slidebar
		slideBar.element.removeEvents('mousedown','click');
		
		// Track mouse coordinate in x-axis of slidebar
		slideBar.element.addEvent('mousemove',function(event)
		{
	    	slideBar.mouseX = event.page.x - $('slidebar').getPosition().x;
		});
		
		// Create a function to slide left or right one step at a time based on mouse position
		slideBar.element.addEvent('mousedown', function()
		{
			// Make sure we're not clicking "through" the slider
			if (!slideBar.knob.hover)
			{		
				// Get current position of slide
				var currentstep = Math.round(($('subcontent').getPosition().x - $('cells').getPosition().x) / (293+25));
				
				// Calculate slider position
				var leftedge = $('slider').getPosition($('slidebar')).x;
				var rightedge = leftedge+102;
				
				// Compare mouse position to slider and determine new step
				if (slideBar.mouseX < leftedge && currentstep != 0) currentstep--;
				else if (slideBar.mouseX > rightedge && currentstep != cells.length-3) currentstep++;
			
				// Slide cells to position
				$('cells').tween('left', currentstep*(293+25)*(-1));
				
				//Slide scrollbar
				$('slider').tween('left', Math.round(currentstep/(cells.length-3)*(719-102)));
							
				// Make sure three closest projects are faded in and the rest are not
				for (i=0;i<cells.length;i++)
				{
					if (i==currentstep || i==currentstep+1 || i==currentstep+2)
					{
						if (ie8())
						{
							cells[i].fade('show');
							cells[i].getElement('div.title').setStyle('visibility','visible');
						}
						else
						{
							cells[i].fade('in');
						}
					}
					else
					{
						if (ie8())
						{
							cells[i].fade('hide');
							cells[i].getElement('div.title').setStyle('visibility','hidden');
						}
						else
						{
							cells[i].fade('out');
						}
					}
				}
				
				//$('copyright').innerHTML = Math.round(currentstep/(cells.length-3)*(930-102));
				
			}
		});
		
		// Prepare scrolling
		var scroll = new Fx.Scroll(window, {duration: 1000, transition: Fx.Transitions.Quad.easeInOut });
		
		// Set variable for collapse detection
		$('showall').cellscollapsed = true;
		
		// Show all projects
		$('showall').addEvent('mousedown', function()
		{
			if (this.cellscollapsed)
			{
				// Hide scrollbar
				$('slider').tween('left', 0);
				$('slidebar').fade('out').get('tween').chain(function(){
					$('slidebar').setStyle('display','none');
					scroll.toElement($('cells'));
				});
				
				// Reset position and opacity of cells
				$('cells').setStyle('left', 0);
				for (i=0;i<cells.length;i++) 
				{
					cells[i].fade('show');
					if (ie8()) cells[i].getElement('div.title').setStyle('visibility','visible');
				}
								
				// Calculate rows & needed vertical space
				var rows = Math.ceil(cells.length/3);
				var totalheight = rows*355;
				
				// Grow size of display box
				$('cells').setStyle('width', 980);
				$('cells').setStyle('height', totalheight);
				$('subcontent').tween('height', totalheight);
				
				this.cellscollapsed = false;
				this.addClass('collapse');
				
			}
			else
			{			
				// Show scrollbar
				$('slidebar').setStyle('display','block');
				$('slidebar').fade('in');
				
				// Reset height an prepare
				$('subcontent').tween('height', 360).get('tween').chain(function()
				{
					// Reset dimensions of cell container
					$('cells').setStyle('width', 9000);
					$('cells').setStyle('height', 260);
					
					// Hide all but the first 3 cells
					for (i=3;i<cells.length;i++)
					{				
						cells[i].fade('hide');
						if (ie8()) cells[i].getElement('div.title').setStyle('visibility','hidden');
					}
				});
				
				this.cellscollapsed = true;
				this.removeClass('collapse');
			}
		});
	}
});