// JavaScript Document
$(document).ready(function(){
	$(".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);
		});
	});
});
function openSearch() {
	$(".searchBox").fadeIn();
}