// ------------------------------------------------------------------------------------------------
	// globals
	
		var hudScale	= 1 / 20
		var hudSize		= null
	
	// ------------------------------------------------------------------------------------------------
	// utility objects
	
		function Layer(element, scale){
	
			var layer	= $(element)
	
			var w		= parseFloat(layer.css('width'))
			var h		= parseFloat(layer.css('height'))
			var x		= parseFloat(layer.css('left'))
			var y		= parseFloat(layer.css('top'))
	
			var r		= new Rectangle(w, h, x, y, element)
			return		scale ? r.multiply(scale) : r
			}
	
	// ------------------------------------------------------------------------------------------------
	// content
	
		function initHud(){
			
			// debugging
				//if(!window.debug)window.debug = new Debugger()
	
			// variables
				var arr							= jobCodes
				var hudContent					= elements.hudContent
				
			// elements
				for(var i = 0; i < arr.length; i++){
					
					// variables
						var code				= arr[i]
						var id					= '#' +code
						var jobLayer			= $(id)
						var client				= $(id + ' h3').text()
						var title				= $(id + ' h4').text()
						
	
					// check layer exists, ie jobCodes matches database layers
						if(jobLayer.size() == 0){
							continue;
							}
	
					// create icon
						var hudIcon				= document.createElement('a')
			
					// set icon properties
						hudIcon.setAttribute('id', 'hud-' +code)
						hudIcon.setAttribute(hudIcon.className ? 'className' : 'class', 'hud-icon hidden')

						hudIcon.setAttribute('className', 'hud-icon hidden')
						hudIcon.setAttribute('class', 'hud-icon hidden')

						hudIcon.setAttribute('tip', client + ': ' + title)
						hudIcon.setAttribute('code', code)
	
						hudIcon.setAttribute('href', 'javascript:hudIconClick("'+code+'")')
						
					// attach icon
						hudContent.appendChild(hudIcon)
					
					// position icon
						var jobDims				= new Layer(jobLayer.get(0), hudScale)
						var x					= Math.round(jobDims.x) + 'px'
						var y					= Math.round(jobDims.y) + 'px'
						
						hudIcon.style.left		= x
						hudIcon.style.top		= y
						
						$(hudIcon).bind('mouseover', function(){hudTip(this, true)})
						$(hudIcon).bind('mouseout', function(){hudTip(this, false)})
			
					}
	
			// update window
				updateHudWindow()
			}
	
			
		function updateHudContent(arr){
	
			// variables
				var hud				= elements.hud
				var hudContent		= elements.hudContent
				var arr				= arr ? arr : window.jobs
			
			// show the hud
				if(hud.className == 'off'){
					hud.className = ''
					}
		
			// display correct icons
				for(var i = 0; i < jobCodes.length; i++){
					
					var code	= jobCodes[i]
					var icon	= $('#hud-' + code)
					var state	= arr.indexOf(code) > -1
					
					icon.removeClass('dim')
					icon.removeClass('hidden')
					if(state){
						icon.show()
						}
					else{
						icon.hide()
						}
					}
			}
	
	// ------------------------------------------------------------------------------------------------
	// update hud properties
	
		function updateHudSize(){
	
			// elements
				var content			= jElements.content
				var hud				= jElements.hud
				window.hudSize		= new Layer(content, hudScale)
			
			// update size
				hud.width(hudSize.width + 'px')
				hud.height(hudSize.height + 'px')
			}
			
		function updateHudPosition(){
			
			// elements
				var timeline		= jElements.timeline
				var content			= jElements.content
				var hud				= jElements.hud
				
			// variables
				var sw				= document.body.clientWidth
				var w				= window.hudSize.width
				var gutter			= 15
				var x				= (sw - w - gutter - 20)
				var y				= timeline.offset().top + gutter
	
			// update position
				hud.css('left', x + 'px')
				hud.css('top', y + 'px')
			}
			
		function updateHudLiveAreaSize(){
			
			// objects
				var timeline		= jElements.timeline
				var livearea		= jElements.hudLiveArea
				
			// variables
				var w				= Math.floor(timeline.width() * hudScale)
				var h				= Math.floor(timeline.height() * hudScale)
				
			// update live area
				livearea.width(w + 'px')
				livearea.height(h + 'px')
			}
	
		function updateHudLiveAreaPosition(){
			
			// objects
				var timeline		= elements.timeline
				var livearea		= elements.hudLiveArea
				
			// variables
				var x				= Math.floor(timeline.scrollLeft * hudScale)
				var y				= Math.floor(timeline.scrollTop * hudScale)
				
			// update live area
				livearea.style.left = x + 'px'
				livearea.style.top	= y + 'px'
				
			}
	
		function updateHudWindow(){
			updateHudSize()
			updateHudPosition()
			updateHudLiveAreaSize()
			jElements.hud.show()
			}
			

	
	// ------------------------------------------------------------------------------------------------
	// interactivity
	
		function hudIconClick(code){
	
			// job
				showPanel(false)
				window.setTimeout('loadJobDetails("'+code+'")', 1100) // delay job loading
				scrollToJob(code)
				
			// hud icon
				hudIconDim(code)
			}
			
		function hudIconDim(code){
			var icon	= $('#hud-' + code)
			icon.removeClass('on')
			icon.addClass('dim')
			}
			
		function hudIconOver(element){
			var code	= $(element).attr('code')
			highlightJob(code, true)
			hudTip(element, true)
			}
			
		function hudIconOut(element){
			var code	= $(element).attr('code')
			highlightJob(code, false)
			hudTip(element, false)
			}
			
		function hudTip(element, state){
			
			var tip		= $('#hud-tip')
			
			if(state){
				
				// variables
					var hud		= $('#hud')
					var icon	= $(element)
					var title	= icon.attr('tip')

				// set text
					tip.css('display', 'block')
					tip.html('<div>'+title+'</div>')
					
				// icon properties
					var x	= parseInt(icon.css('left'))
					var y	= parseInt(icon.css('top')) + 24
					var w	= parseInt(tip.width()) + 2
					
				// screen / hud properties
					var hw	= parseInt(hud.width())
					
				// check bouds
					if(x + w > hw + 25){
						x = hw - w + 25
						}
						
				// show tip
					tip.css('left', x + 'px')
					tip.css('top', y + 'px')
				}
			else{
				tip.css('display', 'none')
				}
			
			}