// JavaScript Document
var initializeProjectSpaces = function(){
	
	$('.projectSpace').children('.leftSideCol').children('.side_buttons_block').hide()
	$('.projectSpace').find('.largePreviewOverlay').hide()
	$('.projectSpace').find('.minimizebutton').css('left', '-999em')
	$('.projectSpace').height('auto')
	$('.projectSpace').removeClass('openproject')
	$('.projectSpace').children('.rightSide').children('.collapse').hide()
	$('.projectSpace').children('.rightSide').children('.fullInfo').hide()
	$('.projectSpace').children('.rightSide').children('.miniInfo').show()
	document.openProject = null
	
}



var validatedForm = function(form){
	
	var formfields = form.find('.required')
	
	formfields.each(function(){
							 
		if($(this).hasClass('email')){
			
			ind_at = $(this).val().indexOf('@')
			username = $(this).val().substring(0, ind_at)
			domain = $(this).val().substring(ind_at+1)
			
			ind_dot = domain.indexOf('.')
			domainname = domain.substring(0, ind_dot)
			domainext = domain.substring(ind_dot+1)
			
			if(!username || !domainname || !domainext || domainext.length < 2 || domainext.length > 4) $(this).addClass('error').css('backgroundColor', '#ff0000').animate({backgroundColor: '#ffffff'}, 500)
			else $(this).removeClass('error')
			
		}
		
		else $(this).val() == '' ? $(this).addClass('error').css('backgroundColor', '#ff0000').animate({backgroundColor: '#ffffff'}, 500) : $(this).removeClass('error')
	
	})
	
	formfields = form.find('.error').length
	
	if(formfields > 0) return false
	else return true
	
}



$(document).ready(function(){
						   
	$('#homeNav li')
		.mouseover(function(){$(this).css('backgroundPosition', '0 -50px')})
		.mouseout(function(){$(this).css('backgroundPosition', '0 0')})
		.click(function(){$(this).css('backgroundPosition', '0 -100px')})
		
	$('#topNav > li > a')
		.mouseover(function(){$(this).stop(true, true).animate({backgroundColor: '#f16c08'}, 400)})
		.mouseout(function(){$(this).stop(true, true).animate({backgroundColor: '#000000'}, 200)})
		.mousedown(function(){$(this).stop(true, true).css('backgroundColor', '#fdad02')})
		.mouseup(function(){$(this).stop(true, true).css('backgroundColor', '#f16c08')})
		.mousedown(function(){$(this).css('backgroundColor', '#fdc501')})
	
	
	//hides hidden divs, if no javascript degrades to show all content
	$('.quotePart').not(':first').hide()
	$('.formPart').not(':first').hide()
	$('.contentPart').hide()
	
	document.openProject = null
	document.activeLink = null
	document.activeSection = null
	document.currentPart = 'default'
	var pretarget = null
	
	// get url flags to navigate to relevant information on load
	if(location.href.indexOf('#') > -1){
		pretarget = location.href.substring(location.href.indexOf('#')+1)
		if(pretarget == 'top') pretarget = null
	}
	
	// set url flagged sections
	if(pretarget){
		document.currentPart = pretarget
		document.activeLink = pretarget
		// reset all projectSpace elements to default states before displaying content!!!
		initializeProjectSpaces()
		location.href = "#top"
	}
	
	// display default or flagged sections if they exist
	$('#ctnt_'+document.currentPart).show()

	//non-accordian single level menu (Company, Contact)
	$('#sideNav2 li')
		.mousedown(function(){$(this).addClass('active2')})
		.mouseup(function(){$(this).removeClass('active2')})
		.mouseover(function(){
			$(this).addClass('active')
			$(this).children('a').css('color', '#ffffff')
		})
		.mouseout(function(){
			if(document.activeSection != this.id){
				$(this).removeClass('active')
				$(this).children('a').css('color','#fdad02')
			}
		})
		.click(function(){
						
			closePart = document.currentPart
			//$('#ctnt_'+document.currentPart).slideUp()
			
			if(document.activeSection){	
				if(document.activeSection != this.id){
					$('#'+document.activeSection).removeClass('active')
					$('#'+document.activeSection).children('a').css('color','#fdad02')
					$(this).addClass('active')
					$(this).children('a').css('color','#ffffff')
					document.activeSection = this.id
					document.currentPart = document.activeSection
				}
				else {
					document.activeSection = null
					document.currentPart = 'default'
				}
			}
			else{
				document.activeSection = this.id
				document.currentPart = document.activeSection
			}
			
			$('#ctnt_'+closePart).fadeOut(function(){$('#ctnt_'+document.currentPart).fadeIn()})
			//$('#ctnt_'+document.currentPart).slideDown()
			
			return false
		})
	
	
	// sideNav is a two-level accordion menu
	$('#sideNav').accordion({ 
		active: false, 
		header: '.sideNavHead', 
		navigation: true, 
		event: 'click', 
		fillSpace: false, 
		animated: 'easeslide',
		collapsible: true
	})
	

	$('.sideNavHead')
		.mousedown(function(){$(this).addClass('active2')})
		.mouseup(function(){$(this).removeClass('active2')})
		.mouseover(function(){
			$(this).addClass('active')
			$(this).css('color', '#ffffff')
		})
		.mouseout(function(){
			if(document.activeSection != this.id){
				$(this).removeClass('active')
				$(this).css('color', '#fdad02')
			}
		})
		.click(function(){
						
			//this WAS activeSection: deactivate any activeLink, return to default state
			if(document.activeSection == this.id){
				if(document.activeLink){
					$('#'+document.activeLink).removeClass('active2')	
					document.activeLink = null
				}
				document.activeSection = null
				
				closePart = document.currentPart
				document.currentPart = 'default'
				
				$('#ctnt_'+closePart).fadeOut(function(){$('#ctnt_'+document.currentPart).fadeIn()})
				
			}
			
			//no activeSection, or section is not selected: activate this section
			else{
				if(document.activeSection){//deactivate any currently activeSection
					$('#'+document.activeSection).removeClass('active')
					$('#'+document.activeSection).css('color', '#fdad02')
				}
				//activate clicked section
				$(this).addClass('active')
				$(this).css('color', '#ffffff')
				document.activeSection = this.id
			}
			
			initializeProjectSpaces()
			
		})
		.each(function(){
			// if any childen exist with flagged pretarget, simulate click action on parent and activate child!
			if($(this).parent().children('ul').children('li').children('a#'+pretarget).length > 0){
				$(this).click()
				$('a#'+pretarget).addClass('active2')
			}
		})
		
		
		

	
	
	$('#sideNav li a')
		.mouseover(function(){
			$(this).addClass('active2')
		})
		.mouseout(function(){
			if(document.activeLink != this.id) $(this).removeClass('active2')
		})
		.click(function(){
						
			if(!$(this).parent().parent().parent().parent().hasClass('remote')){//remote class makes menu regular
				
				if(document.activeLink != this.id){//if equal, no change!

					// reset any activeLinks
					if(document.activeLink) $('#'+document.activeLink).removeClass('active2')
					
					//activate this link
					$(this).addClass('active2')
					document.activeLink = this.id
					
					// assign variables on what to hide and display
					closePart = document.currentPart
					document.currentPart = this.id
					
					//hide current content, reset projectSpace elements, and show selected content
					$('#ctnt_'+closePart).fadeOut(function(){initializeProjectSpaces();$('.contentContainer').height($('#ctnt_'+document.currentPart).height());$('#ctnt_'+document.currentPart).fadeIn();})
					
					initializeProjectSpaces()
				}
				
				return false
			}
			
		})
		
		
	//this controls behaviour of the service links contained in the project listings '.miniInfo'
	$('.categories').children('a').click(function(){
		if(!$(this).parent().hasClass('remote')){
			serviceTarget = $(this).attr('href').substring(1)
			if(document.activeLink != serviceTarget){
				if(document.activeSection != $('#'+serviceTarget).parent().parent().parent().children('.head').attr('id')) $('#'+serviceTarget).parent().parent().parent().children('.head').click()
				$('#'+serviceTarget).click()
			}

			return false	
		}
	})
	
	
	
	// miniInfo More Info button properties
	$('.miniInfo > .button')
		.mouseover(function(){
			$(this).stop(true, true).animate({backgroundColor: '#f16c08', color: '#ffffff'}, 200)
		})
		.mouseout(function(){
			$(this).stop(true, true).animate({backgroundColor: '#777777', color: '#cccccc'}, 200)
		})
		.click(function(){
			if(document.openProject){//reset any currently open projectSpaces
				document.openProject.children('.rightSide').children('.collapse').hide()
				document.openProject.children('.minimizebutton').css({left: '-999em'})
				document.openProject.children('.largePreviewOverlay').animate({height: '122px', width: '172px', opacity: 0}, function(){$(this).hide()})
				document.openProject.css('height', 'auto')
				//document.openProject.children('.thumbnail').mouseout()
				document.openProject.children('.leftSideCol').children('.side_buttons_block').hide()
				document.openProject.children('.rightSide').children('.fullInfo').slideUp(function(){
					$(this).parent().children('.miniInfo').fadeIn()
					$(this).parents('.projectSpace').removeClass('openproject')
				})
			}
			
			document.openProject = $(this).parent().parent().parent()
			
			// fade out mini info and replace with full info
			$(this).parent().fadeOut(function(){
				$(this).parents('.projectSpace').addClass('openproject')
				$(this).parent().children('.fullInfo').slideDown()
				$(this).parent().children('.collapse').show().mouseover().mouseout()
				$(this).parent().parent().children('.leftSideCol').children('.side_buttons_block').show()
			})
		})
		
		
	$('.collapse')
		.click(function(){//reset projectSpace to miniInfo state
			document.openProject = null
			$(this).parents('.projectSpace').removeClass('openproject').css('height', 'auto')
			$(this).hide()
			$(this).parent().parent().children('.largePreviewOverlay').fadeOut()
			$(this).parent().parent().children('.minimizebutton').css({left: '-999em'})
			$(this).parent().parent().children('.leftSideCol').children('.side_buttons_block').hide()
			$(this).parent().children('.fullInfo').slideUp(function(){
				$(this).parent().children('.miniInfo').fadeIn()		
				$(this).parent().removeClass('.openproject')
			})
		})
		
	
	
	
	
	$('.side_buttons_block > .button')
		.mouseover(function(){
			if($(this).children('a').hasClass('popIcon')){
				$(this).children('a').css({color: '#ffffff', background: '#f16c08 url(/2010/images/popoutIcon.gif) no-repeat right -34px'})
			}
			else $(this).children('a').css({color: '#ffffff', backgroundColor: '#f16c08'})
		})
		.mouseout(function(){
			if($(this).children('a').hasClass('popIcon')){
				$(this).children('a').css({color: '#aaaaaa', background: '#555555 url(/2010/images/popoutIcon.gif) no-repeat right top'})
			}
			else $(this).children('a').css({color: '#aaaaaa', backgroundColor: '#555555'})
		})
		.children().addClass('ls_off')
		
	$('.popIcon').addClass('popIcon')
		
	$('.minimizebutton, .zoombutton')
		.mouseover(function(){$(this).css({color: '#ffffff', backgroundColor: '#f16c08'})})
		.mouseout(function(){$(this).css({color: '#aaaaaa', backgroundColor: '#555555'})})

	
	$('.button')
		.mouseover(function(){$(this).children('div').show()})
		.mouseout(function(){$(this).children('div').hide()})
		.mousemove(function(e){$('#popNotice, #popNotes').css({top: (e.pageY+5)+'px', left: (e.pageX+5)+'px'})})
		
	$('.button.likethumb')
		.mouseover(function(){$(this).parents('.projectSpace').find('.thumbnail').css('border', '4px solid #f16c08')})
		.mouseout(function(){$(this).parents('.projectSpace').find('.thumbnail').css('border', '4px solid #888888')})
		
	
	$('.button.showNotice')
		.mouseover(function(e){ if($(this).parents('.projectSpace').hasClass('openproject')) $('#popNotice').css({top: e.pageY+'px', left:e.pageX+'px'}).show()})
		.mouseout(function(){$('#popNotice').hide()})
		
	
	$('.button.showNotes')
		.mouseover(function(e){ $('#popNotes').css({top: e.pageY+'px', left:e.pageX+'px'}).show()})
		.mouseout(function(){$('#popNotes').hide()})
		
	
		
		
		
	
	if($('#ctnt_default').height() < 400) $('#ctnt_default').height(400)

})
