// --------------------------------------------------------------------------------------------------
	// VARIABLES

		var highlight		= null
		var kw				= null
		var activeLink		= null
		var cache			= 
			{
			kw:{},
			area:{},
			images:{}
			}
		//var kwCache			= {}
		var urlGetJobs		= '../php/get_jobs_by_keyword.php'
		var urlJobDetails	= 'job-details.php'
		var jobs			= []

	
	// --------------------------------------------------------------------------------------------------
	// AJAX
	
		window.cloudClick = false
	
		function keywordClick(kw, cloudClick){
			hideScreen()
			if(window.flashState){
				flashKeywords(false)
				}
			if(cloudClick){
				showPanel(false)
				}
			window.cloudClick = cloudClick
			filterJobs(kw)
			}
	
		function filterJobs(kw){
			
			// variables
				window.kw	= kw
				
			// active link
				if(activeLink != null){
					activeLink.removeClass('selected')
					}
				activeLink	= $("#cloud a:contains('" +kw+ "')")
				activeLink.addClass('selected')
				
			// filter jobs
				if(cache.kw[kw] == undefined){
					var url	= urlGetJobs + '?echo=1&kw=' + kw
					$.getJSON(url, filterJobsCallback)
					}
				else{
					window.jobs		= cache.kw[kw]
					initTimelineUpdate()
					}
					
			// tracking
				googleTrack('/keywords/timeline/'+ kw)
				googleTrack('/keywords/all/'+ kw)
				

			}
	
		function filterJobsCallback(data){
	
			//console.log(data.kw)
			//console.log([data.jobs].join('\n'))
			
			var kw		= data.kw
			var jobs	= data.jobs
			
			if(kw && jobs.length){
				window.jobs		= jobs
				cache.kw[kw]	= jobs
				initTimelineUpdate()
				//showJobs(jobs)
				}
			}
	// --------------------------------------------------------------------------------------------------
	// JOBS
	

		function highlightJob(code, state){
			
			// highlights job icon on mouseover
			
			// objects
				var div		= $('#' + code)
				var bg		= $('#bg-' + code)
				var icon	= document.getElementById('icon-' + code)
				
			// code
				if(div.hasClass('selected')){
					state ? bg.addClass('bg-highlight') : bg.removeClass('bg-highlight')
					}
				else{
					setIconState(icon, code, state)
					if(state){
						div.addClass('highlight')
						div.removeClass('hidden')
						}
					else{
						div.addClass('hidden')
						div.removeClass('highlight')
						}
					}
	
			}
			
		function showJob(code, state){
			
			// displays job icon after a showjobs or filterjobs call
			
			// div
				var div		= document.getElementById(code)
				var icon	= document.getElementById('icon-' + code)
				if(!div)return
				
			// text
				//console.log(state)
				div.className = state ? 'job selected' : 'job hidden'
	
			// icon
				setIconState(icon, code, state)
			}
			

	
		function showJobs(){
			
			// shows the job icons in the jobs array
			
			showAllJobs(false)
			var jobs	= cache.kw[kw]
			for(var i = 0; i < jobs.length ; i++){
				showJob(jobs[i], true)
				}
			}
			
		function showAllJobs(state){
			
			hideScreen()

			if(state){

				// variables
					showPanel(false)
					kw = 'all'
					window.kw = 'all'
					cache.kw[kw] = jobCodes
					
				// active link
					if(activeLink != null){
						activeLink.removeClass('selected')
						}
					activeLink	= $('#cloud #all')
					activeLink.addClass('selected')
					
				// hud
					updateHudContent(jobCodes)
				}
				
			// job icons
				for(var i = 0; i < jobCodes.length ; i++){
					showJob(jobCodes[i], state)
					}
					
			}
	
			
		function loadJobDetails(code){
			var url			= urlJobDetails + '?code=' +code+ '&ajax=true'
			var data		= null
			var callback	= function(){
								hudIconDim(code)
								showPanel(true)
								}
			$('#panel').load(url, data, callback)
			}
	

			
	// --------------------------------------------------------------------------------------------------
	// MOVEMENT
	
		function initTimelineUpdate(){
			var first		= jobs[0]
			var last		= jobs[jobs.length - 1]
			
			var area		= getArea(jobs)
			window.area		= area
			$('#area').fadeOut(500, 
							   function(){
									setAreaDiv(area)
									$('#area').fadeIn(500)
									}
								)
			
			updateHudContent()
			panTimeline(area)
			}
		
		
		function panTimeline(area){
			
			//console.log(area)

			var x, y
			var w			= parseInt($('#timeline').width())
			var h			= parseInt($('#timeline').height())
			var interval	= 1000
			var easeType	= 'swing'

			if(area.width < w){
				x	= area.center.x - (w / 2)
				}
			else{
				x	= area.right + 15 + 10 - w + 250
				}
				
			if(area.height < h){
				y	=  area.center.y - (h / 2)
				}
			else{
				y	= area.top - 15
				}
				
			if(cloudClick){
				$(timeline).animate(
									{scrollLeft:x,scrollTop:y},
									interval, 
									easeType
									)
				}
			
			showJobs()
			//window.setTimeout(function(){showAllJobs(false), showJobs()}, interval / 2)
			}
			
		function scrollToJob(code){
			
			// stop any animation
				stopLayer()
			
			// objects
				var job			= $('#'+code)
				var timeline	= $('#timeline')
				var content		= $('#content')
				
			// variables
				
				// timeline
					var tw			= parseInt(timeline.width())
					var th			= parseInt(timeline.height())
					
				// content
					var cw			= parseInt(content.width())
					var ch			= parseInt(content.height())
					
				// max scroll
					var mx			= cw - tw
					var my			= ch - th
					
				// panel
					var pw			= 455
					
				// gutter
					var gx			= (tw - pw) / 2
					
				// icon / job
					var ix			= parseInt(job.css('left'))
					var iy			= parseInt(job.css('top'))
					var iw			= 250
					var ih			= 100
					
			// coordinates
			
				// x
					//var x			= ix - (((tw - pw) / 2) - iw) / 2	// middle
					var x			= ix - (gx - iw)				// hugging panel
					if(x < 0){
						x			= 0
						}
					else if(x > mx){
						x			= mx
						}
					
				// y				
					var y			= iy - (th / 2)
					if(y < 0){
						y			= 0
						}
					else if(y > my){
						y			= my
						}
				

			// animate
			
				$(timeline).animate({scrollLeft:x,scrollTop:y}, 1000, 'swing' )

			
			}
			

	// --------------------------------------------------------------------------------------------------
	// UTILITY
	
		function setAreaDiv(area){
			var div = $('#area')
			div.css('left', area.left)
			div.css('top', area.top)
			div.css('width', area.width)
			div.css('height', area.height)
			}

			
		function setIconState(icon, code, state){
			var suffix	= state ? 'on' : 'off'
			url			= '../jobs/' +code+ '/icons/' +code+ '-' +suffix+ '.png';
			if(!usesFilters){
				icon.src = url
				} 
			else{
				icon.style.filter = "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='" +url+ "', sizingMethod='scale')"
				}
			}
	
		function getArea(arr){

			var left
			var right
			var top
			var bottom

			for(var i = 0; i < arr.length; i++){
				var job	= $('#'+arr[i])
				var x	= parseInt(job.css('left'))
				var y	= parseInt(job.css('top'))
				
				if(left == null){
					left = right = x
					top = bottom = y
					}
				else{
					if(x < left)left = x
					if(x > right)right = x
					if(y < top)top = y
					if(y > bottom)bottom = y
					}
				}
			return new Area(top, right + 250, bottom + 100, left)
			}