//Main wrapper for menu list
var menuWrapper = null;

//menu unordered list
var menuUl = null;

//menu list element
var arrMenuElements;

//retains order of menu
var arrMenuOrder = new Array();

//main content wrapper
var currentPage = null;

//main content li
var currentPageLi = null;

//main content ul
var currentPageUl = null;

//menu wrapper
var mainWrapper = null;

//menu wrapper magin top
var mainWrapperMargin = null;

//site wrapper
var siteWrapper = null;

//buttons
var buttons = null;

//image area
var imageArea = null;

//global flag for animation
var animationFlag = false; 

//while text is fading
var textFadeFlag = false; 

//stores the elements returned from the ajax href call 
var returnedAjax = new Array();

//buttons
var buttons = null;

//stores current array pointer for the next previous
var arrIndex = 0;

//stores image morph
var fadeImage = null;

//stores text morph
var fadeText = null;

//link for the contact button
var contactButton = null;

//contact area div 
var contactArea = null;

//Flag to signify if the user has come from the contact page
var fromContact = false;

//Flag which allows the user to click on contact
var allowContact = true;

//added elements
var arrInjectElement = new Array();

var currentURL = "";

window.addEvent('domready', function(){ 
	init();
});

// initialise vars
var init = function(){
	//centres site *disabled
	//centerSite();
	//next previous buttojns
	buttons = $('buttons').getElements('a');

	//contact area
	contactArea = $('contact');

	//contact button
	contactButton = contactArea.getElements('a'); 
	
	imageArea = $('imageArea');
	imageArea.setStyles({
		overflow: 'hidden'
	});
	
	siteWrapper = $('siteWrapper');
	mainWrapper = $('mainWrapper');
	mainWrapperMargin = mainWrapper.getPosition().y;
	
	//menu vars
	menuWrapper = $('menuWrapper');
	menuUl = menuWrapper.getElement('ul');
	arrMenuElements = menuUl.getElements('li'); 
	currentPage = $('currentPage');
	currentPageLi = $('title').getElement('li');
	currentPageUl = $('title').getElement('ul');
		
	//The original order of the array
	allLi = menuWrapper.getElements('li');
	if(allLi){
		arrMenuOrder = allLi.getElement('a').get('html');
	}

	menuMove();
	navigate();
	contactPage();

	//if coming in from google get page
	var url = window.location;
	url = url.toString();
	url = url.substring(url.indexOf('com')+3, url.length);
	var allA = $$('a');
	var landerA = null;
	allA.each( function(a){
		if(a.get('href')== url) landerA = a;
	});
	
	firstLoad();

	if(landerA.get('href') != '/'){
		getPageAjax(landerA.getParent());
		doSwap(landerA.getParent());
	}
}

function firstLoad(){
	var homeImage = $$(".newImage img");
	var homeImageSrc = homeImage.get('src');
	homeImage.setStyle('display','none');
	var imageArr = new Array();
	imageArr[0] = homeImageSrc;
	var cachedImage = new Asset.images(imageArr, {
		onComplete: function(){
			imageArea.setStyle('opacity','0');
			imageArea.setStyle('background-image','url(' + homeImageSrc + ')');

			if(fadeImage) { fadeImage.cancel(); }
			fadeImage = new Fx.Morph(imageArea,{ 'duration':'1200', link:'ignore' });
			fadeImage.start({ 'opacity': [0.1,1] }); 
		}
	});
	
}

//Loads the contact content
var contactPage = function(){
	contentHeight = 70;
	contactButton.addEvent('click', function(event){
		event.stop();
		if(allowContact){				
			allowContact = false; 
			currentPageLi = currentPage.getElement('li');
			
			//hide buttons
			$('buttons').setStyles({
				display: 'none'
			});
			
			//if the content area is open
			if(currentPage.getStyle('height') != '0px'){
				//shrink content area
				var morphElement = currentPage;  
					var morphContentArea = new Fx.Morph(morphElement,{
					duration: 800,
					transition: 'cubic:in',
					link: 'ignore',
					onComplete: function(){			
						var description = $('pageDescription');
						description.set('html',"");
						//get injection location
	
						//inject into nav if not last element find place
						if((arrMenuOrder.indexOf(currentPageLi.getElement('a').get('html'))) < (arrMenuOrder.length - 1)){
							currentPageLi.inject(getInjectLocation(currentPageLi.getElement('a').get('html')),'before');
						}else{ //else inject at end of list
							currentPageLi.inject(menuUl);
						}
						
						fromContact = true; 
						//get contact details
						getPageAjax(contactArea);	
						//set logo to green
						setTextColor(contactArea);
					}
				});
				morphContentArea.set({
					'height': contentHeight
				}); 
				morphContentArea.start({ 
					'height': '0'
				});
			}else{ //else if it is close ie from the home page
				fromContact = false; 
				//get contact details
				getPageAjax(contactArea);
				//set logo to green
				setTextColor(contactArea);	
			}
		}	
	});
}

//button events
var navigate = function(){
	buttons.each(function(button){
		button.addEvent('click', function(event){
			event.stop();
			if(button.get('id') == 'previousButton'){				
				if(arrIndex > 0){ 
					arrIndex--;
					performContentInject(arrIndex);		
				}
			}else{
				
				if(arrIndex < returnedAjax.length-1){
					arrIndex++;
					performContentInject(arrIndex);
				}
			}

		});
	});
	
}

//injects first item of content when page is loaded
var performContentInject = function(contentIndex){	
	var title = returnedAjax[contentIndex][0];
	var image = returnedAjax[contentIndex][1];
	var content = returnedAjax[contentIndex][2];
	var description = $('pageDescription');

	if(contentIndex == 0){
		$('previousButton').setStyles({
			color: '#242424'
		});
	}else{
		$('previousButton').setStyles({
			color: '#e4e1ca'
		});
	}
	
	if(contentIndex == returnedAjax.length-1){
		$('nextButton').setStyles({		
			color: '#242424'
		});
	}else{
		$('nextButton').setStyles({
			color: '#e4e1ca'
		});
	}

	
	//If there is only one listing in the cms then hide the next/previous buttons
	if((returnedAjax.length <= 1) || (currentUrl=='/company/')){
		$('buttons').setStyles({
			display: 'none'
		});
	}
	
	imageArea.getElements('img').setStyles({
		display: 'none'
	});
	description.setStyles({
		opacity: '0'
	});
	
	description.set("html",title + content);
	//fade content in
	if(fadeText){ fadeText.cancel(); }
	fadeText = new Fx.Morph(description,{ 
		transition: 'cubic:in',
		duration: '500', 
		link:'cancel',
		onStart: function(){
			textFadeFlag = true;
		},
		onComplete: function(){
			textFadeFlag = false;
			//If the there is more than one listing in the cms then show next/previous
			if(currentUrl!='/company/'){
				if(returnedAjax.length > 1){
					$('buttons').setStyles({
						display: 'block'
					});
				}
			}
		}
	});
				
	fadeText.start({ 'opacity': [0.0,0] }); 
	fadeText.start({ 'opacity': [0.1,1] }); 
	
	imageArea.setStyle('opacity','0');
	preloadImage(image);
}

function preloadImage(image){

	var imageArr = new Array();
	imageArr[0] = image;
	var cachedImage = new Asset.images(imageArr, {
		onComplete: function(){

			imageArea.setStyle('background-image','url(' + image + ')');

			if(fadeImage) { fadeImage.cancel(); }
			fadeImage = new Fx.Morph(imageArea,{ 'duration':'1200', link:'ignore' });
			fadeImage.start({ 'opacity': [0.1,1] }); 
		}
	});
	
}

var doSwap = function(menuElement){
				if(menuElement.getParent().getParent().get('id') == 'menuWrapper'){
					//Get the elements from the page
					//getPageAjax(menuElement);
					if(currentPage.getElement('li')){
						currentPageLi = currentPage.getElement('li');
					}
					var elementPosition = menuElement.getPosition().y;
					var contentPosition = currentPageLi.getPosition().y;
					//If there is already an element in the content li
					if(currentPageLi.get('html') != ""){	
						if(fromContact){

							contentHeight = 70; 
							var morphElement = currentPage;  
							var morphContentArea = new Fx.Morph(morphElement,{
								duration: 800,
								transition: 'cubic:in',
								link: 'ignore',
								onComplete: function(){												
									fromContact = false; 		
								}
							});
							morphContentArea.set({
								'height': '0'
							}); 
							morphContentArea.start({ 
								'height': contentHeight
							});	
						}
						//inject into nav if not last element find place
						if((arrMenuOrder.indexOf(currentPageLi.getElement('a').get('html'))) < (arrMenuOrder.length - 1)){
							currentPageLi.inject(getInjectLocation(currentPageLi.getElement('a').get('html')),'before');
						}else{ //else inject at end of list
							currentPageLi.inject(menuUl);
						}
					
						//inject into current page
						menuElement.inject(currentPageUl);
						
						var elementEndPosition = currentPageLi.getPosition().y;
						
						//perform swap animation
						performSwapAnimation(menuElement.getElement('a').get('html'), elementPosition, elementEndPosition, currentPageLi.getElement('a').get('html'), contentPosition, menuElement, currentPageLi);
						
					}else{ //if the content li is empty i.e from home page
						//enlarge the content area and inject rel content
						performEnlargeContentAnimation(currentPageLi, menuElement, elementPosition, contentPosition);				
					}
				}else{
					performContentInject(0);					
				}
}

var menuMove = function(){

	arrMenuElements.each(function(menuElement){
		menuElement.addEvent('dblClick',function(event){
			event.stop(); 
		});
		menuElement.addEvent('click', function(event){	
			event.stop();		
			allowContact = false;
			textFadeFlag = false; 
			if(!textFadeFlag){
				//if the element is in the menuWrapper div
				doSwap(menuElement);
			}
		});
		
		//highlight effects on mouse enter
		menuElement.addEvent('mouseover', function(event){
			if(menuElement.getParent().getParent().get('id') == 'menuWrapper'){
				//sort effect
				var morphMenu = menuElement.retrieve('effect');
				//if effect is already running then cnacel that effect
				if(morphMenu){ morphMenu.cancel(); }
				var morphMenuElement = menuElement;  
				
				var morphMenu = new Fx.Morph(morphMenuElement,{
					duration: '300',
					link: 'cancel'
				});
				if(!animationFlag){
					menuElement.store('effect',morphMenu);
					morphMenu.set({ 
						'background-color': '#242424'
					});	
					morphMenu.start({ 
						'background-color': '#484848'
					});	
				}
			}
		});
		
		//lowlight effects on mouse leave
		menuElement.addEvent('mouseleave', function(event){	
			if(menuElement.getParent().getParent().get('id') == 'menuWrapper'){
				var morphMenu = menuElement.retrieve('effect');
				morphMenu.cancel();
				var morphMenuElement = menuElement;  
				var morphMenuOut = new Fx.Morph(morphMenuElement,{
					duration: '300',
					link: 'cancel'
				});
				if(!animationFlag){
					menuElement.store('effect',morphMenu);
					morphMenu.set({ 
						'background-color': '#484848'
					});	
					morphMenuOut.start({ 
						'background-color': '#242424'
					});	
				}			
			}
		});
	});
}

//finds where to inject the element back into the menu retaining order	
var getInjectLocation = function(currentElement){
	var injectBeforeLocation = arrMenuOrder[arrMenuOrder.indexOf(currentElement)+1];
	var injectBeforeElement = null; 
	
	arrMenuElements.each(function(menuElement){
		//Only on elements with 
		if($chk(menuElement.getElement('a'))){
			if(menuElement.getElement('a').get('html') == injectBeforeLocation){
				injectBeforeElement = menuElement;
			}		
		}
	});
	return injectBeforeElement;	
}

//Creates a new div used in the animation 
var createLiMotion = function(inner, startPosition){
	var newLiElement = new Element('div',{
		'html': inner,
		'styles':{
			'background-color': '#242424',
			'color': '#e4e1ca',
			'display': 'block',
			'height': '20px',
			'width': '725px',
			'padding': '5px 0 0 15px',
			'position': 'absolute',
			'top': startPosition,
			'z-index': '99'
		}
	});
	return newLiElement;
}

//performs the animation which swaps the li elements
var performSwapAnimation = function(menuElementInner, menuStartPosition, menuEndPosition, contentElementInner, contentStartPosition, menuElement, contentLi){

	getPageAjax(menuElement);

	var contentPosition = contentStartPosition - mainWrapperMargin;
	var menuPosition = menuStartPosition - mainWrapperMargin; 
	var menuPositionEnd = menuEndPosition - mainWrapperMargin;
	
	var fromContent = createLiMotion(contentElementInner, contentPosition);
	var fromMenu = createLiMotion(menuElementInner, menuPosition);
	
	fromContent.inject(mainWrapper, 'top');
	fromMenu.inject(mainWrapper, 'top');
	
	//set menu element so it appears removed - its contentli as that has just been injected
	contentLi.setStyles({
		backgroundColor: '#000'
	});			
	contentLi.getElement('a').setStyles({
		opacity: '0'
	});
	
	menuElement.setStyles({
		backgroundColor: '#242424'
	});			
	menuElement.getElement('a').setStyles({
		opacity: '0'
	});
	
	animationFlag = true;
	
	//start content morph
	var morphContentElement = fromContent;  
    var morphContent = new Fx.Morph(morphContentElement,{
        duration: 400,
        transition: 'cubic:in',
		link: 'ignore',
		onComplete: function(){
			animationFlag = false;
			//destroy element after morph
			fromContent.destroy();
			contentLi.setStyles({
				backgroundColor: '#242424'
			});			
			contentLi.getElement('a').setStyles({
				opacity: '1'
			});
			if(contentLi.getElement('div')){
				contentLi.getElement('div').setStyles({
					opacity : 0
				});
			}
		}
    });
	morphContent.set({
		'top': contentPosition
	}); 
	morphContent.start({ 
		'top': menuPositionEnd
	});
	
	
	//start menu morph
	morphMenuElement = fromMenu;  
    var morphMenu = new Fx.Morph(morphMenuElement,{
        duration: 400,
        transition: 'cubic:in',
		link: 'ignore',
		onComplete: function(){
			animationFlag = false;
			//destroy element after morph
			fromMenu.destroy();
			//Set the element which has been injected in the content area back to default color
			menuElement.getElement('a').setStyles({
			opacity: '1'
			});
			menuElement.setStyles({
				backgroundColor: '#242424'
			});
			//When menu morph has completed display the content
			//Set the colour of the current page
			setTextColor(menuElement);
			
			//let user click on contact
			allowContact = true; 
		}
    });
	morphMenu.set({
		'top': menuPosition 
	}); 
	morphMenu.start({ 
		'top': contentPosition
	});
}

//performs the animation which enlarges the content area
var performEnlargeContentAnimation = function(currentPageLi, menuElement, elementPosition, contentPosition){
	var contentHeight = 70;
	contentPosition = contentPosition  - mainWrapperMargin;
	textFadeFlag = true;
	allowContact = false; 
	//start menu morph
	var morphElement = currentPage;  
    var morphContentArea = new Fx.Morph(morphElement,{
        duration: 800,
        transition: 'cubic:in',
		link: 'ignore',
		onComplete: function(){			
			var fromMenu = createLiMotion(menuElement.getElement('a').get('html'), elementPosition);
			fromMenu.inject(mainWrapper, 'top');
			
			//set menu element so it appears removed
			menuElement.setStyles({
				backgroundColor: '#000'
			});			
			menuElement.getElement('a').setStyles({
				opactiy: '0'
			});
			
			var morphMenuElement = fromMenu;  
			var morphMenu = new Fx.Morph(morphMenuElement,{
				duration: 400,
				transition: 'cubic:in',
				link: 'ignore',
				onComplete: function(){
					//destroy element after morph
					fromMenu.destroy();
					currentPageUl.removeChild(currentPageLi);
					menuElement.inject(currentPageUl);	
					//set menu element styles back to default
					menuElement.setStyles({
						backgroundColor: '#242424'
					});			
					menuElement.getElement('a').setStyles({
						opacity: '1'
					});
					
					getPageAjax(menuElement);
					setTextColor(menuElement);
					$('contentNav').setStyles({
						display: 'block'
					});
					
					//if the user clicked on contact before any menu items then display next previous
					if(fromContact){
						$('buttons').setStyles({
							display: 'block'
						});
					}
					
					//allow user to click on contact
					allowContact = true;
				}
			});
			morphMenu.set({
				'top': elementPosition - (mainWrapper.getPosition().y - siteWrapper.getPosition().y)
			}); 
			morphMenu.start({ 
				'top': contentPosition
			});	
		}

    });
	morphContentArea.set({
		'height': '0'
	}); 
	morphContentArea.start({ 
		'height': contentHeight
	});
}

//Get the content for the relevant links
var getPageAjax = function(menuElement){

	returnedAjax = [];
	var url = menuElement.getElement('a').get('href');
	var req = new Request.HTML({
		method: 'get',
		url: url,
		onRequest: function() { 

		},
		onSuccess: function(nodeTree, responseElements ) {
			var counter = 0;
			for(var x=0; x<responseElements.length; x++){
				var div = responseElements[x];
				if ( div.id == 'imageArea' ){
					var items = div.getElementsByTagName('div');
					
					returnedAjax = new Array();
					
					for( var i=0; i<items.length; i++){
						var properties = items[i].getElementsByTagName('div');
						var title = null;
						var image = null; 
						var content = null;
						var addFlag = false
						for( var z=0; z<properties.length; z++){
							var property = $(properties.item(z));
							switch ( property.className ){
								case "newTitle" :
									title = property.innerHTML;
									break;
								case 'newImage' :
									image = property.getElement('img');
									if( image ){
										image = image.get('src');
									}else{
										image = "";
									}
									break;
								case 'newContent' :
									content = property.innerHTML;
									break;
							}
						}	
			
						// add to array
						if(title != null && image != null && content != null){
							returnedAjax[counter] = new Array();
							returnedAjax[counter][0] = title;
							returnedAjax[counter][1] = image;
							returnedAjax[counter][2] = content;					
							counter++; 
						}
					}
				}
			}
			arrIndex = 0;	
			currentUrl = url;
			performContentInject(0);

			//remove all injected a tags
			for(var x=0; x<arrInjectElement.length; x++){
				arrInjectElement[x].dispose();
			}

			if(url=='/company/'){
				aboutUs();
			}else if(url=='/contact/'){
				contactUs();
			}
		}
	}).send();
}

function aboutUs(){
	var link=new Element('a',{
		'id': 'portfolio',
		'href': '#',
		styles: {
			'marginTop':'258px',
			'marginLeft':'16px',
			'display':'block',
			'width': '145px',
			'height':'20px'			
		}
	});	
	imageArea.grab(link);	
	arrInjectElement[arrInjectElement.length] = link;
	link.addEvent('click', function(evt){
		evt.stop();
		var image = returnedAjax[1][1];
		preloadImage(image);
		link.dispose();
	});
}

function contactUs(){
	var link=new Element('a',{
		'id':'map',
		'href':'http://maps.google.co.uk/maps?f=q&source=s_q&hl=en&geocode=&q=ec2a3ey&sll=51.537614,-0.077387&sspn=0.005492,0.009377&ie=UTF8&hq=&hnear=London+EC2A3EY,+United+Kingdom&z=16',
		'target':'_blank',
		styles:{
			'marginTop':'48px',
			'marginLeft':'16px',
			'display':'block',
			'width': '145px',
			'height':'20px'
		}
	});
	var email=new Element('a',{
		'id':'email',
		'href':'mailto:info@dvisionuk.com',
		styles:{
			'marginTop':'143px',
			'marginLeft':'16px',
			'display':'block',
			'width': '200px',
			'height':'20px'
		}
	});
	imageArea.adopt(email,link);
	arrInjectElement[arrInjectElement.length] = link;
	arrInjectElement[arrInjectElement.length] = email;

}

//sets the colours of the site
var setTextColor = function(menuElement){
	var body = $(document.body);
	var logo = $('logo');
	var currentClass = body.get('class');
	body.removeClass(currentClass);
	switch ( menuElement.getElement('a').get('html') ){
		case "Company" :
			body.addClass('green');
			logo.setStyle('background-position','0px -86px')
			break;
		case 'Corporate' :
			body.addClass('blue');
			logo.setStyle('background-position','0px -43px')
			break;
		case 'Events' :
			body.addClass('pink');
			logo.setStyle('background-position','0px -129px')
			break;
		case "Branding" :
			body.addClass('orange');
			logo.setStyle('background-position','0px 0px')
			break;
		case 'Websites' :
			body.addClass('purple');
			logo.setStyle('background-position','0px -172px')
			break;
		case 'Contact' :
			body.addClass('green');
			logo.setStyle('background-position','0px -86px')
			break;
	}
	
}

//Centre the site 
var centerSite = function(){
	var site = $('siteWrapper');
	var windowSize = window.getSize();
	var siteSize = site.getSize();
	var siteMarginTop = (windowSize.y / 2) - (siteSize.y / 2);

	site.setStyles({
		display : 'none'
	});
	
	site.setStyles({
		marginTop : siteMarginTop
	});
	
	site.setStyles({
		display : 'block'
	});
	
}