var timeout	= 500;
var closetimer	= 0;
var commentKeyUp = false;
var commentRotationInterval;
	$(function(){
		$('a.quadrantDetails').bind('click', function(){
			//displayGridDetails(true);
			displayGridDetails();
		});
		$('.whereDoYouFit ').bind('click', displayGridDetails);
		$('button.question').bind('mouseover', showDefinition);
		
		$('.quadrant a').live('click', loadPostComment);
		$('.quadrant a').bind('mouseover', displayComments);
		
		$('#postComment').live('click', function(){
			 postComment(true);
		});
		
		$('.addMe').live('click', function(){
			 postComment(false);
		});
		$(".showComments").bind('mouseover', function(){
			cancelclosetime()
		});
		if(activateQuadrant){
			displayGridDetails();
		}
		
		$('#comment').live("keyup", function(){
			commentKeyUp = true;
		});
		
		//$('#Grid').mouseover(stopQuadCommentRotation);
		//startQuadCommentRotation();
		
		
		$(".quadClose").bind('click', turnOffQuadSteps)
		$(".getStarted").bind('click', nextStep)
		
	});
	
	
	
	//timer 
	function closeCommentPopup(){
		$(".showComments").hide();
		$('.showComments .popup_body').removeClass('hr_display');
		$('.showComments .popup_body').html('');
		commentKeyUp = false;
	}
	
	function closetime(){
		closetimer = window.setTimeout(closeCommentPopup, timeout);
	}
	
	function cancelclosetime(){
		window.clearTimeout(closetimer);
	}
	
	function loadPostComment(){
		turnOffQuadSteps();
		cancelclosetime();
		var thisObj = $(this);
		var plot = thisObj.attr('plot');
		var quadrantNumber = thisObj.attr('quadrant');
		var thisPosition = thisObj.position();
		var container = '.showComments';
		
		if(!checkQuadrant(quadrantNumber, plot)){
			$(container + ' .popup_body').html('');
			$(container + ' .popup_body').removeClass('hr_display');
		}
		
		$('#Grid .quadrant a').removeClass('on');
		thisObj.addClass('on');
		
		displayGridDetails();
		displayCommentBox(container, quadrantNumber, plot, position = thisPosition)
	}
	
	
	
	/* this shows the comment box on click */
	function displayCommentBox(container, quadrantNumber, plot, position){
		$(container + ' .popup_body .hr').remove();
		$('.thisTextarea').remove();
		
		var tempHtml = "";
		
		if( !$(container + ' .popup_body').hasClass('hr_display') ){
			if( $(container + ' .popup_body span').hasClass('quote') ){
				$(container + ' .popup_body').addClass('hr_display');
			}
		}
		
		//if(!checkCookie("Data Security Quadrant", container)){
		if( parseInt(getCookie("Data Security Quadrant")) < 16 || !checkCookie("Data Security Quadrant") ){	
			tempHtml += '<div class="hr"></div><div class="thisTextarea">' +
								'<table>' + 
									'<tr>'+
										'<td><input type="submit" class="button addMe" value="add me" /></td>'+
										'<td><span>Information is anonymous.</span></td>'+
									'</tr>'+
								'</table>'+
								'<p class="textBox_desc">Add a comment to your location: <span>(optional)</span></p>' +
								'<input type="hidden" name="quadrant" value="' + quadrantNumber + '">' +
								'<input type="hidden" name="plot" value="' + plot + '">' +
								'<textarea id="comment"></textarea>' +
								'<div class="status"></div>'+
								'<input type="submit" class="button submit" id="postComment">' +
								'<div class="clear"></div>' + 
							'</div>';
		}else{
			tempHtml += '<div class="hr"></div><div class="thisTextarea">' +
							'<span class="alreadySubmitted">You have already submitted a Comment.</span>' +
						'</div>';
		}
				
		if($(container).css('display') == 'block'){
			loadPopUp(content = tempHtml, displayComment = false, container = container, position = position, quadrantNumber, plot)
		}else{
			loadPopUp(content = tempHtml, displayComment = true, container = container, position = position, quadrantNumber, plot)
		}
		
		
		
		// sets up comment limit 
		$('#comment').maxlength({   
			maxCharacters: 150, // Characters limit   
			status: true, // True to show status indicator bewlow the element    
			statusClass: "status", // The class on the status div  
			statusText: "character left", // The status text  
			notificationClass: "notification",	// Will be added when maxlength is reached  
			showAlert: false, // True to show a regular alert message    
			alertText: "You have typed too many characters.", // Text in alert message   
			slider: false // True Use counter slider    
		}); 
	}
	
	function displayComments(e) {
		e.stopPropagation();
		cancelclosetime()
		var thisObj = $(this);
		var container = ".showComments";
		var thisPosition = thisObj.position();
		var tempHtml = "";
		var currentCount = 0;
		
		
		var quadrantNumber = thisObj.attr('quadrant'); //incoming Quadrant Number found from MouseOver
		var plotNum = thisObj.attr('plot'); //incoming Plot Number from MouseOver
		
		if( data.quadrants[quadrantNumber] != undefined){
			if( data.quadrants[quadrantNumber].PLOTS[plotNum] != undefined ){
				
				var commentsAtThisPlot = data.quadrants[quadrantNumber].PLOTS[plotNum].COMMENTS; //returns an array of comment hashmaps from Quadrant 1, Plot number 10
				var commentCountAtThisPlot = commentsAtThisPlot.length; //number of comments at this plot
				
				for( i = 0; i < commentCountAtThisPlot && i < 3; i++){
					if(commentsAtThisPlot[i].comment != ""){
						tempHtml += '<span class="quote">&rdquo;' + commentsAtThisPlot[i].comment  + '&rdquo;</span>';
					}
				}
			}
		}
		
		if(tempHtml != ''){
			loadPopUp(content = tempHtml, displayComment = true, container = container, position = thisPosition, quadrantNumber, plotNum)
			cancelclosetime()
		}else{
			$('.definition').hide();
			
			//$(container).hide();
			
			closetime();
			
		}
		
	}
	
	var lastQuadrantNumber = 0;
	var lastPlotNumber = 0;
	
	function checkQuadrant(quadrantNumber, plotNum){
		if(quadrantNumber != lastQuadrantNumber || plotNum != lastPlotNumber){
			lastQuadrantNumber = quadrantNumber;
			lastPlotNumber = plotNum;
			return false;
		}else{
			return true;
		}
	}
	
	function loadPopUp(content, displayComment, container, position, quadrantNumber, plotNum){
			if(!displayComment){
				$(container + ' .popup_body').append(content);
			}else if( !checkQuadrant(quadrantNumber, plotNum) ){
				$(container + ' .popup_body').html(content);
			}else{
				$(container + ' .popup_body').html(content);
			}
			
			setPopUpPosition(position.left, position.top, container, quadrantNumber)
			$(container).fadeIn('fast');
		}
	
	// set the pop up position
	function setPopUpPosition(positionLeft, positionTop, container, quadrantNumber){
		
		if(container != ".definition"){
			var plus = 50;
			var minus = 42;
			if(quadrantNumber == 1 || quadrantNumber == 2){
				positionTop = positionTop + 10;
				$(container).addClass('top');
			}else{
				positionTop = positionTop - parseInt($(container).css('height'));
				$(container).removeClass('top');
			}
		}else{
			var plus = 55;
			var minus = 40;
			positionTop = positionTop - parseInt( $(container).css('height') );
		}
		
		if(quadrantNumber == 1 || quadrantNumber == 3){
			$(container).removeClass('right');
			$(container).css('left', positionLeft  - minus);
		}else{
			$(container).addClass('right');
			$(container).css('left', positionLeft - parseInt($(container).css('width'))  + plus );
		}
		
		$(container).css('top', positionTop);
	}
	
	function postComment(withComment){
		var commentContainer = $('.showComments');
		
		if(withComment){
			var comment = $('#comment').val();
		}
		
		var quadrantNumber = parseInt( $('input[name="quadrant"]').val() );
		var plotNumber = parseInt( $('input[name="plot"]').val() );
		
		if((comment == "" && withComment) || (!commentKeyUp && withComment)){
			alert("Please enter a comment before submitting.")
		}else{
			$.ajax({
				type: "get",
				url: "/Modules/hp_quadrant/techquadrant_facade.cfc",
				dataType:'text',
				data: {
					method: "postComment",
					quadrantID: quadrantNumber,
					plotID: plotNumber,
					comment: comment,
					ipAddress: userIp
				},
				success: function(response) {
					//if the cookie already exists, grab the ucrrent post count and increment
					var postCount = 0;
					if(checkCookie("Data Security Quadrant")) {
						postCount = parseInt(getCookie("Data Security Quadrant")) + 1;
					}
					else{
						postCount += 1;	
					}
					setCookie("Data Security Quadrant", postCount, 1);
					commentContainer.hide();
					$('#Grid .quadrant a.on').addClass('post');
					newsLetterPopUp();
					commentKeyUp = false;
				},
				error: function(response) {
					alert('An error has occurred while trying to post comment.\nPlease try again later. Our apologies.');
				}
			});
		}
	}
	
	function showDefinition(){
		var thisObj = $(this);
		var thisObjName = thisObj.attr('quadrantName');
		var thisObjID = thisObj.attr('quadrantId');
		var position = thisObj.offset();
		var	positionLeft = position.left;
		var	positionTop = position.top;
		var container = ".definition";
		var text = $('.'+thisObjName.toLowerCase()).html();
		
		
		$(container + ' .popup_body').html(text);
		
		setPopUpPosition(positionLeft, positionTop, container, thisObjID)
		
		$(container).show();
		$('.showComments').hide();
	}
	
	function displayGridDetails(fullControl){
		if($('.gridDetails').css('display') != 'block'){
			$('#organizationFit').slideDown();
			$('#gridModulers').hide();
			$('#whereDoYouFit').show();
		}else if(fullControl == true){
			$('#organizationFit').slideUp();
			$('#gridModulers').show();
			$('#whereDoYouFit').hide();
		}
	}
	
	/// cookies
	function getCookie(c_name){
		var i,x,y,ARRcookies=document.cookie.split(";");
		for (i=0;i<ARRcookies.length;i++){
			x=ARRcookies[i].substr(0,ARRcookies[i].indexOf("="));
			y=ARRcookies[i].substr(ARRcookies[i].indexOf("=")+1);
			x=x.replace(/^\s+|\s+$/g,"");
			if (x==c_name){
				return unescape(y);
			}
		}
	}
	
	function setCookie(c_name, value, exdays){
		
		var exdate=new Date();
		exdate.setDate(exdate.getDate() + exdays);
		var c_value=escape(value) + ((exdays==null) ? "" : "; expires="+exdate.toUTCString());
		document.cookie=c_name + "=" + c_value;
		
	}
	
	function checkCookie(c_name, container){
		var cookieName = getCookie(c_name);
		$(container).addClass("cOn");
		$(container + ' .popup_body .hr').remove();
			/*$(container + ' .popup_body').append('<div class="hr"></div><div class="thisTextarea">' +
								'<span class="alreadySubmitted">You have already submitted a Comment.</span>' +
							'</div>');*/
		if (cookieName!=null && cookieName!="") {
			return true;
		}else{
			return false;
		}
	}
	
	function nextStep(){
		var thisObj = $(this);
		var stepNum = thisObj.parent().parent().attr('stepNum');
		var nextStepNum = parseInt( stepNum ) + 1;
		
		$(".quadStep"+ stepNum ).hide();
		//$(".quadStep" +  nextStepNum).show();
		$('#quadrantStep_2').show()
		$('#quadrantStep_3').delay(2000).queue(function(){
			$(this).show();
		})
		displayGridDetails();
	}
	
	function turnOffQuadSteps(){
		$('.quadrantSteps').hide();
	}
	
	function startQuadCommentRotation(){
		var rotate = function(){
			var selectPlot = function(){
				var comments = $('#Grid a[hascomment="true"]');
				var totalCount = comments.length;
				var randomIdx = Math.floor(Math.random()*totalCount);
				comments.eq(randomIdx).mouseover();
			}; 
			if($('.showComments').length > 0 ){
				$('.showComments').fadeOut('fast', selectPlot);
			}
			else{
				selectPlot.call();
			}
			
			
			
		};
		commentRotationInterval = setInterval(rotate, 3000);
	}
	
	function stopQuadCommentRotation(){
		clearInterval(commentRotationInterval);
	}
