// JavaScript Document
$(document).ready(function(){
	// FancyBox Initialize
	$(".atgImageView").fancybox({
			'titlePosition': 	'inside',
			'transitionIn': 	'fade',
			'transitionOut': 	'none',
			'centerOnScroll': 	'true',
			'overlayColor': 	'#000' 
		});
	
	$(".clientBox").each(function () {
		// options
		var distance = 10;
		var time = 250;
		var hideDelay = 500;

		var hideDelayTimer = null;

		// tracker
		var beingShown = false;
		var shown = false;

		var trigger = $('.trigger', this);
		var icon = new Array("iconLogo", "iconProceed", "iconProceedCustom", "iconWeb", "iconPhoto", "iconPrint", "iconAd", "iconPainting");
		var iconPos = new Array([-40,-25], [-60,40], [-60,40], [-40,115], [30,130], [90,90], [95,10], [60,-50]);
		// var popup = $('.iconLogo', this).css('opacity', 0);
		
		// defining target bubbles
		var popup_ar = new Array();
		for(i=0; i<icon.length; i++){
			popup_ar[i] = $('.'+icon[i], this);
		}
		
		// set the mouseover and mouseout on both element
		$(trigger).mouseover(function () {
			
			// stops the hide event if we move from the trigger to the popup element
			if (hideDelayTimer) clearTimeout(hideDelayTimer);

			// don't trigger the animation again if we're being shown, or already visible
			if (beingShown || shown) {
				return;
			} else {
				beingShown = true;

				for(i=0; i<popup_ar.length; i++){
					popup = popup_ar[i].css('opacity', 0);
					posTop = iconPos[i][0];
					posLeft = iconPos[i][1];

					// reset position of popup box
					popup.css({
						top: posTop,
						left: posLeft,
						display: 'block' // brings the popup back in to view
					})

					// (we're using chaining on the popup) now animate it's opacity and position
					.animate({
						top: '-=' + distance + 'px',
						opacity: 1
					}, time, 'swing', function() {
						// once the animation is complete, set the tracker variables
						beingShown = false;
						shown = true;
					});
				}
			}
		}).mouseout(function () {
			// reset the timer if we get fired again - avoids double animations
			if (hideDelayTimer) clearTimeout(hideDelayTimer);

			// store the timer so that it can be cleared in the mouseover if required
			hideDelayTimer = setTimeout(function () {
				hideDelayTimer = null;

				for(i=0; i<icon.length; i++){
					popup = popup_ar[i];

					popup.animate({
						top: '-=' + distance + 'px',
						opacity: 0
					}, time, 'swing', function () {
						// once the animate is complete, set the tracker variables
						shown = false;
						// hide the popup entirely after the effect (opacity alone doesn't do the job)
						popup.css('display', 'none');
					});
				}
				
			}, hideDelay);
		});
	});

	$("#proceedHighlights #hl-cc").mouseenter(
		function() {
			if (!$("#proceedHighlights #box1").is(':visible')) {
				$("#proceedHighlights .box").hide();
				$("#proceedHighlights #box1").stop(true, true).fadeIn();
			}
		}
	);
	$("#proceedHighlights #hl-bp").mouseenter(
		function() {
			if (!$("#proceedHighlights #box2").is(':visible')) {
				$("#proceedHighlights .box").hide();
				$("#proceedHighlights #box2").stop(true, true).fadeIn();
			}
		}
	);
	$("#proceedHighlights #hl-os").mouseenter(
		function() {
			if (!$("#proceedHighlights #box3").is(':visible')) {
				$("#proceedHighlights .box").hide();
				$("#proceedHighlights #box3").stop(true, true).fadeIn();
			}
		}
	);
	$("#proceedHighlights").mouseleave(
		function() {
			if (!$("#proceedHighlights #box0").is(':visible')) {
				$("#proceedHighlights .box").hide();
				$("#proceedHighlights #box0").stop(true, true).fadeIn();
			}
		}
	);
	
	// Fix FolioContainer atgThumb Alignments
	$(".folioContainer .atgImageLeft").parent().addClass("atgImageLeftParent");
	$(".folioContainer .atgImageRight").parent().addClass("atgImageRightParent");
	$(".folioContainer .atgImageCenter").parent().addClass("atgImageCenterParent");
	

	if($("#contactForm").length > 0) {
		$("#contactForm").validate({ 
			rules: { 
				name: { 
					required: true 
				},
				email: {// compound rule 
					required: true, 
					email: true,
					showErrors: false
				}, 
				url: { 
					url: true 
				}, 
				comment: { 
					required: true 
				} 
			}, 
			messages: { 
				comment: "",
				name: "",
				email: "",
				url: ""
			} 
		});
	}

});
function helloWorld() {
	alert("Hello World!");
}