/**
 * @author dwest
 */
			window.addEvent('load', function() {

				
				var textDiv = new Fx.Morph($('text'),{ 'duration':'300', link:'cancel' });
				textDiv.start({ 'opacity': [0,1] })
				
				currentTab();
				
				var menuPosition = new Array()
				menuPosition["page-item-4"] = "0";
				menuPosition["page-item-5"] = "160";
				menuPosition["page-item-11"] = "320";
				menuPosition["page-item-13"] = "480";
				menuPosition["page-item-15"] = "640";
				
				//alert(leftPosition) 
				
				//Set Footer Panel Height
				setheight();
				
				//Set Img title offset
				titleOffset();
				
				

				var menuCount = 0;
				$each($$('.page_item'), function(el) {
					var parentClass = el.get('class');
					var elementLink = el.getElements('a');
					
					el.addClass(menuCount);
	
					var newId = parentClass.split(" ")
					//alert(newId[1]);
					elementLink.setProperty('id',newId[1])			
			
					/* ajax alert */
					elementLink.addEvent('click', function(event) {
						//prevent the page from changing
						event.stop();
						//make the ajax call
						var req = new Request({
							method: 'get',
							url: elementLink.get('href'),
							data: { 'do' : '1' }
							//onRequest: function() { alert('Request made. Please wait...'); },
							//onComplete: function(response) { alert('Response: ' + response); }
						}).send();
						
						
					});
				
					/* ajax replace element text */
					elementLink.addEvent('click', function(event) {
						//prevent the page from changing
						event.stop();
						//make the ajax call, replace text
						var req = new Request.HTML({
							method: 'get',
							url: elementLink.get('href'),
							data: { 'do' : '1' },
							onRequest: function() { 
								//resizePanel();
								//loop menu items
								$each($$('.page_item'), function(currentEl) {
									//if its the current loop item has the this class then get all class's 									
									if (currentEl.hasClass('current_page_item')) {
										oldClassArray = currentEl.get('class').split(" ");
										
										//then remove the this class
										currentEl.removeClass('current_page_item');
										//alert(el.getFirst('a'))
										//currentEl.getElements('a').setStyle('height', '20')
										
										$each(currentEl.getElements('a'), function(childA){
											var paddingincrease = new Fx.Morph(childA, {
												'duration': '300',
												link: 'cancel'
											});
											paddingincrease.start({
												'padding-left': [20, 45]
											})
										});
									}
								});	
								
								/*el.getElements('a').setStyle('font-weight','bolder')
								
								$each(el.getElements('a'), function(childA) {
									var paddingdecrease = new Fx.Morph(childA, {'duration': '300',link: 'cancel'});
									paddingdecrease.start({'padding-left':[45, 20]})
								})
								//add this class to the menu element thats been clicked on								
								el.addClass('current_page_item');
								//get the class's of the current element thats been clicked on
								currentClassArray = el.get('class').split(" ");	*/
								//resize the old current element select using its unquie class. class to menu resize 																													
								//menuResize(oldClassArray[1])
								//move the panel to new position from old position
								
								//alert(oldClassArray);
								//alert(currentClassArray);
								

								
							 },
							update: $('panel-content'),
							onComplete: function(response) {
								el.getElements('a').setStyle('font-weight','bolder')
								
								$each(el.getElements('a'), function(childA) {
									var paddingdecrease = new Fx.Morph(childA, {'duration': '300',link: 'cancel'});
									paddingdecrease.start({'padding-left':[45, 20]})
								})
								//add this class to the menu element thats been clicked on								
								el.addClass('current_page_item');
								//get the class's of the current element thats been clicked on
								currentClassArray = el.get('class').split(" ");	
								
								$('text').style.display = "none";
								menuResize(oldClassArray[1])
								movetoCurrent(menuPosition[currentClassArray[1]],menuPosition[oldClassArray[1]])				
								if(currentClassArray[1] == "page-item-11" )
								{
									portfolioMove();							
								}
								if (currentClassArray[1] == "page-item-5") 
								{
									serviceList()
								}
								if (currentClassArray[1] == "page-item-15") 
								{
									contactList()
								}
								var textDiv = new Fx.Morph($('text'),{ 'duration':'300', link:'cancel' });
								textDiv.start({ 'opacity': [0,1] })
							}
						}).send();
					});
					
					menuCount += 1;
				});

				//move content from last position to current position
				//movetoCurrent()
				
				//menuResize()

				
					
				//animate the list on mouse over
				$each($$('.link'), function(el) {
					var original = el.getStyle('height');
					var morph = new Fx.Morph(el,{ 'duration':'300', link:'cancel' });
					el.addEvents({
						'mouseenter' : function() { morph.start({ 'height':'64' }) },
						'mouseleave' : function() { morph.start({ 'height': original }) }
					});
				});
				
				//showcase-gallery Slide
				new SlideItMoo({
					overallContainer: 'panel',
					elementScrolled: 'panel-showcase',
					thumbsContainer: 'panel-showcase-div',		
					itemsVisible:1,
					itemsSelector: '.new-items',
					itemWidth:1120,
					showControls:0,
					autoSlide: 10000,
					transition: Fx.Transitions.Sine.easeIn,
					duration: 3000,
					direction:1
				});	
								
				portfolioImage(menuPosition);				
			});	
			
			function portfolioImage(menuPosition)
			{
				var myFirstElement  = new Element('div', {'class':'blank-div'});
				
				$each($$('.portfolio-pic'), function(el) {
					
					var picId = el.getProperty('rel');
						/* ajax alert */
					el.addEvent('click', function(event) {
							//prevent the page from changing
							event.stop();
							//make the ajax call
							var req = new Request({
								method: 'get',
								url: 'http://www.laughingjackal.co.uk/portfolio',
								data: { 'do' : '1' }
								//onRequest: function() { alert('Request made. Please wait...'); },
								//onComplete: function(response) { alert('Response: ' + response); }
							}).send();		
					});
					
						/* ajax replace element text */
						el.addEvent('click', function(event) {
							if(picId=="jackal")
							{
								//prevent the page from changing
								event.stop();
								//make the ajax call, replace text
								var req = new Request.HTML({
									method: 'get',
									url:'http://www.laughingjackal.co.uk/home',
									data: { 'do' : '1' },
									onRequest: function() {
										

										//disable Other buttons untill action complete 
										$each($$('.blank-div'), function(disableEl) {
											disableEl.setStyles({
												position: 'absolute',
												width: 160,
												height: 160,
												top:0,
												left:0,
												'z-index':5
											});

										});
										
										//resizePanel();
										//loop menu items
										$each($$('.page_item'), function(currentEl) {
											//if its the current loop item has the this class then get all class's 									
											if(currentEl.hasClass('current_page_item')){
												oldClassArray = currentEl.get('class').split(" ");									
											}
											//then remove the this class
											currentEl.removeClass('current_page_item');
										});	
										//add this class to the menu element thats been clicked on
										/*$('page-item-11').getParent('li').addClass('current_page_item');
										//get the class's of the current element thats been clicked on
										currentClassArray = $('page-item-11').getParent('li').get('class').split(" ");	
										//resize the old current element select using its unquie class. class to menu resize 																													
										menuResize(oldClassArray[1])
										//move the panel to new position from old position
										
										//alert(oldClassArray[1]);
										//alert(currentClassArray[1]);								
										movetoCurrent(menuPosition[currentClassArray[1]],menuPosition[oldClassArray[1]])	
										$('text').fade('out')*/
									 },
									update: $('panel-content'),
									onComplete: function(response) { 		
										//add this class to the menu element thats been clicked on
										$('page-item-4').getParent('li').addClass('current_page_item');
										//get the class's of the current element thats been clicked on
										currentClassArray = $('page-item-11').getParent('li').get('class').split(" ");	
										$('text').style.display = "none";
										//resize the old current element select using its unquie class. class to menu resize 																													
										menuResize(oldClassArray[1])
										//move the panel to new position from old position
										
										//alert(oldClassArray[1]);
										//alert(currentClassArray[1]);								
										movetoCurrent("0",menuPosition[oldClassArray[1]]);	
										//$('text').fade('out')
										
										(function(){//portfolioMove();									
										serviceList();
										var textDiv = new Fx.Morph($('text'),{ 'duration':'300', link:'cancel' });
										textDiv.start({ 'opacity': [0,1] }
										
										)
										
										$each($$('.link'), function(el) {
											
											if(el.getProperty('rel') == picId)
											{
													//alert('test')
												
													var parentList = el.getParent('ul');
													listHeight = (parentList.getChildren('li').length)*16+16
													//alert(listHeight)
													var list = new Fx.Morph(el.getParent('ul'), {'duration': '300',link: 'cancel'});
													list.start({
															'height': listHeight,
															'margin-top':'16'
													}).chain(function(){
													
														el.fireEvent('click');
														
													})								
											} 
										});}).delay(1500)
									}
								}).send();
							}
							else
							{
								//prevent the page from changing
								event.stop();
								//make the ajax call, replace text
								var req = new Request.HTML({
									method: 'get',
									url:'http://www.laughingjackal.co.uk/portfolio',
									data: { 'do' : '1' },
									onRequest: function() {
										

										//disable Other buttons untill action complete 
										$each($$('.blank-div'), function(disableEl) {
											disableEl.setStyles({
												position: 'absolute',
												width: 160,
												height: 160,
												top:0,
												left:0,
												'z-index':5
											});

										});
										
										//resizePanel();
										//loop menu items
										$each($$('.page_item'), function(currentEl) {
											//if its the current loop item has the this class then get all class's 									
											if(currentEl.hasClass('current_page_item')){
												oldClassArray = currentEl.get('class').split(" ");									
											}
											//then remove the this class
											currentEl.removeClass('current_page_item');
										});	
										//add this class to the menu element thats been clicked on
										/*$('page-item-11').getParent('li').addClass('current_page_item');
										//get the class's of the current element thats been clicked on
										currentClassArray = $('page-item-11').getParent('li').get('class').split(" ");	
										//resize the old current element select using its unquie class. class to menu resize 																													
										menuResize(oldClassArray[1])
										//move the panel to new position from old position
										
										//alert(oldClassArray[1]);
										//alert(currentClassArray[1]);								
										movetoCurrent(menuPosition[currentClassArray[1]],menuPosition[oldClassArray[1]])	
										$('text').fade('out')*/
									 },
									update: $('panel-content'),
									onComplete: function(response) { 		
										//add this class to the menu element thats been clicked on
										$('page-item-11').getParent('li').addClass('current_page_item');
										//get the class's of the current element thats been clicked on
										currentClassArray = $('page-item-11').getParent('li').get('class').split(" ");	
										$('text').style.display = "none";
										//resize the old current element select using its unquie class. class to menu resize 																													
										menuResize(oldClassArray[1])
										//move the panel to new position from old position
										
										//alert(oldClassArray[1]);
										//alert(currentClassArray[1]);								
										movetoCurrent(menuPosition[currentClassArray[1]],menuPosition[oldClassArray[1]]);	
										//$('text').fade('out')
										
										(function(){portfolioMove();									
										
										var textDiv = new Fx.Morph($('text'),{ 'duration':'300', link:'cancel' });
										textDiv.start({ 'opacity': [0,1] }
										
										)
										
										$each($$('.link'), function(el) {
											
											if(el.getProperty('rel') == picId)
											{
													//alert('test')
												
													var parentList = el.getParent('ul');
													listHeight = (parentList.getChildren('li').length)*16+16
													//alert(listHeight)
													var list = new Fx.Morph(el.getParent('ul'), {'duration': '300',link: 'cancel'});
													list.start({
															'height': listHeight,
															'margin-top':'16'
													}).chain(function(){
													
														el.fireEvent('click');
														
													})								
											} 
										});}).delay(1500)
									}
								}).send();
							}
							
						});		
				})	
				
			}
			
			function contactList()
			{
				$each($$('#contact-list li'), function(el) {
					//var original = el.getStyle('height');
					if (el.getFirst('div') != null) {
											
						var morph = new Fx.Morph(el.getFirst('div'), {'duration': '300',link: 'cancel'});						
						
						//loop through all sublists
						el.getFirst('a').addEvents({'click': function(){	
								$each($$('#contact-list>li>div'), function(el2) {
									//select current loop element
									var resetSublist = new Fx.Morph(el2, {'duration': '300',link: 'cancel'});
									//if they are expanded									
									if(el2.getSize().y > 0)
									{	
										//reduce size									
										resetSublist.start({
											'height': '0'
										}).chain(function(){								
											var subList = el.getFirst('div')
											listHeight = 390;
											
											var resetSublist = new Fx.Morph(subList, {'duration': '300',link: 'cancel'});
											resetSublist.start({
													'height': listHeight
											})
										})
									} else {
										var subList = el.getFirst('div')
										listHeight = 390;
										
										var resetSublist = new Fx.Morph(subList, {'duration': '300',link: 'cancel'});
										resetSublist.start({
												'height': listHeight
										})
									}									
								})
							}
						});						
					}
				});
				
				$('contact-us').fireEvent('click')
			}
			
			function serviceList()
			{
				$each($$('.services li'), function(el) {
					var original = el.getStyle('height');
					if (el.getFirst('div') != null) {
						var morph = new Fx.Morph(el.getFirst('div'), {
							'duration': '300',
							link: 'cancel'
						});
						
						
						el.addEvents({
							'mouseenter': function(){
								morph.start({
									'height': '60'
								})
								
							},
							'mouseleave': function(){
								morph.start({
									'height': '0'
								})
							}
						});
						
					}
				});
			}
			
			function menuResize(test)
			{
				
				//alert(test)
				//reduce the width of last menu li, from 320 to 160, loop as we have no idea only class.
				$each($$('.'+test+''), function(el) {
					var menu = new Fx.Morph(el, {duration: 'normal', transition: Fx.Transitions.Cubic.easeIn});
					//alert('loop')
					//if the last page is the same as the current page dont reduce size as this cause shudder effect
					if (el.hasClass('current_page_item') != true) {
						menu.start({
							'width': [320, 160]
						});
					}
				})
				
				//increase the width of the current menu li, to 320 from 160
				$each($$('.current_page_item'), function(el) {
					var menu = new Fx.Morph(el, {duration: 'normal', transition: Fx.Transitions.Cubic.easeIn});
		 
					menu.start({
						'width': [160, 320]
					});
				});
						
			}
			
			function portfolioMove()
			{
				$each($$('.link'), function(el) {
					var original = el.getStyle('padding-left');
					var morph = new Fx.Morph(el,{ 'duration':'300', link:'cancel' });
					el.addEvents({
						'mouseenter' : function() { morph.start({ 'padding-left':'10' }) },
						'mouseleave' : function() { morph.start({ 'padding-left': original }) }
					});
				});
				
				$each($$('#portfolio-list li'), function(el) {
					//var original = el.getStyle('height');
					if (el.getFirst('ul') != null) {
											
						var morph = new Fx.Morph(el.getFirst('ul'), {'duration': '300',link: 'cancel'});						
						
						//loop through all sublists
						el.getFirst('a').addEvents({'click': function(){	
								$each($$('.services-list'), function(el2) {
									//select current loop element
									var resetSublist = new Fx.Morph(el2, {'duration': '300',link: 'cancel'});
									//if they are expanded									
									if(el2.getSize().y > 0)
									{	
										//reduce size									
										resetSublist.start({
											'height': '0',
											'margin-top':'0'
										}).chain(function(){								
											var subList = el.getFirst('ul')
											listHeight = (subList.getChildren('li').length)*16+16
											
											var resetSublist = new Fx.Morph(subList, {'duration': '300',link: 'cancel'});
											resetSublist.start({
													'height': listHeight,
													'margin-top':'16'
											})
										})
									} else {
										var subList = el.getFirst('ul')
										listHeight = (subList.getChildren('li').length)*16+16
										
										var resetSublist = new Fx.Morph(subList, {'duration': '300',link: 'cancel'});
										resetSublist.start({
												'height': listHeight,
												'margin-top':'16'
										})
									}									
								})
							}
						});						
					}
				});
				
				// go through portfolio list add events to all links to show portfolio details				
				$each($$('.link'), function(el) {
					var display = new Fx.Morph('portfolio-showcase', {duration: 'normal', transition: Fx.Transitions.Cubic.easeIn});				
					var morph = new Fx.Morph('panel-content',{ 'duration':'600', link:'cancel', transition: Fx.Transitions.Cubic.easeIn});
					
					el.addEvents({
						'click': function(){
							//get size of content panel to determin if panel has been opened
							var original = $('panel-content').getSize().x;
							var showcaseId = el.getProperty('rel')
							var showcaseActive = $(showcaseId).getStyle('display');

							//if panel is 640 width and Portfolio is showing then hide this detail portfolio
							if (original == 640 && showcaseActive != 'none') {
								//hidePortfolio(showcaseId);
								
							}
							else 
								if (original == 320) {
									//if panel has not been extented then extent and show detail portfolio
									morph.start({
										width: [original, 640]
									}).chain(function(){										
										showPortfolio(showcaseId)
										//milkbox.reloadGalleries();
									})														
								}
								else 
									if (original == 640) {
										//Hide all current showing portfolio details										
										resetHide()
										//Show requested portfolio details
										showPortfolio(showcaseId);
										//milkbox.reloadGalleries();
								}
						}
					});
				});
			}
			function resizePanel()
			{
				if ($('panel-content').getSize().x == "640") 
				{					
					$('portfolio-showcase').fade('out')
					$('panel-content').tween('width', '320');
				}
			}
			
			function showList(showcaseId)
			{
				var hPortfolio = new Fx.Morph($(''+showcaseId+''),{ 'duration':'600', link:'cancel', transition: Fx.Transitions.Cubic.easeIn});
				//set display to block
				$(''+showcaseId+'').setStyle('display','block')	
				//set the current title to active	
				$(''+showcaseId+'').setProperty('title','Active')	
				//fade in portfolio 	
				hPortfolio.start({
					'opacity': [0, 1],
					'height': [0,100]
				});
			}
	
			function resetList()
			{
				$each($$('.portfolio-list'), function(el) {
					//fetch element id
					var showcaseId = el.getProperty('id')
					var elementHeight = el.getSize().y
					//if title = active hide that element
					if(el.getProperty('title') == 'Active')
					{	
						var hPortfolio = new Fx.Morph(el,{ 'duration':'600', link:'cancel', transition: Fx.Transitions.Cubic.easeIn});							
						hPortfolio.start({
							'opacity': [1, 0],
							'height':[elementHeight,0]							
						})
							//completely hide portfolio							
							el.erase('title')	
							//el.setStyle('display','none')	
								
						
						
					}									
				});			
			}
			
			function showPortfolio(showcaseId)
			{
				var hPortfolio = new Fx.Morph($(''+showcaseId+''),{ 'duration':'600', link:'cancel', transition: Fx.Transitions.Cubic.easeIn});
				//set display to block
				$(''+showcaseId+'').setStyle('display','block')	
				//set the current title to active	
				$(''+showcaseId+'').setProperty('title','Active')	
				//fade in portfolio 	
				hPortfolio.start({
					'opacity': [0, 1]
				});
			}
			
			function hidePortfolio(showcaseId)
			{
				var hPortfolio = new Fx.Morph($(''+showcaseId+''),{ 'duration':'600', link:'cancel', transition: Fx.Transitions.Cubic.easeIn});
				//reset title	
				$(''+showcaseId+'').setProperty('title','')		
				//fade out portfolio
				hPortfolio.start({
						'opacity': [1, 0]
					}).chain (function() {
						//completely hide portfolio
						$(''+showcaseId+'').setStyle('display','none')	
					})			
			}
			
			function resetHide()
			{
				//loop througth all product showcase's
				$each($$('.product-showcase'), function(el) {
					//fetch element id
					var showcaseId = el.getProperty('id')
					//if title = active hide that element
					if(el.getProperty('title') == 'Active')
					{								
						hidePortfolio(showcaseId);	
					}									
				});
			}
			
			function movetoCurrent(current,old)
			{
				
				if ($('panel-content').getSize().x == "640") {
					
					
					//$('portfolio-showcase').fade('out')
						//alert('current left position - '+current)
					//alert('old left position - '+old)
					var myEffect = new Fx.Morph('panel-content', {
						duration: 'normal',
						transition: Fx.Transitions.Cubic.easeIn
					});
					myEffect.start({
						'left': [old, current],
						'width':[640,320]
					});
					(function(){$('text').style.display = "block"}).delay(1500)
				}
				else {
					//alert('current left position - '+current)
					//alert('old left position - '+old)
					var myEffect = new Fx.Morph('panel-content', {
						duration: 'normal',
						transition: Fx.Transitions.Cubic.easeIn
					});
					myEffect.start({
						'left': [old, current]
					});
					(function(){$('text').style.display = "block"}).delay(1500)
				}
			}	
			
			function currentTab()
			{
				$each($$('.current_page_item'), function(el) {
					if(el.hasClass('page-item-11')){
						portfolioMove();
					}
					if (el.hasClass('page-item-15')) 
					{
						contactList()
					}
				
				});
				
				

				$each($$('.current_page_item a'), function(childA) {
					var paddingdecrease = new Fx.Morph(childA, {'duration': '300',link: 'cancel'});
					paddingdecrease.start({'padding-left':[45, 20]})
				})
				
				$each($$('.current_page_item'), function(el) {					
					if(el.getSize().x == "160")
					{			
						el.tween('width', '320');
					}					
				});
			}
	
			function setheight()
			{
				var height = 0;
				height = $('body').getSize().y
				height -= $('header').getSize().y
				height -= $('menu').getSize().y
				height -= $('panel').getSize().y
				
				height -=15;
							
				$('footer-panel').setStyle('height', height);
			}		
			
			function titleOffset()
			{
				//alert('test')
				var pageWidth = $('body').getSize().x;
				var sideMargin = (pageWidth-960)/2;
				var offSet = Math.round((pageWidth-960)/2/160);
				var left = -+(offSet*160-sideMargin);

				//alert(left);
				$('panel-showcase-div').setStyle('left',left)
			}