// CONFIGURATION
var iconWidth = 139;
var iconHeight = 67;
var iconSpacing = 5;
var iconOpacity = 80;
var fadeSpeed = 5;
var slideSpeed = .5;

// DON'T TOUCH IT
var categories = [];
var clients = [];
var intCols = 0;
var intClientsLoaded = 0;
var fadingOut = false;
var tmrPopupScroll;
var current_client_name; // SET IN portfolioService.js > displayWork()

/*********************************************************************************/
// CLIENT LOGO

function _client(id,logo,name,blurb){
	this.id = id;
	this.logo = logo;
	this.opacity = 0;
	this.enabled = false;
	this.name = name;

	// CREATE IMAGE ELEMENT
	var imgId = 'clientLogo_' + id;
	var objImg = new Element('img');
	objImg.setAttribute('id',imgId);
	objImg.setAttribute('class','clientIcon');
	objImg.setAttribute('clientId',id);
	objImg.setAttribute('src','portfolio/logos-sorters/'+logo+'.gif');
	//objImg.setAttribute('class','help');
	//objImg.setAttribute('title',name+'\n'+blurb);
	objImg.setAttribute('title',blurb.replaceAll('&quot;','"').replace('&eacute;','e').replaceAll('<br />',' ').replaceAll('<br/>',' ').replaceAll('<br/>',' '));
	$('clientLogoArea').appendChild(objImg);
	this.img = $(imgId);
	if(!isMacFF) this.img.setOpacity(0);
	this.img.style.position = 'absolute';

	this.setPos = function(coords){
		this.img.style.left = coords[0] + 'px';
		this.img.style.top = coords[1] + 'px';
	}

	this.fade = function(){
		// BEGINS FADING PROCESS (FADE IN OR OUT)
		this.stopFade();
		this.tmrFade = window.setInterval('clientLogoFade('+this.id+');',10);
		this.setPos(this.coords);
	}

	this.slide = function(tgtCoords){
		// BEGINS SLIDING PROCESS
		this.stopSlide();
		this.coordsTarget = tgtCoords;
		this.originalDistance = calc_distance(this.coordsTarget[0] - this.coordsOrigin[0],this.coordsTarget[1] - this.coordsOrigin[1]);
		this.dist = 0;
		if(this.originalDistance>0){
			// IF ICON NEEDS TO MOVE, CALCULATE ANGLE AND SET TIMER
			this.theta = calc_theta(this.originalDistance,this.coordsTarget[0] - this.coordsOrigin[0]);
			this.tmrSlide = window.setInterval('clientLogoSlide('+this.id+');',10);
		}else{
			// ICON DOES NOT NEED TO MOVE
			this.coords = [this.coordsTarget[0],this.coordsTarget[1]];
			this.coordsOrigin = [this.coords[0],this.coords[1]];
		}
	}

	this.stopSlide = function(){
		window.clearInterval(this.tmrSlide);
	}

	this.stopFade = function(){
		window.clearInterval(this.tmrFade);
	}

	// TRACK ICON LOADING STATUS:
	if(document.all){
		// IE
		window.setTimeout(status_refresh,1000);
	}else{
		// OTHER BROWSERS
		Event.observe(this.img,'load',function(){status_refresh();},false);
		Event.observe(this.img,'error',function(){status_refresh();},false);
	}

	// ICON EVENTS
	if(!isMacFF){
		Event.observe(this.img,'mouseover',function(){ if(this.enabled) this.setOpacity(1); },false);
		Event.observe(this.img,'mouseout',function(){ if(this.enabled) this.setOpacity(iconOpacity/100); },false);
	}
	Event.observe(this.img,'click',function(){ displayWork(this.getAttribute('clientId')); },false);

}

function clientLogoFade(id){
	var client = getClient(id);
	if(client.enabled){
		// SHOW ICON IF NOT SHOWN
		if(client.img.style.display!='block') client.img.show();
		if(client.opacity<iconOpacity){
			// INCREASE OPACITY
			client.opacity += fadeSpeed;
		}else{
			// MAX OPACITY REACHED
			client.stopFade();
		}
	}else{
		if(client.opacity>0){
			// DECREASE OPACITY
			client.opacity -= fadeSpeed;
		}else{
			// INVISIBILITY REACHED
			client.img.hide();
			client.stopFade();
			fadingOut = false;
		}
	}

	if(!isMacFF) client.img.setOpacity(client.opacity/100);
}

function clientLogoSlide(id){
	var client = getClient(id);
	if(client.originalDistance<=0){
		// IF ICON HAS NOWHERE TO GO, BAIL OUT
		client.coords = client.coordsTarget;
		client.stopSlide();
	}
	// CALCULATE SPEED PERCENTAGE
	var pct = (client.dist / client.originalDistance) * 100;
	if(pct > 50) pct = 100 - pct;

	var delta = (pct * slideSpeed) + 3;
	client.dist += delta;

	if(client.dist>client.originalDistance){
		// IF ICON HAS TRAVELED MORE THAN IT SHOULD HAVE, LEVEL OFF AND STOP
		client.dist = client.originalDistance;
		client.coords = client.coordsTarget;
		client.stopSlide();
	}else{
		// CALCULATE x AND y BASED ON NEW DISTANCE
		client.coords[0] = calc_x(client.dist,client.theta);
		client.coords[1] = calc_y(client.dist,client.theta);

		// DIRECTIONAL ADJUSTMENT
		(2).times(function(i){
			if(client.coordsOrigin[i]>client.coordsTarget[i]) client.coords[i] = -client.coords[i];
		});

		client.coords[0] += client.coordsOrigin[0];
		client.coords[1] += client.coordsOrigin[1];
	}

	client.setPos(client.coords);

}

function status_refresh(){
	// CALLED WHEN AN ICON IS LOADED
	intClientsLoaded++;
	var pct = Math.ceil((intClientsLoaded / clients.length) * 100);
	if(pct==100){
		// IF ALL ICONS LOADED, FADE THEM IN SEQUENTIALLY
		$('clientLogoArea').style.backgroundImage = 'none';
		for(var i=0;i<clients.length;i++){
			var client = clients[i];
			client.coords = calc_logoPos(i);
			client.setPos(client.coords);
			client.enabled = true;
			client.img.enabled = true;
			window.setTimeout("clients[" + i + "].fade()",60 * i);
		}

	}
}

function getClient(id){
	return clients.find(
		function(item,index){
			if(item.id==id){
				return item;
			}
		}
	);
}

function addClient(id,logo,name,blurb){
	clients.push(new _client(id,logo,name,blurb));
}

function calc_logoPos(index){
	// CALCULATE x AND y BASED ON LOGO ORDER
	var x = Math.round(index % intCols) * (iconSpacing + iconWidth) + iconSpacing;
	var y = Math.floor(index/intCols) * (iconSpacing + iconHeight) + iconSpacing;
	return [x,y];
}

function portfolio_init(){
	// CALCULATE NUMBER OF COLUMNS
	intCols = Math.floor(Element.getWidth($('clientLogoArea')) / (iconWidth + iconSpacing));

	// ADJUST HEIGHT OF ICON AREA
	if(isIE) $('clientLogoAreaHeader').style.marginBottom = '32px';
	$('clientLogoArea').style.height = (Math.ceil(clients.length / intCols) * (iconHeight + iconSpacing)) + 'px';
	$('clientLogoArea').style.display = 'block';

	$('mnuCategories').observe('slimMenu:value_changed',filterLogos,false);
	$('mnuCaseStudies').observe('slimMenu:value_changed',RequestCaseStudies,false);

	// SHOW WARNING IF MAC and FF
	if(isMacFF){
		//$("ffmsg").style.display = "block";
	}else{
	// ALL OTHER BROWSER/PLATFORM COMBOS, RENDER DARK SCREEN TRANSPARENT
		with($('dark_screen')){
			style.mozOpacity = '0.8';
			style.opacity = '0.8';
    			style.filter = 'alpha(opacity=80)';
		}
	}

}

function fadeOutInactive(activeClients,visibleClients){
	// BEGIN FADE OUT ON INACTIVE CLIENTS
	clients.each(
		function(client){
			if(visibleClients.indexOf(','+client.id+',')==-1&&client.enabled){
				fadingOut = true;
				client.enabled = false;
				client.img.enabled = false;
				client.fade();
			}
		}
	);
}

function filterLogos(){
	var visibleClients = ',';
	var currentCategory = $('mnuCategories').value();//$F('ddFilterLogos');
	var activeClients = categories[currentCategory];
	if(!activeClients){
		// NO CLIENTS APPLY TO THIS CATEGORY; BAIL OUT
		clients.each(
			function(item){
				clients.enabled = false;
			}
		);
		fadeOutInactive('','');
		return;
	}else{
	    // GENERATE LIST OF ACTIVE CLIENT IDs
	    activeClients.each(
		    function(id,index){
			    visibleClients += id + ',';
		    }
	    );
	}

	fadeOutInactive(activeClients,visibleClients);

	new PeriodicalExecuter(function(pe) {
	  if(!fadingOut){
		pe.stop();

		activeClients.each(
			function(id,index){
				var client = getClient(id);
				if(client.enabled){
					// PREVIOUSLY SHOWN, SLIDE
					client.coordsOrigin = [client.coords[0],client.coords[1]];
					client.slide(calc_logoPos(index));
				}else{
					// NOT PREVIOUSLY SHOWN, SET TO ACTIVE
					client.coords = calc_logoPos(index);
					client.enabled = true;
					client.img.enabled = true;
				}
				client.setPos(client.coords);
			}
		);

		clients.each(
			function(client){
				client.fade();
			}
		);
	  }
	}, .01);

}

function RequestCaseStudies(){
	document.location = 'integrated-marketing-portfolio.aspx?cid=' + $('mnuCaseStudies').value();
}

// CALCULATIONS FOR SLIDE MOVEMENT
function calc_theta(distance,x){ return Math.abs(toDegrees(Math.asin(x / distance))); }
function calc_distance(x,y){ return Math.sqrt(Math.pow(x,2)+Math.pow(y,2)); }
function calc_x(distance,theta){ return distance * Math.sin(toRadians(theta)); }
function calc_y(distance,theta){ return distance * Math.cos(toRadians(theta)); }
function toDegrees(radians){ return radians * (360 / (Math.PI * 2)); }
function toRadians(degrees){ return degrees * (Math.PI * 2 / 360); }

// COOLTIPS
function cooltips_init(){}

function invoke_tracking(tag){
	//alert(tag);
}