var stripeInc = 0;
var Slider2 = Slider.extend({
	num: 0
});
var knobDown = false;
var knobOver = false;

window.addEvent('domready', function() {
	createStripes();
	setThumbs();
	replaceHeaders();
	setSubnav();
	setClientRollovers();
});

// take image grid and make functional stripe

function createStripes(){
	var stripes = $$('.stripe');
	for (var i = 0; i < stripes.length; i++){
		var s = stripes[i];
		var ss = $E('.scroll', s);
		var sWidth = 0;
		var as = $ES('a', s);
		for (var j = 0; j < as.length; j++){
			var a = as[j];
			addColorRollover(a);
		}
		if (as.length > 5){
			// set scroll width with hard-coded value
			as[as.length - 1].setStyle('margin', '0');
			sWidth = as.length * 162;
			sWidth -= 19;
			var width = (window.ie6) ? '791px' : 'auto';
			var rightMargin = (window.ie6) ? '0' : '-1px';
			as.set({
				'styles': {
					'margin-bottom': 0
				}
			});
			s.set({
				'styles': {
					'width': width,
					'margin-right': rightMargin,
					'margin-bottom': 0,
					'overflow': 'hidden'
				}
			});
			ss.set({
				'styles': {
					'width': sWidth
				}
			});
			createSlider(s);
		}
	}
}

function createSlider(s){
	var ss = $E('.scroll', s);
	var as = $ES('a', s);
	for (var i = 0; i < as.length; i++){
		var a = as[i];
		if (a.getProperty('class') == 'selected'){
			var ap = a.getPosition();
			break;
		}
	}
	var so = s.getSize();
	var sso = ss.getSize();
	var ssp = ss.getPosition();
	s.set({'id': 'stripe'+ stripeInc});
	var sl = new Element('div', {
		'id': 'slider' + stripeInc,
		'class': 'slider'
	});
	var kn = new Element('div', {
		'id': 'knob' + stripeInc,
		'class': 'knob'
	});
	sl.injectAfter(s);
	kn.injectInside(sl);
	sl.addEvents({
		'mouseenter': function(){
			this.firstChild.className = 'knobover';
		},
		'mouseleave': function(){
			this.firstChild.className = 'knob';
		}
	});
	var slider = new Slider2(sl, kn, {
		steps: so.scrollSize.x - so.size.x,
		onChange: function(step){
			var s = $('stripe'+ this.num);
			s.scrollTo(step, 0);
		}
	}).set(0);
	if (typeof(ap) != 'undefined') slider.set(ap.x - ssp.x);
	slider.num = stripeInc;
	stripeInc++;
}

function addColorRollover(a){
	var img = $E('img', a);	
	a.addEvents({
		'mouseenter': function() {
			var src = img.src;
			var dot = src.lastIndexOf('.');
			var newSrc = src.substring(0, dot - 2) +'sm'+ src.substring(dot, src.length);
			img.src = newSrc;
		},
		'mouseleave': function() {
			if (this.className.indexOf('selected') < 0){
				var src = img.src;
				var dot = src.lastIndexOf('.');
				var newSrc = src.substring(0, dot - 2) +'bw'+ src.substring(dot, src.length);
				img.src = newSrc;
			}
		}
	});
}

// rollover effect for color thumbnails

function setThumbs(){
	// set thumbs to change medium image/video
	var as = $$('#thumbs a');
	for (var i = 0; i < as.length; i++){
		var a = as[i];
		a.thumbNum = i;
		a.addEvent('click', function(event) {
			event = new Event(event).stop();
			changeImage(this.href, 'medium', this.thumbNum);
		});
		if (i == 0) var firstThumb = a.href;
	}
	// call first image change to envoke video if necessary
	if($E('#video') != null) changeImage(firstThumb, 'first');
	// set medium image tooltip
	var mediumTip = new Tips($$('.tooltip'),{
		showDelay: 200,
		offsets: { x: 10, y: -15 },
		className: 'worktip'
	});
	// set abbr tooltips
	var f = (window.ie6) ? false : true;
	var abbrTip = new Tips($$('.abbr'),{
		hideDelay: 500,
		fixed: f,
		offsets: { x: 0, y: 20 },
		onShow: function(toolTip) {
			toolTip.setStyle('visibility', 'visible');
		}
	});
}

function changeImage(an, type, num){
	var dv = $E('#video');
	var di = $E('#image');
	var at = an.substring(0, an.lastIndexOf('_'));
	var ata = at.split('index.html');
	var len = ata.length;
	var videoswitch = an.substring(an.lastIndexOf('?t=') + 3, an.length);
	var vars = { type: ata[len - 3], client: ata[len - 2], project: ata[len -1] };
	//
	var as = $$('#thumbs a');
	var img = $E('#project img');
	var imga = $E('#project a');
	var dot = an.lastIndexOf('.');
	var anl = an.substring(0, dot - 2) +'lg'+ an.substring(dot, an.length);	
	for (var i = 0; i < as.length; i++){
		var a = as[i];
		if (a == an){
			a.setProperty('class', 'selected');
			img.setProperty('src', an);
			imga.setProperty('href', anl);
		} else {
			a.setProperty('class', '');
		}
	}
	// switch between video/images
	if (videoswitch == 'flv'){
		swfobject.embedSWF('flash/video.swf', 'video_inner', '456', '330', '8', 'flash/expressInstall.swf', vars);
		di.setStyle('display', 'none');
		dv.setStyle('display', '');
	} else {
		var dvi = $E('#video_inner');
		if (window.ie && dvi.nodeName != 'DIV') dvi.SetVariable('externalStop', true);
		di.setStyle('display', '');
		dv.setStyle('display', 'none');
	}
	// hide/show digital link
	var ad = $E('#launch');
	if (ad){
		if (vars.type == 'digital'){
			ad.setStyle('display', '');
		} else {
			ad.setStyle('display', 'none');
	}
	}
	// google analytic code
	if (type != 'first'){
		var u = getAbsolutePath();
		var q = (u.indexOf('?') < 0) ? '?' : '&';
		var p;
		if (type == 'large') p = 'l';
		else if (type == 'medium') p = 'm'; 
		pageTracker._trackPageview(getAbsolutePath() + q + p + '=' + num);
	}
}

// agency -> services subnav

function setSubnav(){
	var s = $E('#subnav_services');
	if (s){
		var t = $E('#subnav_services .subnav_tier');
		t.setStyle('display', 'none');
		s.addEvent('mouseenter', function(event) {
			event = new Event(event).stop();
			var t = $E('#subnav_services .subnav_tier');
			t.setStyle('display', 'block');
		});
		s.addEvent('mouseleave', function(event) {
			event = new Event(event).stop();
			var t = $E('#subnav_services .subnav_tier');
			t.setStyle('display', 'none');
		});
	}
}

// rollover effect for client logos

function setClientRollovers(){
	var tds = $$('#clientgrid td');
	for (var i = 0; i < tds.length; i++){
		var td = tds[i];
		var as = $ES('a', td);
		var img = $E('img', td);
		for (var j = 0; j < as.length; j++){
			as[j].img = img;
		}
		//
		as.addEvents({
		'mouseenter': function() {
			var src = this.img.src;
			var dot = src.lastIndexOf('.');
			var newSrc = src.substring(0, dot - 2) +'cl'+ src.substring(dot, src.length);
			this.img.src = newSrc;
		},
		'mouseleave': function() {
			var src = this.img.src;
			var dot = src.lastIndexOf('.');
			var newSrc = src.substring(0, dot - 2) +'bw'+ src.substring(dot, src.length);
			this.img.src = newSrc;
		}
	});
	}
}

function getAbsolutePath(){
	var u = window.location.href;
	u = u.substring(u.indexOf('index.html', 7), u.length);
	return u;
}

// sIFR header replacement

function replaceHeaders(){
	if(typeof sIFR == "function"){
		sIFR.replaceElement(named({sSelector:'h1', sFlashSrc:'/flash/tradegothic_boldcondensed.swf', sColor: '#d4470f', sCase: 'upper', sWmode: 'opaque'}));
		sIFR.replaceElement(named({sSelector:'h2.orange', sFlashSrc:'/flash/tradegothic_boldcondensed.swf', sColor: '#d4470f', sCase: 'upper', sWmode: 'opaque'}));
		sIFR.replaceElement(named({sSelector:'h2', sFlashSrc:'/flash/tradegothic_boldcondensed.swf', sColor: '#94948f', sCase: 'upper', sWmode: 'opaque'}));
		//sIFR.replaceElement(named({sSelector:'h3', sFlashSrc:'/flash/tradegothic_boldcondensed.swf', sColor: '#94948f', sCase: 'upper', sWmode: 'opaque'}));
		sIFR.setup();
	}
}