var TOUCH_DEVICE = !!('ontouchstart' in window);

$(document).ready(function() {
	
	//var PROFILE_START = (new Date()).getTime();//PROFILING INIT TIME
	var header = new PiiqHeader(), f, families = {};
	
	if($('body').hasClass('team_detail')){ setupTeamListDetail(); } //marking the current page in the detail team member list
	
	if($('.heroCarousel').length){
		var phc = new PiiqHeroCarousel('.heroCarousel');
		$('.module.variable').each(function(){ new VariableModule(this, phc); });
	}
	
	$('.piiqModule').each(function(){ new PiiqModule(this); });//piiq modules with corner notches, icons, and rollover states 
		
	$('.cw_module').each(function(){ new ColorwayModule(this); }); //colorway modules
	
	$('.module.piiq_pairs').each(function(){ new PiiqPairs(this); }); //filter roller for the piiq pairs modules
	
	$('#partners').children('li').each(function(){ new PartnersModule(this); }); //piiq partners list
	
	$('#site_nav .dd').each(function(){ new PiiqDropDown(this); }); //dropdown
	
	$('#site_nav #site_nav_prod .dd').each(function(){ new ProductDD(this); }); //product dropdown
	
	$('#site_nav #site_nav_team .dd').each(function(){ new TeamDD(this); }); //team dropdown
	
	$('.basicSlider').each(function(){ new SliderModule(this); });
	
	$(".sportNav li a").each(function() {
		$(this).append($("span", this).clone().addClass("highlight"));
		$(this).hasClass("selected") && $(this).addClass("hover");
	});
	
	if(!TOUCH_DEVICE) {
		$(".sportNav li a").hover(
			function() {
				$(".sportNav li a.hover").removeClass("hover");
				$(this).addClass("hover");
			},
			function() {
				$(this).removeClass("hover");
				$(".sportNav li a.selected").addClass("hover");
			}
		);
	}
	
	if ($('.newsArchiveList').length) {
		new PiiqNewsControl('.newsArchiveList', '.newsDetailContent', '.newsDetail');
	}
	
	if($('.productLandBox').length) {
		$('.productLandBox').each(function() {
			var famName = $(this).data("family");
			if(!!families[famName]) {
				families[famName].push(this);
			} else {
				families[famName] = [this];
			}
		});
		
		for(f in families) {
			(new PiiqProductLandingFamily(families[f]));
		}
	}
	
	if ($('.productCarousel').length) {
		new PiiqProductDetail('.productCarousel');
	}
	
	//PROFILING INIT TIME
	//var PROFILE_END = (new Date()).getTime();
	//console.log('Init Time: ' + (PROFILE_END - PROFILE_START) + 'ms');
});




var SliderModule = function(el){
	var t = this;
	$.extend(t, {
		$el : $(el),
		lBtn : $('<div/>', {'class' : 'btn left'}),
		rBtn : $('<div/>', {'class' : 'btn right'}),
		curInd : 0,
		dur : 300,
		animating : false,
		hasThumbs : false,
		easingMethod : 'easeOutExpo',
		thumbMods : []
	});
	
	t.ul = t.$el.children('ul').eq(0);
	t.lis = t.ul.children('li');
	t.lw = t.lis.eq(0).width();
	t.btns = t.lBtn.add(t.rBtn);
	
	//setup
	if(t.lis.length > 1){
		t.ul.width(t.lw * t.lis.length);
		t.lBtn.appendTo(t.$el).bind('click', function(e){e.preventDefault(); t.onBtnClick('left')});
		t.rBtn.appendTo(t.$el).bind('click', function(e){e.preventDefault(); t.onBtnClick('right')});
		
		if(!TOUCH_DEVICE) {
			t.btns.hide();
			if($.support.opacity){
				t.btns.bind({
					mouseenter : function(e){$(e.target).fadeTo(100, 1)},
					mouseleave : function(e){$(e.target).fadeTo(100, .7)}
				});
			}
			t.$el.hoverIntent({
				over:function(){t.onOver()},
				out:function(){t.onOut()},
				interval:0,
				timeout:200
			});
		} else {
			t.btns.show();
		}
		
		if(t.ul.find('.thumbnail').length){
			var ul = $('<ul/>', {'class':'thumbList'});
			t.ul.find('.thumbnail').each(function(i){
				var li = $('<li/>');
				var a = $('<a class="piiqModule" data-linkStroke="#404142" data-notch="0" href="#'+ i +'"/>');
				a.bind('click', function(e){
					e.preventDefault();
					e.stopPropagation();
					t.slideTo(i)
				}).append($(this))
				li.append(a).appendTo(ul);
			});
			
			t.$el.append(ul);
			ul.find('li a').each(function(){t.thumbMods.push(new PiiqModule(this))});
			t.hasThumbs = true;
			t.thumbMods[0].showStroke();
			t.thumbMods[0].$el.addClass("selected");
		}
		
	}
	
	t.checkForVideo(false);
}


var PiiqHeroCarousel = function(el){
	var t = this;
	
	$.extend(t, {
		$el : $(el),
		stages : [],
		lBtn : $('<span />').attr('class', 'btn left'),
		rBtn : $('<span />').attr('class', 'btn right'),
		curInd : 0,
		dur : 300,
		easeType : 'easeOutQuad',
		category : null,
		navItems : []
	});
	
	t.lis = t.$el.children('ul').children('li');
	t.stageImgs = t.$el.find('.stageImage');
	t.btns = $(t.lBtn).add(t.rBtn);
	
	t.stageImgs.each(function(i){
		var _t = $(this), stg = $('<div/>').attr('class', 'stage');
		stg.css('background-image', 'url('+_t.attr('src')+')').appendTo(t.$el);
		
		t.stages.push(stg);
		if(i != 0){
			stg.hide();
		}
	}).detach();
	
	t.$el.append($('<div/>').attr('class', 'overlay'));
	
	
	if(t.stageImgs.length > 1){
		t.$el.append(this.lBtn, this.rBtn);
		t.lBtn.bind('click', function(e){e.preventDefault(); t.onButtonClick('left')});
		t.rBtn.bind('click', function(e){e.preventDefault(); t.onButtonClick('right')});
		if(!TOUCH_DEVICE) {	
			t.$el.bind({
				mouseenter : function(){t.onOver();},
				mouseleave : function(){t.onOut();}
			});
			t.btns.hide().bind({
				mouseenter : function(){ $(this).fadeTo(100, 1);},
				mouseleave : function(){ $(this).fadeTo(100, .7);}
			});
		}
		t.createCarouselNav();
		
		t.slideTo(0, 'right');
	}

}
PiiqHeroCarousel.prototype.createCarouselNav = function(){
	
	var t = this;
	
	var container = $('<div />', {"class": 'carouselNavContainer'});
	t.$el.append(container);
	
	var navList = $('<ul />', {"class": 'carouselNav'});
	container.append(navList);
	
	t.lis.each(function(index, element) {
		
		var li = $('<li />');
		li.appendTo(navList);
		
		var a = $('<a/>', {"href":"#"}).appendTo(li);
		
		var img = $('<span />', {"class": $(element).data('icon')}).appendTo(a);
		
		a.bind('click', function(e){
			e.preventDefault();
			e.stopPropagation();
			t.navItemClick(index);
		});
		
		t.navItems.push(new PiiqModule(a, 0));
		
	});
	
}
PiiqHeroCarousel.prototype.navItemClick = function(index){
	var t = this, prevInd = t.curInd;
	
	t.curInd = index;
	
	(prevInd !== t.curInd) && t.slideTo(t.curInd, t.curInd < prevInd ? 'left' : 'right');
}
PiiqHeroCarousel.prototype.onButtonClick = function(dir) {
	var t = this, prevInd = t.curInd;
	dir = dir || "right";
	switch(dir){
		case 'left':
			t.curInd = t.curInd > 0 ? t.curInd-1 : t.lis.length-1;
		break;
		case 'right':
			t.curInd = t.curInd < t.lis.length -1 ? t.curInd+1 : t.curInd = 0;
		break;
	}
	
	(prevInd !== t.curInd) && this.slideTo(t.curInd, dir);
}
PiiqHeroCarousel.prototype.onOver = function(){
	$(this.rBtn).add(this.lBtn).fadeTo(100, .7);
}
PiiqHeroCarousel.prototype.onOut = function(){
	$(this.rBtn).add(this.lBtn).fadeTo(100, 0);
}
PiiqHeroCarousel.prototype.slideTo = function(ind, dir){
	var t = this, i, thumb;
	dir = dir || "right";
	
	for(i=0; i< t.stages.length;i++){
		thumb = t.navItems[i];
		if(i==ind){
			t._in(i, dir);
			thumb.$el.addClass('selected');
			thumb.overColor = '#989898';
			thumb.showStroke();
		}else{
			t._out(i, dir);
			thumb.$el.removeClass('selected');
			thumb.overColor = '#00bcd4';
			thumb.hideStroke();
		}
	}
	t.category = t.lis.eq(ind).data('category');
	t.$el.trigger('carouselchanged');
}
PiiqHeroCarousel.prototype._out = function(i, dir){
	var t = this, theMargin = dir === 'left' ? '120px' : '-120px';
	t.stages[i].animate({
		'margin-left' : theMargin
	}, {queue:false, easing:t.easeType}).fadeOut(t.dur);
	t.lis.eq(i).fadeOut(t.dur);
}
PiiqHeroCarousel.prototype._in = function(i, dir){
	var t = this, theMargin = dir === 'left' ? '-120px' : '120px';
	t.stages[i].css({
		'marginLeft' : theMargin
	}).animate({
		'margin-left':0
	}, {queue:false, easing:t.easeType}).fadeIn(t.dur);
	t.lis.eq(i).fadeIn(t.dur);
}

var VariableModule = function(el, master){
	var t = this;
	$.extend(t, {
		$el : $(el),
		master : master,
		dur : 450,
		conts : $(el).find(".content")
	});
	
	t.master.$el.bind('carouselchanged', function(e){
		t.change(t.master.category);
	});
}
VariableModule.prototype.change = function(term){
	var t = this
	var tw = t.$el.width();
	var th = t.$el.height();
	var dw = Math.ceil(tw * Math.sqrt(2));
	var dh = Math.ceil(th * Math.sqrt(2));
	var washHold = $('<div/>').attr('class', 'washHold');
	washHold.width(tw).height(th).appendTo(t.$el);
	var r = Raphael(washHold.get(0), tw, tw);
	var s = r.image('assets/img/transition_diag_pattern_trans.png', 0, 0, tw, th).attr({
		'stroke' : 0,
		'rotation' : '45',
		'translation' : tw+' '+(th*-1),
		'scale' : 1.4
	}).animate({
		'translation' : (tw*-2)+' '+(th*2)
	}, t.dur, function(){
		washHold.remove();
	});
	t.conts.each(function(){
		var _t = $(this);
		setTimeout((_t.data('category') === term) ? function(){_t.show()} : function(){_t.hide()}, t.dur/2);
	});
}

var PiiqModule = function(el, argNotch, argNotchStroke, argIcon){
	var t = this, fCo, fOpac = 1, sCo, sOpac = 1, r;
	
	$.extend(t, {
		$el : $(el),
		ew : $(el).width(),
		eh : $(el).height(),
		dur : 100
	});
	
	t.$el.data("piiqModuleRef", t);
	
	typeof argNotch !== "undefined" && t.$el.data('notch', argNotch);
	typeof argNotchStroke !== "undefined" && t.$el.data('notchStroke', argNotchStroke);
	typeof argIcon !== "undefined" && t.$el.data('icon', argIcon);
	
	t.hasNotch = !(t.$el.data('notch') == null);
	t.hasNotchStroke = !(t.$el.data('notchStroke') === false);
	t.hasIcon = t.$el.data('icon');
	t.isLink = t.$el.is('a');
	
	// set-up notch
	if(t.hasNotch){ 
		t.rHold = $('<div>', {'class': 'rHold'}).appendTo(t.$el);
		
		t.rh = t.rHold.height();
		t.rw = t.rHold.width();
		
		if(t.rw >= t.ew) {
			t.isMini = true;
			t.rHold.addClass("mini");
		}
		
		t.triColor = t.$el.data('notch');
		if(t.triColor === 0) {
			fCo = "#f9f9f9";
			fOpac = 0;
		} else {
			fCo = t.triColor;
		}
		
		t.tStrokeColor = !(t.$el.data("notchstroke") == null) ? t.$el.data("notchstroke") : 0;
		if(t.tStrokeColor === 0) {
			sCo = "#f9f9f9";
			sOpac = 0;
		} else {
			sCo = t.tStrokeColor;
		}
		
		var ts = t.isMini ? '13' : '60';
		
		r = Raphael(this.rHold.get(0));
		t.triangle = r.path('').attr({
			"fill" : fCo,
			"fill-opacity" : fOpac,
			'stroke' : 0
		});
		
		t.tStroke = r.path('').attr({
			'stroke' : sCo,
			'stroke-opacity' : sOpac
		});
	}
	
	//set up link
	if(t.isLink){
		
		t.overColor = t.$el.data('linkStroke') == null ? '#00bcd4' : t.$el.data('linkStroke');
		t.sHold = $('<div>', {'class': 'sHold'});
		if(!t.$el.children('.sHold').length){
			t.$el.append(t.sHold);
		}	
		r = Raphael(t.sHold.get(0), t.ew, t.eh);
		
		if(!TOUCH_DEVICE) {
			t.$el.bind({
				mouseenter : function(){t.onOver()},
				mouseleave : function(){t.onOut()}
			});
		}

		var sWidth;
		if(t.ew < 100){
			t.sWidth = 0;
		}else if(t.ew < 200){
			t.sWidth = 0;
		}else{
			t.sWidth = 0;
		}
		
		t.stroke = r.path('M0 0L'+t.ew+' 0L'+t.ew+' '+t.eh+'L0 '+t.eh+'L0 0').attr({
			'stroke':t.overColor,
			'stroke-width':0,
			'stroke-opacity':0
		});
	}
	
	// set up icon
	if(t.hasIcon){
		t.iHold = $('<div>', {'class': 'iHold'}).appendTo(t.$el);
		$("<span/>", {"class" : !!t.$el.data('icon') ? t.$el.data('icon') : "" }).appendTo(t.iHold);
	}
	
	if(t.$el.hasClass('selected')){
		t.showStroke();
	}
	
	return this;
}
PiiqModule.prototype.onOver = function(){
	!this.$el.hasClass('selected') && this.showStroke();
}
PiiqModule.prototype.onOut = function(){
	!this.$el.hasClass('selected') && this.hideStroke();
}
PiiqModule.prototype.showStroke = function(){
	var t = this;
	t.stroke.stop();
	t.stroke.attr('stroke-opacity', 1);
	t.stroke.animate({
		'stroke':t.overColor,
		'stroke-width':t.sWidth
	}, t.dur);
	
	t.hasNotch && t.changeNotchColor(t.overColor);
}
PiiqModule.prototype.hideStroke = function(){
	var t = this;
	t.stroke.stop();
	t.stroke.animate(
		{
			'stroke':t.overColor,
			'stroke-width':0
		},
		t.dur,
		function() {
			t.stroke.attr({'stroke-opacity':0});
		}
	);
	
	t.hasNotch && t.changeNotchColor(t.triColor, t.tStrokeColor);
}
PiiqModule.prototype.changeNotchColor = function(fillColor, strokeColor){
	var t = this, fillOpacity = 1, strokeOpacity = 1, curFillColor, curFillOpacity, curStrokeColor, curStrokeOpacity;
	
	switch(arguments.length) {
		case 1:
			strokeColor = fillColor;
			break;
		case 0:
			fillColor = t.triColor;
			strokeColor = t.tStrokeColor;
			break;
	}
	
	curFillColor = t.triangle.attr("fill");
	curFillOpacity = t.triangle.attr("fill-opacity");
	curStrokeColor = t.tStroke.attr("stroke");
	curStrokeOpacity = t.tStroke.attr("stroke-opacity");
	
	if(fillColor === 0) {
		fillOpacity = 0;
		fillColor = curFillColor;
	} else if(curFillOpacity === 0) {
		t.triangle.attr("fill", fillColor);
	}
	if(strokeColor === 0) {
		strokeOpacity = 0;
		strokeColor = curStrokeColor;
	} else if(curStrokeOpacity === 0) {
		t.tStroke.attr("stroke", strokeColor);
	}
	
	t.triangle.stop();
	t.tStroke.stop();
	
	t.triangle.animate({
		"fill" : fillColor,
		"fill-opacity" : fillOpacity
	}, t.dur);
	
	t.tStroke.animateWith(t.triangle, {
		"stroke" : strokeColor,
		"stroke-opacity" : strokeOpacity
	}, t.dur);
	
}

var ColorwayButton = function(el){
	var t = this, $el = $(el), r;
	
	$.extend(
		t,
		{
			$el : $el,
			ew : $el.width(),
			eh : $el.height(),
			color1 : '#'+$el.data('colorway').split(',')[0],
			color2 : '#'+$el.data('colorway').split(',')[1],
			downOffset : 12,
			dur : 200,
			ease : "<",
			selected : false
		},
		{
			//some shape path strings
			bhString : "M0 10L17 0L35 10L35 30L17 40L0 30L0 10",
			flString : "M2 11L17 2L17 38L2 29L2 11",
			tlString : "M2 11L17 2L17 19L2 11",
			frString : "M17 19L35 11L35 30L17 40",

			// the over-state paths
			bhStringOver : "M0 12L17 2L35 12L35 30L17 40L0 30L0 10",
			flStringOver : "M2 13L17 4L17 38L2 29L2 13",
			tlStringOver : "M2 14L17 4L17 21L2 13",
			frStringOver : "M17 21L35 13L35 30L17 40",
	
			// the down-state paths
			bhStringDown : "M0 22L17 12L35 22L35 30L17 40L0 30L0 10",
			flStringDown : "M2 24L17 14L17 38L2 29L2 24",
			tlStringDown : "M2 24L17 14L17 31L2 23",
			frStringDown : "M17 32L35 23L35 30L17 40"
		}
	);

	r = Raphael(el, t.ew, t.eh);


	
	// create the actual path objects
	t.baseHex = r.path(t.bhString).attr({
		"fill" : t.color2,
		"stroke" : 0
	});
	t.frontLeft = r.path(t.flString).attr({
		"fill" : t.color1,
		"stroke" : 0
	});
	t.topLeft = r.path(t.tlString).attr({
		"fill" : "#000",
		"stroke" : 0,
		"opacity" : .1
	});
	t.frontRight = r.path(t.frString).attr({
		"fill" : "#000",
		"stroke" : 0,
		"opacity" : .15
	});
	
	if(!TOUCH_DEVICE) {		
		t.$el.hover(
			function(){ t.selected === false && t.goOver(); },
			function(){ t.selected === false && t.comeUp();	}
		);
	}
}


var PiiqHeader = function() {
	var th = this;
	
	$.extend(th, {
		$els : {
			header : $("#hd"),
			headerBar : $("#hd_bar"),
			overlay : $("<div/>", {"id":"blackOverlay"}).fadeTo(0, 0).hide().appendTo("body"),
			shaderStrip : $("<div/>", {"class":"shaderStrip checkedOverlay"}).appendTo("#hd"),
			shadow : $("<div/>", {"class":"shadow"}).appendTo("#hd_nav")
		}
	});
	
	$("#hd").find(".dd").each(function() { $("<div/>", {"class":"shadow"}).appendTo(this) });
}