var DEFAULT_GALLERY_HEIGHT = 511;
var CTRL_HEIGHT = 10;
var GALLERY_CTRL_WIDTH = 35;
var VID_CTRL_WIDTH = 35;
var HEADER_HEIGHT = 42;
var HEADER_TRANSLATE = -26;
var TRIANGLE_SIZE = 6;
var DIVIDER_HEIGHT = 232;
var NUB_SIZE = 60;
var BRKT_SIZE = 5;
var NUB_Y_OFFSET = 21;
var PAUSE_WIDTH = 3;
var CONTROL_SPACING = TRIANGLE_SIZE * 3;	
var HEADER_WIDTH = 240;
var HEADER_HEIGHT = 42;
var CIRCLE_RADIUS = 4;
var TRANS_SPEED = 1000;
var COLOR_SPEED = 300;
var TEXT_SPEED = 500;
var LONG_ADVANCE_TIME = 30000;
var SHORT_ADVANCE_TIME = 18000;
var HASHPOLLINTERVAL = 1000;

var GLOBAL_FIRST = true;

function log(string) {
	if( typeof console == 'object' ) {
		console.log(string);
	}
}

// Class GalleryCtrl

function GalleryCtrl(element, aColor, aHover, speed, width, height) {
	this.gallery = $('#gallery');
	this.currentItem = $('div', this.gallery[0])[0];
	this.autoTimeout;
	this.hist = [];
	this.upHover = false;
	this.downHover = false;
	this.opacity = 1;
	this.aColor = aColor;
	this.aHover = aHover;
	this.speed = speed;
    var controlsPaper = Raphael(element, width, height);
    this.controlSet = controlsPaper.set();
    this.up = controlsPaper.g.triangle(TRIANGLE_SIZE, TRIANGLE_SIZE, TRIANGLE_SIZE);
    this.down = controlsPaper.g.triangle(CONTROL_SPACING+TRIANGLE_SIZE, TRIANGLE_SIZE, TRIANGLE_SIZE);
    this.down.rotate(180);
    this.controlSet.push(this.up, this.down);
    this.controlSet.attr({fill: $(document.body).css('color'), 'stroke-opacity': 0});
    var obj = this;
    this.up.hover(
    	function() {
    		obj.upHover = true;
    		obj.change();
    	},
    	function() {
    		obj.upHover = false; 
    		obj.change();
    	}
    )
    this.down.hover(
    	function() {
    		obj.downHover = true;
    		obj.change();
    	},
    	function() {
    		obj.downHover = false; 
    		obj.change();
    	}
    )
	return this;
}
		
GalleryCtrl.prototype = {
	change: function() {
		var upColor;
		if (this.upHover) {
			upColor = this.aHover;
		}
		else {
			upColor = this.aColor;
		}
		this.up.stop();
		this.up.animate({opacity: this.opacity, fill: upColor}, this.speed);
		var downColor;
		if (this.downHover) {
			downColor = this.aHover;
		}
		else {
			downColor = this.aColor;
		}
		this.down.stop();
		this.down.animate({opacity: this.opacity, fill: downColor}, this.speed);
	},
	
	show: function() {
		this.opacity = 1;
		this.change();
	},

	hide: function() {
		this.opacity = 0;
		this.change();
	},
	
	changeColor: function(aColor, aHover) {
		this.aColor = aColor;
		this.aHover = aHover;
		this.change();
	},
	
	setCurrent: function(newCurrent) {
		this.currentItem = newCurrent;
	},
	
	current: function() {
		return this.currentItem;
	},

	currentVid: function() {
		return $("video", this.current())[0];
	},
		
	longWaitToAdvance: function() {
		clearTimeout(this.autoTimeout);
		var obj = this; // closure
		this.autoTimeout = setTimeout(function() {obj.advance("longWait");}, LONG_ADVANCE_TIME);
	},

	shortWaitToAdvance: function() {
		clearTimeout(this.autoTimeout);
		var obj = this; // closure
		this.autoTimeout = setTimeout(function() {obj.advance("shortWait");}, SHORT_ADVANCE_TIME);
	},

	noAdvance: function() {
		this.autoTimeout = clearTimeout(this.autoTimeout);
	},

	advance: function(from) {
		this.note();
		transition(this.current().getAttribute('next'));
		this.longWaitToAdvance();
	},

	autoAdvance: function(from) {
    	this.note();
		transition(this.current().getAttribute('next'));
		this.shortWaitToAdvance();
	},	
	
	goTo: function(item, fromThumbnail) {
		var currentVid = this.currentVid();
		if (!(currentVid && !currentVid.paused) || fromThumbnail) {
			this.note();
			transition(item);
			this.longWaitToAdvance();
		}
	},
	
	fuckCycle: function() {
		this.current().style.width = this.current().style.height = '';
	},

	changeHeight: function(theHeight, speed) {
	    log("changeHeight: "+theHeight+ ", "+this.gallery.height());
		this.gallery.stop();
		this.gallery.animate({height: (theHeight - 2) + 'px'}, speed);
	},
	
	checkHeight: function() {
    	var height = $(this.current()).height();
    	log("refreshHeight onload: " + height);
  	    this.changeHeight(height, 100);
  	},
		
	refreshHeight: function() {
		var current = $("img", this.current())[0];
    	log("refreshHeight current" + current);
    	if (current) {
    		var obj = this;
    		var chain = current.onload
			current.onload = function() {chain(); obj.checkHeight();}
			this.checkHeight();
  	    }
	},

	note: function() {
		this.hist.push(this.current().getAttribute('itemname'));
	},

	retreat: function() {
		var previous = this.hist.pop();
	  	if(typeof(previous) != 'undefined') { transition(previous, 'scrollDown'); }
	  	this.longWaitToAdvance();
	}
}

// Class VidCtrls
function VidCtrls(element, aColor, aHover, speed, width, height) { 
	// Animation Parameters
	this.playOpacity = 0;
	this.pauseOpacity = 0;
	this.aColor = aColor;
	this.aHover = aHover;
	this.isHover = false;
	this.speed = speed;
	// Objects
    var paper = Raphael(element, width, height);
	this.items = paper.set();
	this.button = paper.rect(0, 0, PAUSE_WIDTH*3, PAUSE_WIDTH*3);
	this.button.attr({'opacity':0});
	this.pause = paper.set();
    this.pause.push(paper.rect(0, 0, PAUSE_WIDTH, PAUSE_WIDTH*3));
    this.pause.push(paper.rect(PAUSE_WIDTH*2, 0, PAUSE_WIDTH, PAUSE_WIDTH*3));
    this.play = paper.g.triangle(4, TRIANGLE_SIZE, TRIANGLE_SIZE);
    this.play.rotate(90);
    this.items.push(this.play, this.pause, this.button);
    this.items.attr({fill: $(document.body).css('color'), 'stroke-opacity': 0, opacity: 0});
    var obj = this;
    this.items.hover(
    	function() {
    		obj.isHover = true;
    		obj.change();
    	},
    	function() {
    		obj.isHover = false; 
    		obj.change();
    	}
    )
    this.change();
    return this;
}

VidCtrls.prototype = {
	change: function() {
		var currentColor;
		if (this.isHover) {
			currentColor = this.aHover;
		}
		else {
			currentColor = this.aColor;
		}
		this.play.stop();			
		this.play.animate({fill: currentColor, opacity: this.playOpacity}, this.speed);
		this.pause.stop();
		this.pause.animate({fill: currentColor, opacity: this.pauseOpacity}, this.speed);
	},
	
	show: function() {
		this.showPause();
	},

	hide: function() {
		this.playOpacity = 0;
		this.pauseOpacity = 0;
		this.change();
	},

	changeColor: function(aColor, aHover) {
		this.aColor = aColor;
		this.aHover = aHover;
		this.change();
	},
	
	showPlay: function() {
		this.playOpacity = 1;
		this.pauseOpacity = 0;
		this.change();
	},
	
	showPause: function() {
		this.playOpacity = 0;
		this.pauseOpacity = 1;
		this.change();
	}
}

// Class Divider
function Divider(element, aColor, nubSize, brktSize, height, drawNub, reverseDirection, offsetQuery) {
	this.reverseDirection = reverseDirection;
	this.nubHeight = NUB_Y_OFFSET;
	this.nubSize = nubSize;
	this.brktSize = brktSize;
	this.height = height;
	this.offsetQuery = offsetQuery;
	if (drawNub) {
		var paper = Raphael(element, nubSize + brktSize + 1, height);
	}
	else {
		var paper = Raphael(element, brktSize + 1, height);
	}
	this.divSet = paper.set();
	this.bracket = paper.path(this.getPath(nubSize, brktSize, height, this.reverseDirection));
	this.divSet.push(this.bracket);
	if (drawNub) {
     	this.nub = paper.path(this.getNubPath(this.nubHeight, this.reverseDirection)); // Lil Nub
    	this.divSet.push(this.nub);
    }
   	this.divSet.attr({stroke:aColor, 'fill-opacity':0});
    return this;
}

Divider.prototype = {
	changeColor: function(aColor, speed) {
    	this.divSet.stop();
    	this.divSet.animate({stroke: aColor}, speed);
	},
	
	moveNubToItem: function(item, speed) {
		if (this.nub) {
			var y = item.position() - offsetPosition() + (item.height()/2);
			if (y<0) {
				y = 0;
			}
			if (y>this.height) {
				y = this.height;
			}
			this.nubHeight = y;
			var newPath = getNubPath();
			this.nub.stop();
			this.nub.animate({path:newPath});
		}
	},

	getPath: function(nubWidth, brktWidth, height, reverseDirection) {
		var path = "";
		var startX, midX;
		if (reverseDirection) {
			startX = 0;
			midX = brktWidth;
		}
		else {
			startX = nubWidth+ brktWidth + 1;
			midX = nubWidth;
		}
		path += "M"+startX+" "+0
		path += " L "+midX+" "+0;
	    path += " L "+midX+" "+height; // Vertical Line
	    path += " L "+startX+" "+height;
	    log("Bracket Path: "+path);
    	return path;
    },
    
    getNubPath: function() {
		var nubX;
    	if (this.reverseDirection) {
    	    nubX = this.brktSize;
    	}
    	else {
    		nubX = 0;
    	}
    	var path = "M" + nubX +" "+ this.nubHeight;
    	path +=	" L" + (nubX + this.nubSize) + " " +this.nubHeight;
    	log("Nub Path: "+path);
    	return path;
    }
}

// Class Header
function Header(element, width, height) {
	var headerPaper = Raphael(element, width, height);

	this.header = headerPaper.set();
	// This SVG element needs to be able to be resized
    headerPaper.importSVG('<?xml version="1.0" encoding="utf-8"?><!-- Generator: Adobe Illustrator 13.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 14948)  --><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"	 width="217px" height="22px" viewBox="0 0 217 22" enable-background="new 0 0 217 22" xml:space="preserve"><path d="M0,23.443V0.223h1.413v23.22H0L0,23.443z"/><path id="h1" d="M31.592,21.962l0.057,1.443h-1.412c-0.754-0.026-1.45-0.765-2.092-1.216c-0.451-0.328-0.771-1.146-0.96-2.448	c-1.169,1.153-2.996,2.56-5.482,3.21c-2.336,0.604-4.954,0.904-7.855,0.904c-3.354,0-6.048-0.45-8.082-1.355	c-2.146-0.93-3.222-2.725-3.222-4.382c0-2.537,1.992-4.169,5.978-4.896c1.653-0.303,3.759-0.505,6.314-0.604l6.431-0.229	c0.524-0.021,1.392-0.084,2.593-0.188c2.292-0.352,3.439-1.093,3.439-2.224c0-3.014-3.271-4.521-9.811-4.521	c-3.309,0-5.808,0.326-7.497,0.979c-1.844,0.708-3.065,1.925-3.667,3.66H4.577C5.217,8.109,6.611,6.679,8.759,5.8	c2.035-0.855,4.954-1.282,8.761-1.282c7.461,0,11.189,1.733,11.189,5.2v9.421c0,1.883,0.754,2.823,2.262,2.823H31.592z	 M27.297,12.131c-0.979,0.779-3.533,1.229-7.668,1.355c-1.579,0.051-3.402,0.111-5.468,0.188c-6.616,0.252-9.905,1.746-9.867,4.482	c0,1.029,0.582,1.908,1.748,2.64c1.651,1.056,4.209,1.582,7.667,1.582c4.321,0,7.705-0.668,10.147-1.998	c2.293-1.229,3.439-2.812,3.439-4.746L27.297,12.131L27.297,12.131z"/><path d="M58.1,23.443h-1.413V11.149c0-1.81-1.036-3.239-3.107-4.295c-1.96-0.955-4.503-1.433-7.63-1.433	c-3.807,0-6.878,0.766-9.214,2.298c-2.109,1.408-3.165,3.09-3.165,5.049v10.676H32.16V4.933h1.411v4.333	c0.642-1.508,2.432-2.727,5.369-3.656c2.374-0.727,4.691-1.092,6.952-1.092c3.429,0,6.273,0.541,8.534,1.62	C56.875,7.344,58.1,8.99,58.1,11.075V23.443z"/><path d="M92.293,23.443h-19.16V0.223h19.951c3.806,0,6.876,0.465,9.213,1.395c2.562,1.03,3.844,2.474,3.844,4.333	c0,0.955-0.604,1.922-1.81,2.9c-1.545,1.282-3.655,2.061-6.33,2.337c3.277,0.227,5.783,0.955,7.517,2.186	c1.396,0.979,2.092,2.099,2.092,3.354c0,2.01-1.45,4.064-4.352,5.17C100.545,22.928,96.89,23.443,92.293,23.443z M93.084,1.014	H74.546V10.7h18.538c3.276,0,6.037-0.423,8.279-1.264c2.241-0.843,3.363-2.004,3.363-3.485c0-1.607-1.111-2.852-3.335-3.731	C99.32,1.417,96.55,1.014,93.084,1.014z M93.084,11.525H74.546v10.59h18.369c3.918,0,7.063-0.454,9.438-1.356	c2.523-0.954,3.787-2.284,3.787-3.995c0-1.781-1.338-3.127-4.014-4.031C99.79,11.928,96.776,11.525,93.084,11.525z"/><path d="M108.965,23.443V0h1.641v23.441h-1.641V23.443z"/><path d="M126.881,23.855c-4.634,0-8.365-0.929-11.189-2.789c-2.637-1.758-3.957-4.467-3.957-7.129c0-2.639,1.32-4.835,3.957-6.595	c2.824-1.884,6.574-2.826,11.246-2.826c4.637,0,8.364,0.942,11.191,2.826c2.637,1.759,3.955,3.956,3.955,6.595	c0,2.662-1.318,5.371-3.955,7.129C135.302,22.928,131.553,23.855,126.881,23.855z M126.938,5.498c-4.354,0-7.807,0.891-10.354,2.675	c-2.29,1.605-3.435,3.528-3.435,5.765c0,2.285,1.145,4.221,3.435,5.806c2.55,1.782,6.003,2.672,10.354,2.672	c4.315,0,7.75-0.89,10.301-2.672c2.289-1.585,3.436-3.521,3.436-5.806c0-2.234-1.146-4.156-3.436-5.765	C134.648,6.389,131.215,5.498,126.938,5.498z"/><path d="M157.963,23.855c-4.635,0-8.363-0.929-11.189-2.789c-2.639-1.758-3.957-4.467-3.957-7.129c0-2.639,1.318-4.835,3.957-6.595	c2.826-1.884,6.574-2.826,11.246-2.826c4.635,0,8.366,0.942,11.19,2.826c2.638,1.759,3.956,3.956,3.956,6.595	c0,2.662-1.318,5.371-3.956,7.129C166.386,22.928,162.636,23.855,157.963,23.855z M158.02,5.498c-4.354,0-7.806,0.891-10.355,2.675	c-2.288,1.605-3.436,3.528-3.436,5.765c0,2.285,1.146,4.221,3.436,5.806c2.552,1.782,6.004,2.672,10.355,2.672	c4.314,0,7.748-0.89,10.301-2.672c2.291-1.585,3.435-3.521,3.435-5.806c0-2.234-1.144-4.156-3.435-5.765	C165.73,6.389,162.299,5.498,158.02,5.498z"/><path d="M216.57,23.443h-1.301v-12.03c0-1.658-0.809-3.034-2.429-4.127c-1.62-1.094-3.844-1.64-6.67-1.64	c-2.901,0-5.353,0.561-7.346,1.678c-2,1.117-2.997,2.442-2.997,3.976v12.144h-1.355V11.2c0-1.5-0.643-2.751-1.923-3.751	c-1.544-1.2-3.86-1.803-6.95-1.803c-3.242,0-5.822,0.625-7.742,1.876c-1.922,1.25-2.883,2.826-2.883,4.728v11.191h-1.301V4.933	h1.301v4.105c0.752-1.331,2.147-2.367,4.183-3.108c1.846-0.665,3.918-0.997,6.217-0.997c2.449,0,4.579,0.357,6.387,1.073	c1.96,0.791,3.108,1.851,3.448,3.185c2.033-2.839,5.671-4.258,10.907-4.258c3.09,0,5.604,0.577,7.547,1.732	c1.938,1.155,2.907,2.737,2.907,4.748V23.443z"/></svg>'
    ,this.header);
    this.header.attr({fill: $(document.body).css('background-color')});
	//this.header.translate(0, -1);

    this.subhead = headerPaper.set();
    headerPaper.importSVG('<?xml version="1.0" encoding="utf-8"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="217.558px" height="6.99px" viewBox="0 0 217.558 6.99" enable-background="new 0 0 217.558 6.99" xml:space="preserve"><path d="M6.807,1.725l-0.51,0.391C6.016,1.75,5.678,1.472,5.284,1.284C4.89,1.094,4.458,1,3.986,1C3.47,1,2.993,1.124,2.553,1.372 s-0.78,0.58-1.022,0.997C1.29,2.787,1.169,3.256,1.169,3.777c0,0.788,0.271,1.446,0.811,1.973c0.541,0.527,1.223,0.791,2.046,0.791 c0.905,0,1.663-0.354,2.272-1.063l0.51,0.387c-0.322,0.41-0.725,0.728-1.207,0.951c-0.482,0.225-1.02,0.336-1.615,0.336 c-1.131,0-2.023-0.376-2.676-1.129C0.762,5.387,0.488,4.62,0.488,3.72c0-0.946,0.332-1.742,0.996-2.389 c0.663-0.646,1.495-0.969,2.494-0.969c0.604,0,1.148,0.12,1.635,0.358S6.497,1.294,6.807,1.725z"/><path d="M17.191,0.525h0.646V6.99h-0.646V0.525z"/><path d="M28.502,6.99V0.525h0.141l4.302,4.955V0.525h0.637V6.99h-0.145L29.17,2.095V6.99H28.502z"/><path d="M44.34,0.525h3.705v0.633h-3.059v2.026h3.032v0.633h-3.032v2.54h3.032V6.99H44.34V0.525z"/><path d="M58.047,6.99l0.925-6.464h0.105l2.628,5.304l2.603-5.304h0.104l0.93,6.464h-0.633l-0.639-4.623L61.784,6.99h-0.166 l-2.313-4.658L58.671,6.99H58.047z"/><path d="M78.433,0.525l3.015,6.464H80.75l-1.017-2.127h-2.785L75.941,6.99H75.22l3.054-6.464H78.433z M78.351,1.899l-1.108,2.34 h2.21L78.351,1.899z"/><path d="M90.987,1.158V0.525h3.543v0.633h-1.441V6.99h-0.66V1.158H90.987z"/><path d="M107.72,0.363c0.979,0,1.798,0.327,2.458,0.98c0.659,0.653,0.989,1.458,0.989,2.413c0,0.946-0.329,1.749-0.987,2.408 s-1.461,0.988-2.407,0.988c-0.959,0-1.768-0.328-2.428-0.984c-0.659-0.656-0.989-1.45-0.989-2.382c0-0.621,0.15-1.197,0.451-1.727 c0.3-0.53,0.71-0.945,1.229-1.246C106.554,0.513,107.115,0.363,107.72,0.363z M107.748,0.991c-0.479,0-0.932,0.125-1.36,0.374 c-0.428,0.249-0.763,0.585-1.003,1.007c-0.241,0.422-0.361,0.893-0.361,1.412c0,0.769,0.267,1.417,0.799,1.946 s1.175,0.794,1.926,0.794c0.502,0,0.966-0.122,1.394-0.365c0.427-0.243,0.76-0.576,0.999-0.998s0.358-0.892,0.358-1.407 c0-0.513-0.119-0.978-0.358-1.392c-0.239-0.415-0.576-0.747-1.011-0.996C108.696,1.116,108.235,0.991,107.748,0.991z"/><path d="M127.88,1.611l-0.501,0.475c-0.36-0.354-0.755-0.623-1.185-0.807c-0.429-0.183-0.848-0.274-1.255-0.274 c-0.507,0-0.989,0.125-1.447,0.374c-0.459,0.249-0.814,0.586-1.066,1.013c-0.252,0.426-0.377,0.876-0.377,1.351 c0,0.486,0.13,0.949,0.391,1.386c0.261,0.438,0.621,0.782,1.081,1.033c0.46,0.25,0.964,0.375,1.512,0.375 c0.665,0,1.228-0.188,1.688-0.562s0.732-0.861,0.817-1.459h-2.061V3.892h2.785c-0.006,0.999-0.302,1.792-0.89,2.379 c-0.587,0.588-1.373,0.881-2.357,0.881c-1.195,0-2.142-0.406-2.839-1.221c-0.536-0.627-0.805-1.352-0.805-2.175 c0-0.612,0.154-1.182,0.462-1.709s0.729-0.939,1.266-1.237s1.143-0.446,1.819-0.446c0.548,0,1.063,0.099,1.547,0.297 C126.948,0.857,127.42,1.174,127.88,1.611z"/><path d="M138.708,0.525h1.287c0.718,0,1.204,0.029,1.459,0.088c0.384,0.088,0.695,0.276,0.936,0.565s0.361,0.645,0.361,1.067 c0,0.352-0.083,0.662-0.249,0.929c-0.165,0.267-0.401,0.469-0.71,0.605c-0.307,0.136-0.732,0.206-1.273,0.209l2.324,3.001h-0.799 l-2.325-3.001h-0.365V6.99h-0.646V0.525z M139.354,1.158v2.197l1.113,0.009c0.432,0,0.751-0.041,0.958-0.123 c0.206-0.082,0.368-0.213,0.483-0.393c0.116-0.18,0.175-0.382,0.175-0.604c0-0.217-0.06-0.414-0.177-0.591s-0.271-0.304-0.462-0.38 s-0.508-0.114-0.951-0.114H139.354z"/><path d="M155.956,0.525l3.015,6.464h-0.698l-1.017-2.127h-2.784l-1.008,2.127h-0.721l3.055-6.464H155.956z M155.874,1.899 l-1.107,2.34h2.21L155.874,1.899z"/><path d="M169.148,0.525h1.288c0.738,0,1.235,0.032,1.494,0.097c0.369,0.091,0.67,0.278,0.904,0.56 c0.234,0.283,0.352,0.638,0.352,1.066c0,0.431-0.113,0.786-0.342,1.066s-0.544,0.468-0.945,0.564 c-0.293,0.07-0.841,0.105-1.644,0.105h-0.462V6.99h-0.646V0.525z M169.794,1.158v2.193l1.095,0.013c0.442,0,0.766-0.04,0.972-0.121 c0.204-0.081,0.365-0.21,0.482-0.39c0.117-0.18,0.176-0.381,0.176-0.603c0-0.216-0.059-0.415-0.176-0.594 c-0.117-0.18-0.271-0.308-0.463-0.384c-0.192-0.076-0.507-0.114-0.943-0.114H169.794z"/><path d="M183.649,0.525h0.646v2.711h3.291V0.525h0.646V6.99h-0.646V3.87h-3.291v3.12h-0.646V0.525z"/><path d="M198.991,0.525h3.705v0.633h-3.059v2.026h3.031v0.633h-3.031v2.54h3.031V6.99h-3.678V0.525z"/><path d="M213.027,0.525h1.287c0.718,0,1.204,0.029,1.459,0.088c0.384,0.088,0.695,0.276,0.936,0.565s0.361,0.645,0.361,1.067 c0,0.352-0.083,0.662-0.249,0.929c-0.165,0.267-0.401,0.469-0.71,0.605c-0.307,0.136-0.732,0.206-1.273,0.209l2.324,3.001h-0.799 l-2.325-3.001h-0.365V6.99h-0.646V0.525z M213.673,1.158v2.197l1.113,0.009c0.432,0,0.751-0.041,0.958-0.123 c0.206-0.082,0.368-0.213,0.483-0.393c0.116-0.18,0.175-0.382,0.175-0.604c0-0.217-0.06-0.414-0.177-0.591s-0.271-0.304-0.462-0.38 s-0.508-0.114-0.951-0.114H213.673z"/></svg>'
    	,this.subhead);
    this.subhead.attr({fill: $(document.body).css('color')});
    this.subhead.translate(0, 26);
    return this;
}

Header.prototype = {
	show: function(speed) {
    	//this.header.stop(false, true);
    	this.header.animate({opacity: 1}, speed);
    	//this.subhead.stop(false, true);
    	this.subhead.animate({opacity: 1}, speed);
	},
     		
	hide: function(speed) {
	    //this.header.stop(false, true);
		this.header.animate({opacity: 0}, speed);
		//this.subhead.stop(false, true);
    	this.subhead.animate({opacity: 0}, speed);
	},

	changeColor: function(aColor, bg, speed) {
		//this.header.stop(false, true);
    	this.header.animate({fill: bg}, speed);
    	//this.subhead.stop(false, true);
    	this.subhead.animate({fill: aColor}, speed);
	}
}

// Class SeekBar
function SeekBar(element, aDocument, galleryCtrl, aColor, aHover, speed, height) {
	// Animation Parameters
	this.opacity = 0;
	this.aColor = aColor;
	this.aHover = aHover;
	this.isHover = false;
	this.speed = speed;
	this.proportion = 0;
	// Timers
	this.videoTimer = 0;
	this.progressTimer = 0;
	this.vidEnded = false;
	// Links
	this.document = aDocument
	this.galleryCtrl = galleryCtrl;
	// Parts
	var width = this.calcWidth();
	var tresPaper = Raphael(element, width, height);
    this.barSet = tresPaper.set();	
    this.bar = tresPaper.rect(0, CIRCLE_RADIUS, width, 0.5);
    this.topProgressBar = tresPaper.rect(0, CIRCLE_RADIUS-1, width, 0.5);
    this.bottomProgressBar = tresPaper.rect(0, CIRCLE_RADIUS+1, width, 0.5);
    this.barSet.push(this.bar, this.topProgressBar, this.bottomProgressBar);   
    this.barSet.attr({fill: $(document.body).css('color'), 'stroke-opacity': 0, opacity: 0});

    this.pos = tresPaper.circle(CIRCLE_RADIUS, CIRCLE_RADIUS, CIRCLE_RADIUS);
    this.pos.attr({fill: $(document.body).css('color'), 'stroke-opacity': 0, opacity: 0});

    var obj = this; //closure 
    this.pos.drag(function(deltaX) {obj.posMove(deltaX);}, function() {obj.posStart();}, function() {obj.posUp();});
	this.pos.hover(
		function() {obj.isHover = true; obj.change();},
		function() {obj.isHover = false; obj.change();}
	);
	this.change();
    return this;
}

SeekBar.prototype = {
	setWidth: function() {
		var width = this.calcWidth();
		this.document.getElementById('seeker').style.width = width + 'px';
		$('#seeker svg').width(width);
		this.refreshPos();
		this.refreshLoaded();
	},
	
	change: function() {
		this.barSet.animate({fill: this.aColor, opacity: this.opacity}, this.speed);
		if (this.isHover) {
			currentColor = this.aHover;
		}
		else {
			currentColor = this.aColor;
		}
		this.pos.animate({fill: currentColor, opacity:this.opacity}, this.speed);
	},
	
	changeColor: function(aColor, aHover) {
		this.aColor = aColor;
		this.aHover = aHover;
		this.change();
	},
	
	show: function(speed) {
		this.opacity = 1;
		this.change();
	},

	hide: function(speed) {
		this.opacity = 0;
		this.change();
	},

	calcWidth: function() {
		return $('#gallery').width() - 345;
	},
	
	refreshPos: function() { 
		var video = this.galleryCtrl.currentVid();
		if (video) {
			var width = this.calcWidth();
			var played = this.calcPlayed(); // The proportion played between 0 and 1
			this.pos.attr({cx: ((width-(CIRCLE_RADIUS*2)) * played + CIRCLE_RADIUS)});
			if (video.ended && !video.paused) {
				this.endVideo(video);
			}
		}
	},
	
	endVideo: function(video) {
		var obj = this; // closure
		if (!this.vidEnded) {
			this.vidEnded = true;
			setTimeout(
				function() {
					video.currentTime = 0;
					obj.galleryCtrl.advance("vidEnded");
					obj.vidEnded = false;
				},
			1000);
		}
	},

	calcPlayed: function() {
		var video = this.galleryCtrl.currentVid();
		var proportion;
      	if(video) {
      		if (video.duration){
          		proportion = video.currentTime / video.duration;
          	}
          	else {
          		proportion = 1;
          	}
      	}
      	else {
      		proportion = 0;
      	}
      	return proportion;
	},

	calcBufferEnd: function() {
		var video = this.galleryCtrl.currentVid();
		var proportion;
      	if(video) {
      		if (video.buffered){
          	    proportion = video.buffered.end(0) / video.duration;
          		log("Duration: " + video.duration + " End: " + video.buffered.end(0) + " ->"+ proportion*100+"%");
          	}
          	else {
          		proportion = 1;
          	}
      	}
      	else {
      		proportion = 0;
      	}
      	return proportion;
	},
	
	refreshLoaded: function() {
		var width = this.calcWidth();
		var end = this.calcBufferEnd(); // The proportion loaded between 0 and 1
		this.bar.stop();
    	this.bar.animate({width: width*end, opacity: this.opacity, fill: this.aColor},this.speed);
    	this.topProgressBar.stop();
    	this.topProgressBar.animate({width: width*(1-end), x: width*end, opacity: this.opacity, fill: this.aColor},this.speed);
    	this.bottomProgressBar.stop();
    	this.bottomProgressBar.animate({width: width*(1-end), x: width*end, opacity:this.opacity, fill:this.aColor},this.speed);
	},
	
	vidPos: function() { 
		var video = this.galleryCtrl.currentVid();
		var width = this.calcWidth();
		var currentX = this.pos.attr('cx');
		if (currentX < CIRCLE_RADIUS) currentX = CIRCLE_RADIUS;
		if (currentX > width-CIRCLE_RADIUS) currentX = width-CIRCLE_RADIUS;
		if (video) {
			video.currentTime = video.duration * ((currentX-CIRCLE_RADIUS) / (width-(CIRCLE_RADIUS*2)));
		}
	},
	
	posStart: function (cx) {
		this.originX = this.pos.attr('cx');
		//this.startInterval();
	},

	posMove: function (deltaX) {
		var currentX = this.originX + deltaX;
		var width = this.calcWidth();
		if (currentX < CIRCLE_RADIUS) currentX = CIRCLE_RADIUS;
		if (currentX > width-CIRCLE_RADIUS) currentX = width-CIRCLE_RADIUS;
		if (currentX != this.originX) {
			this.pos.attr({cx: currentX});
		}
		this.vidPos();
	},
	
	posUp: function () {
		this.stopInterval();
		this.startInterval();
	},
	
	startInterval: function() {
		var obj = this;
		this.videoTimer = setInterval(function(){obj.refreshPos();}, 100);
		this.progressTimer = setInterval(function(){obj.refreshLoaded();}, 1000);
	},
	
	stopInterval: function() {
	    if(typeof(this.videoTimer) != "undefined") this.videoTimer = clearInterval(this.videoTimer);
	    if(typeof(this.progressTimer) != "undefined") this.progressTimer = clearInterval(this.progressTimer);
	}
}

// Class Page
function Page() {
	this.body = $('body');
	this.a = $('a');
	return this;
}

Page.prototype = {
	changeColor: function(aColor, bg, aHover, speed) {
		//this.body.stop(false, true);
		this.body.animate({backgroundColor: bg, color: aColor}, speed);
		//this.a.stop(false, true);
    	this.a.animate({color: aColor}, speed);
    	changeACssHover(aColor, aHover);
    	//var X = window;
    	//var obj = $(document); //closure
		//$('a').hover(function () { $(document).css("color", aHover); },
		//			 function () { $(document).css("color", aColor); });
	}
}

function changeACssHover(aColor, aHover) {
	var obj = this;
	$('a').hover(function () { $(this).css("color", aHover); },
		 		 function () { $(this).css("color", aColor); });
}

function colorFade(name) {
	var index = item[name]['index'];
    var bg = "#" + item[name]['bgcolor'];
    var aColor = "#" + item[name]['link'];
    var aHover = "#" + item[name]['hover'];
        
	divider1.changeColor(aColor, COLOR_SPEED);
	divider2.changeColor(aColor, COLOR_SPEED);
	divider3.changeColor(aColor, COLOR_SPEED);
	page.changeColor(aColor, bg, aHover, TEXT_SPEED);
	galleryCtrl.changeColor(aColor, aHover, COLOR_SPEED);
	seekBar.changeColor(aColor, aHover, COLOR_SPEED);
	header.changeColor(aColor, bg, COLOR_SPEED);
    vidCtrl.changeColor(aColor, aHover);
}

function doResize() {
    galleryCtrl.refreshHeight();
    seekBar.setWidth();
}

var recentHash = "";

function transition(name, effect) {
    if(name=='') return;
    window.location.hash = name;
    recentHash = name;
    //log("transition " + name);
    if(typeof(effect)=="string") { $('#gallery').cycle(item[name]['index'], effect); }
    else { $('#gallery').cycle(item[name]['index']); }
    if (item[name].hasOwnProperty('workitem')) {
    	scrollSection("#work")
    	scrollSubsection(item[name].workitem);
    }
}

function scrollSection(pane) {
  	$('#mid-level-scrollpane-container').scrollTo(pane, {duration: TRANS_SPEED});
}

function scrollSubsection(pane) {
	$('#bottom-level-scrollpane-container').scrollTo(pane, {duration: TRANS_SPEED});
}

currentMidScroll = 0;
currentBottomScroll = 0;


$(document).ready(function () {
    aColor = $(document.body).css('background-color');
    aHover = $(document.body).css('link-highlight-color');
	page = new Page();
    header = new Header(document.getElementById("header-main"), HEADER_WIDTH, HEADER_HEIGHT);
	vidCtrl = new VidCtrls(document.getElementById("vidctrl"), aColor, aHover, TEXT_SPEED, PAUSE_WIDTH*4, CTRL_HEIGHT);
	galleryCtrl = new GalleryCtrl(document.getElementById("control"), aColor, aHover, TEXT_SPEED, TRIANGLE_SIZE*6, CTRL_HEIGHT);
    seekBar = new SeekBar(document.getElementById('seeker'), document, galleryCtrl, aColor, aHover, TEXT_SPEED, CTRL_HEIGHT);
	divider1 = new Divider(document.getElementById('divider1'), aColor, NUB_SIZE, BRKT_SIZE, DIVIDER_HEIGHT, true, false, $("#top-nav"))
	divider2 = new Divider(document.getElementById('divider2'), aColor, NUB_SIZE, BRKT_SIZE, DIVIDER_HEIGHT, true, false, $("#work-nav"));
	divider3 = new Divider(document.getElementById('divider3'), aColor, 0, BRKT_SIZE, DIVIDER_HEIGHT, false, true);
	galleryCtrl.longWaitToAdvance();
    galleryCtrl.refreshHeight();
    
    setTimeout(doResize, 100);
    
    $('#gallery').cycle({
	    speed: TRANS_SPEED,
		fx: 'scrollUp',
		containerResize: 0,
		slideResize: 0,
		before: function(current, next, o, f) {
	    	// next doesn't change to current in after()
			galleryCtrl.setCurrent(next);
    		seekBar.stopInterval();
			//this needs to be written to use the DOM height
			if (!GLOBAL_FIRST) {
				galleryCtrl.changeHeight($(this).height(), TRANS_SPEED);
			}
			GLOBAL_FIRST = false;
			var currentVideo = $("video", current)[0];
			if (currentVideo) {
				log("currentVideo "+currentVideo);
				currentVideo.pause();
			}
			var nextVideo = $("video", next)[0];
			if(nextVideo){
				log("nextVideo "+nextVideo);
			    if (nextVideo.ended) {
					nextVideo.currentTime = 0;
				}
				header.hide();
				vidCtrl.show();
				seekBar.show();
			}
			else {
				//pauseVid(false);
			    header.show();
				seekBar.hide();
				vidCtrl.hide();
			}
			colorFade(next.getAttribute('itemname'));
	    }, 
	    after: function(current, next, o, f) {
			galleryCtrl.fuckCycle();
			var nextVideo = galleryCtrl.currentVid();
			if (nextVideo) {
				seekBar.startInterval();
			    playVid(true);
			    galleryCtrl.noAdvance();
			}
	    }
  	}).cycle('pause');
 
function pollHash() {
	 hash = window.location.hash
	 if (hash[0] == "#") {
	 	hash = hash.replace("#","");
	 }
	 //log("pollHash hash->"+hash+"<->"+recentHash)
     if (hash==recentHash) {
       return; // Nothing's changed since last polled.
     }
     recentHash = hash;
  
     // URL has changed, update the UI accordingly.
     galleryCtrl.goTo(recentHash);
}

function playVid(show) {
    var currentVid = galleryCtrl.currentVid();
    if (currentVid) {
    	currentVid.play();
    }
 	if (show) {
	    vidCtrl.showPause(TEXT_SPEED);
    	header.hide(TEXT_SPEED);
	}
}
  
function pauseVid(show) {
	var currentVid = galleryCtrl.currentVid();
	if (currentVid) {
 		currentVid.pause(); 
 	}
 	if (show) {
 		vidCtrl.showPlay(TEXT_SPEED);
 		header.show(TEXT_SPEED);
 	}
}

  function togglePlayback() {
  	  currentVid = galleryCtrl.currentVid();
      if (currentVid && currentVid.paused) {
         playVid(true);
      }
      else {
         pauseVid(true);
      }
  }
  
  $('[item]').click(function() {
  	var fromThumbNail = this.hasAttribute("fromThumb");
	galleryCtrl.goTo(this.getAttribute('item'), fromThumbNail);  		
   });

  galleryCtrl.up.click(function() {galleryCtrl.retreat();});
  galleryCtrl.down.click(function() {galleryCtrl.advance();});
  vidCtrl.items.click(function() {togglePlayback();});
 
  $('[scrollpane]').click(function(){
  		scrollSection(this.getAttribute('scrollpane'))
  		//divider1.moveNubToItem(this, TRANS_SPEED);
  });    
  $('[workscrollpane]').click(function(){
  		pane = this.getAttribute('workscrollpane');
  		scrollSubsection(pane);
  		//log("This:"+$(this));
  		//divider1.moveNubToItem(item, TRANS_SPEED);
  });

  // this needs to be rewritten as setinterval
  // setInterval('doResize()', 1);
  $(window).resize(function() { doResize(); });
  window.onload = function() {
  		pollHash();
    	setInterval(pollHash, HASHPOLLINTERVAL);
  }
});