// --- Section headings (these go next to the icons)
	
	var aHeadings = new Array()
	aHeadings['promoc'] = 'PROMOTIONAL MARKETING'
	aHeadings['who'] =  ''
	aHeadings['what'] = ''
	aHeadings['work'] = ''
	aHeadings['stuff'] = ''
	aHeadings['mobilec'] = 'MOBILE MARKETING'
	aHeadings['digitalc'] = 'DIGITAL MARKETING'
	aHeadings['socialc'] = 'SOCIAL MEDIA'
	aHeadings['merchc'] = 'MERCHANDISE'
	aHeadings['contactc'] = 'CONTACT US'
	
	// --- Background images 
	var aImages = new Array()
	aImages['syd'] = new Array("img/slides/syd/01.jpg","img/slides/syd/02.jpg","img/slides/syd/03.jpg")
	aImages['sha'] = new Array("img/slides/sha/01.jpg")
	aImages['mel'] = new Array("img/slides/mel/01.jpg","img/slides/mel/02.jpg","img/slides/mel/03.jpg","img/slides/mel/04.jpg","img/slides/mel/05.jpg","img/slides/mel/06.jpg","img/slides/mel/07.jpg")
	var newImage = '' // This variable used to swap background images
	
	// --- Cities array - this must match the cities abbreviations defined as keys above
	aCities = new Array("syd","sha","mel")
	
	// --- These can be changed
	var panelActivationDelay = 4000
	var minWindowX = 980
	var darkDefaultOpacity = 0.1 // How dark the dark screen is when there's no yellow panel out
	var darkContentOpacity = 0.5 // How dark the dark screen is when the yellow panel IS out
	var yellowBgOpacity = 0.8 // Opacity of yellow background
	var darkDuration = 700 // How long it takes for the dark screen to fade in / out
	var dotsOpacity  = 0.1 // Opacity of dot screen
	var ctaBtnOpacity = 0.7 
	var headerBgOpacity = 0.3
	var panelSwitchDuration = 300 // Total time for the yellow panels to flash in / out
	var contentSwitchDuration = 240 // Total time for the inner content to flash in / out
	var swapMessageDuration = 300 // Total time for messages to switch
	var randomBgInterval = 5000 // Time taken from Navigation click to background swap 
	
	// --- These should not be changed
	
	var minWindowY = 720 
	var centerPanelY = 400 
	var windowY = $(window).height();
	var windowX = $(window).width();
	var windowXDynamic = windowX
	var centerPanelOffsetY = 0
	var messageActive = true
	var t = 0 // Timer variable for showing yellow pabel
	var t2 = 0 // Timer variable for swapping bg
	var disab = false // Disable animation bubbling
	
	// --- Don't edit stuff below this line unless you want to change the core functionality

	function adjustLights(toOpacity, duration, delayTime) {
	
	$('.darkenator').delay(delayTime).animate({'opacity':''+toOpacity+''}, duration)
	
	}
	
	function activateContentPanel(contentId, duration) {
		
		// Message view to content view
		
		messageActive = false
	
	//Activate relevent content
		$('.content .inner').addClass('inactive')
		$('#'+contentId).removeClass('inactive')
		$('#'+contentId).addClass('active')
		$('#section').attr('class','')
		$('#section').addClass(contentId+'Icon')
		$('#sectionWords').html(aHeadings[contentId])

		$('#'+contentId).css('left','0px')
		$('#'+contentId).css('opacity',1)
		if (!$('.subnav').children('div').hasClass('s'+contentId) ) {
			$('.subnav').children('div').css('display','none')
		} else {
			$('.subnav').children('div').css('display','block')
		}
		$('.subnav a').removeClass('active')
		$('.subnav a[rel="'+contentId+'"]').addClass('active')

	// Close active mssage
	$('.content').css('display','block')
	$('.message.active').animate({'opacity':'0', 'left':'-='+windowXDynamic+'px'}, panelSwitchDuration, 
	// Slide out target panel
	function() {$('.content').animate({'left':'+='+windowXDynamic+'px'}, (panelSwitchDuration/2), 
		function() {
			$('.message.active').addClass('inactive')
			$('.message.active').removeClass('active')
			$('.content').removeClass('inactive')
			$('.content').addClass('active')
			adjustLights(darkContentOpacity,darkDuration,0)
		}
	)  })
	}
	
	
	function swapMessage(messageId, duration, autoOpenPanel) {
		
		// Message view to message view
		
		if (!disab) {
		// Clear any current timeouts to avoid older panels from showing
		disab = true
		stopper()

		$('.message.active').animate({ 'left':'-='+windowXDynamic+'px', 'opacity':0},duration, function() {
				$('#'+messageId).animate({ 'left': '+='+windowXDynamic+'px', 'opacity':1}, duration, function() {			
				$('.message.active').addClass('inactive')
				$('.message.active').removeClass('active')
				$('#'+messageId).addClass('active')
				$('#'+messageId).removeClass('inactive')
				
				// wait the interval previously defined, then activate the child category. Do not do this for the homepage.
			
				if (messageId != 'homem' && autoOpenPanel) {
					var childPanel = $('#'+messageId).children('div.cta').children('a').attr('rel')
		
					t = setTimeout("activateContentPanel('"+childPanel+"',"+panelSwitchDuration+",0)", panelActivationDelay)
			
				}
					disab = false
			} )		
		})	
		}	
	}
	
	function swapContent(contentId, duration) {
		
		// Content view to content view
		if (!disab) {
			disab = true
		$('.inner.active').animate({'left':'-=960px', 'opacity':0},contentSwitchDuration, function() {
			$('#'+contentId).animate({'left':'+=960px', 'opacity':1},contentSwitchDuration, function(){
				$('.inner.active').removeClass('active')
				$('#'+contentId).addClass('active')
				disab = false
			})
		})
		}
	}
	
	function stopper() {
		clearTimeout(t)
	}
	
	
	function activateMessagePanel(panelId, duration, autoOpenPanel) {
		
		// Content view to message view
	if (!disab) {
	
	disab = true
	stopper()
	messageActive = true

	$(panelId).css('display','block')
	$(panelId).removeClass('inactive')
	$(panelId).addClass('active')
	$('.content').animate({'left':'-='+windowXDynamic+'px'}, duration, 
		function() { 
			$('.message.active').animate({'opacity':'1', 'left':'+='+windowXDynamic+'px'}, duration,
				function() {
					$('.content').removeClass('active')
					$('.content').addClass('inactive')
					$('.content .inner.active').css('left','-960px')
					$('.content .inner.active').addClass('inactive')
					$('.content .inner.active').removeClass('active')
					$('.content .inner').addClass('inactive')
					adjustLights(darkDefaultOpacity, darkDuration, 0)
				
					// wait the interval previously defined, then activate the child category. Do not do this for the homepage.
					if (panelId != '#homem' && autoOpenPanel) {
						var childPanel = $(panelId).children('div.cta').children('a').attr('rel')
						t = setTimeout("activateContentPanel('"+childPanel+"',"+panelSwitchDuration+",0)", panelActivationDelay)
			
					}
					disab = false
					
				})
		})
	}
	}
	

	$.fn.preload = function() {
	    this.each(function(){
	        $('<img/>')[0].src = this;
	    });
	}


	
	
	
	$(['img/icons/loading.gif']).preload();

	$(document).ready( function() {
		
		$(window).load(function() {
			
			setTimeout(function(){
			$('div#intro p').fadeOut(300)
	        $('div#intro').fadeOut(1400)
	    }, 1000);
	  })
		
	
	
		$('span.dots').css('opacity',dotsOpacity)
		$('.darkenator').css('opacity',darkDefaultOpacity)
		$('header .inner').css('opacity',headerBgOpacity)
		$('.cta span').css('opacity',ctaBtnOpacity )
		$('.content .bg').css('opacity', yellowBgOpacity)
		
		$('#container').css('display','block')
		
		if (windowY < minWindowY) {
			windowY = minWindowY
		}
		centerPanelOffsetY = (((windowY) / 2) - (centerPanelY / 2))
		$('#main').css('top', centerPanelOffsetY+'px')	
		$('.content').css('left','-'+windowX+'px')
		arrange()
	
		$(window).resize( function() {
			arrange()	
		})

	// Main call to action
	$('div.cta').click( function() {
		var openPanel = $(this).children('a').attr('rel')
		activateContentPanel(openPanel+'',200, 0)
	})
	
	$('a.close').click( function() {
		var openPanel = $(this).attr('rel')
		activateMessagePanel('#'+openPanel, 200, 0, false)
	})
	
	$('.subnav a').click( function() {
		var openPanel = $(this).attr('rel')
		$('.content a').removeClass('active')
		$(this).addClass('active')
		swapContent(openPanel,300)
	})
	
	$('.subnav2 a').click( function() {
		var openPanel = $(this).attr('rel')
		$('.content a').removeClass('active')
		$(this).addClass('active')
		swapContent(openPanel,300)
	})
	
	$('#citySwap li a').click( function() {
		var city = $(this).attr('rel')
		if (!$(this).hasClass('active')) {
			$('#citySwap li a').removeClass('active')
			$(this).addClass('active')
		}
		swapBg(city)
	})
	

	
	$('#nav a, a.backtohome').click( function() {
		if (!$(this).hasClass('active')  && !disab ) {
			clearTimeout(t2)
			
			var openMessage = $(this).attr('rel')
			$('#nav a').removeClass('active')
			if ($(this).attr('class') == 'backtohome') {
					$('#nav a[rel=homem]').addClass('active')
		
			} else {
				$(this).addClass('active')	
			}
		
			if (messageActive) {
				$('a.close').attr('rel',openMessage)
				swapMessage(openMessage, swapMessageDuration, true) 
			} else {
				activateMessagePanel('#'+openMessage, 200, true)		
			}	
		t2 = setTimeout(swapper,5000)
	
	
		}
	})
	
	function swapper() {
		
			randCity = aCities[Math.floor(Math.random()*aCities.length)]
			$('#citySwap li a').removeClass('active')
			$('#citySwap li a[rel="'+randCity+'"]').addClass('active')
			swapBg(randCity)	
	}

	
	function swapBg(city) {

			newImage = aImages[city][Math.floor(Math.random()*aImages[city].length)]	
			$('#background').css('opacity',0.6)	
			var img = $("<img />").attr('src', newImage).load(function() {
			              if (!this.complete || typeof this.naturalWidth == "undefined" || this.naturalWidth == 0) {
			                // Broken image
			                } else {
			                  	$('#background').attr('src',newImage)
								$('#background').css('opacity',1)	
			                 }
			 });		
	}
	
	function arrange() {
	// On window resize, vertically center the main panel
	windowY = $(window).height();
	windowXDynamic = $(window).width();
		if (windowY < minWindowY) {
			windowY = minWindowY
		}
	centerPanelOffsetY = ((windowY / 2) - (centerPanelY / 2))
	$('#main').css('top', centerPanelOffsetY+'px')	
	$('.message.inactive').css('left','-'+windowXDynamic+'px')
	$('.content.inactive').css('left','-'+windowXDynamic+'px')
	}
	
		
    	$.fn.supersized.options = {  
				startwidth: 1680,  
				startheight: 1050,
				vertical_center: 0,
				slideshow: 0,
				navigation: 0,
				transition: 0, //0-None, 1-Fade, 2-slide top, 3-slide right, 4-slide bottom, 5-slide left
				pause_hover: 0,
				slide_counter: 2,
				slide_captions: 1,
				slideinterval: 9000  		
				};
	        $('#supersize').supersized(); 
	
	
	/* --- Fancybox --- */
	var disabf = false
	var fancyboxactive = false
	var panelopen = false
	var mouseX = 0
	var mouseY = 0
	var fbX = 0
	var fbY = 0
	
		$("#workGrid a").fancybox({
			'padding'			:0,
			'margin'			:0,
	
			'scrolling': 'no',
			'titlePosition'		: 'over',
			'overlayColor'		: '#000',
			'overlayOpacity'	: 0.6,
			'onClosed' : function() {
				
				fancyboxactive = false
			},
			'onComplete' : function() { 
				
				fancyboxactive = true

			$('#fancybox-title').animate({ 'bottom': '+=40px' }, 400, function() { disabf = false; 	 panelopen = true})
			$('#fancybox-title').addClass('active')
		
	
			$(document).mousemove(function(e){
		 
					if (fancyboxactive) {
					var fbPos = $('#fancybox-outer').offset();
					
					mouseX = e.pageX
					mouseY = e.pageY
					fbX = fbPos.left
					fbY = fbPos.top
					fbWidth = $('#fancybox-outer').width() 
					fbHeight = $('#fancybox-outer').height() 
				
					$('#debug').html( 'mousex: '+mouseX+' mouseY: '+mouseY+' fbX: '+fbX+' fbY: '+fbY)
					
					if (  ((mouseX > fbX) &&  (mouseX < (fbX + fbWidth) ))   &&  ((mouseY > fbY) &&  (mouseY < (fbY + fbHeight) ))  ) {
						if (!panelopen) {
							openFolioPanel()
				    		panelopen = true
				     	}
						
					} else {
						if (panelopen) {
							closeFolioPanel()
						    panelopen = false
				   		}			
					}		
				}
			}) 


			function openFolioPanel() {
					if (!disabf) {
						disabf = true
						if (!$('#fancybox-title').hasClass('active')) {
							$('#fancybox-title').animate({ 'bottom': '+=95px' }, 400, function() { disabf = false; panelopen = true})
							$('#fancybox-title').addClass('active')
						} 
					}
				}
			
				function closeFolioPanel() {
			
					if (!disabf) {
						disabf = true
						if ($('#fancybox-title').hasClass('active')) {
							$('#fancybox-title').animate({ 'bottom': '-=95px' }, 400, function() { disabf = false; panelopen = false})
							$('#fancybox-title').removeClass('active')
						} 
					}
				}
				
				
				

			  }
	
		});
		
		
	
	
})