var TheWork = {
	loaded_image_pages: {},
	init: function(h, v, list) {
		this.cur = { h:h, v:v };
		this.dc = document.getElementById('slot');
		this.hs = document.getElementById('work_hscroller');

		this.seq = [];
		this.list = list;
		for (var i in this.list) this.seq.push(i);
		this.text = new Array(this.seq.length);
		this.text[this.cur.h-1] = this.dc.innerHTML;
		document.getElementById('work_seq').innerHTML = this.cur.h;
		document.getElementById('work_count').innerHTML = this.seq.length;

		document.getElementById('work_hcontent').style.width = (580 * this.seq.length) + 'px';

		// we have scripting so go ahead and display:block on all slide frames
		for(var i in this.list) document.getElementById('work:'+i).style.display = 'block';
		// scroll to the correct frame
		this.hs.scrollLeft = 580*(this.cur.h-1);
		document.getElementById('work:'+this.seq[this.cur.h-1]).scrollTop = 330*(this.cur.v-1);
		// display the numerical navigation
		this.num_nav();
		
		this.loadimages(this.seq[this.cur.h-2]);
		this.loadimages(this.seq[this.cur.h-1]);
		this.loadimages(this.seq[this.cur.h]);
	},
	hnext: function() {
		if (this.cur.h+1 > this.seq.length) return false;

		this.loadimages(this.seq[this.cur.h]);		
		this.loadimages(this.seq[this.cur.h+1]);

		scrollStart(this.hs, (this.cur.h-1)*580, this.cur.h*580, 'h');
		this.cur.h++;

		this.loadtext();
	
		document.getElementById('work:'+this.seq[this.cur.h-1]).scrollTop = 0;
		this.cur.v = 1;

		if (this.cur.h+1 > this.seq.length) document.getElementById('work_next').style.display = 'none';
		document.getElementById('work_prev').style.display = 'block';
		this.num_nav();

		//console.log('To '+this.seq[this.cur.h-1]);
	},
	hprev: function() {
		if (this.cur.h-1 < 1) return false;
	
		this.loadimages(this.seq[this.cur.h-2]);		
		this.loadimages(this.seq[this.cur.h-3]);

		this.cur.h--;
		scrollStart(this.hs, this.cur.h*580, (this.cur.h-1)*580, 'h');

		this.loadtext();

		document.getElementById('work:'+this.seq[this.cur.h-1]).scrollTop = 0;
		this.cur.v = 1;

		if (this.cur.h-1 < 1) document.getElementById('work_prev').style.display = 'none';
		document.getElementById('work_next').style.display = 'block';
		this.num_nav();

		//console.log('To '+this.seq[this.cur.h-1]);
	},
	v: function(num) {
		var vel = document.getElementById('work:'+this.seq[this.cur.h-1]);
		scrollStart(vel, (this.cur.v-1) * 330, (num-1) * 330, 'v');		
		this.cur.v = num;
		this.num_nav();
	},
	num_nav: function() {
		var out = '';
		var l = this.list[this.seq[this.cur.h-1]].length;
		if (l > 1) for(var i=1; i<=l; i++) {
			out += '<a href="#" onclick="TheWork.v('+i+');event.returnValue=false;return false" class="dot'+(i==this.cur.v?' current':'')+'">'+i+'</a>';
		}
		document.getElementById('work_num_nav').innerHTML = out;
	},
	loadtext: function() {
		var text = this.text[this.cur.h-1];
		if (text) {
			fadeStart(this.dc, 100, 0, (function() {
				if (this.text[this.cur.h-1]) this.dc.innerHTML = this.text[this.cur.h-1];
				document.getElementById('work_seq').innerHTML = this.cur.h;
				document.getElementById('work_count').innerHTML = this.seq.length;
				fadeStart(this.dc, 0, 100);
			}).bind(this));
			return;
		}

		new Ask(urlroot+'work/'+this.seq[this.cur.h-1]+'?body_only=1', {
			handler: this.handler.bind({work_seq_id: this.cur.h-1})
		});
	},
	loadimages: function(page) {
		if (!page || this.loaded_image_pages[page]) return;
		this.loaded_image_pages[page] = 1;
		//console.log('Loading images for '+page);
		var images = '', swfs = {}, flvs = {};
		for (var i=0; i<this.list[page].length; i++) {
			var ext = this.list[page][i].substring(this.list[page][i].length-4).toLowerCase();
			if (ext == '.swf') {
				images += '<div id="work:' + page + ':' + (i+1) + '"><You must have Adobe Flash installed and Javascript enabled to view this slide./div>';
				swfs['work:' + page + ':' + (i+1)] = this.list[page][i];
			} else if (ext == '.flv') {
				images += '<div id="work:' + page + ':' + (i+1) + '">You must have Adobe Flash installed and Javascript enabled to view this slide.</div>';
				flvs['work:' + page + ':' + (i+1)] = this.list[page][i];				
			} else images += '<img id="work:' + page + ':' + (i+1) + '" src="'+urlroot+'dyn/media/work/' + this.list[page][i] + '" />';
		}
		document.getElementById('work:'+page).innerHTML = images;

		for(var i in swfs) {
			var so0 = new SWFObject('/proto/dyn/media/work/' + swfs[i], 'flash_'+i, "580", "330", "8", "");
			so0.addParam('wmode', 'opaque');	// fix for FF3 Win
			so0.write(i);
		}
		for(var i in flvs) {
			var so0 = new SWFObject('/proto/gen_mediaplayer.swf', 'flash_'+i, "580", "330", "9", "");
			so0.addParam('wmode', 'opaque');	// fix for FF3 Win
			so0.addVariable('file', encodeURIComponent('/proto/dyn/media/work/' + flvs[i]));
			so0.write(i);
		}
	},
	handler: function(xhr) {
		TheWork.text[this.work_seq_id] = xhr.responseText;
		fadeStart(TheWork.dc, 100, 0, function() {
			if (TheWork.text[TheWork.cur.h-1]) TheWork.dc.innerHTML = TheWork.text[TheWork.cur.h-1];
			document.getElementById('work_seq').innerHTML = TheWork.cur.h;
			document.getElementById('work_count').innerHTML = TheWork.seq.length;
			fadeStart(TheWork.dc, 0, 100);
		});
	}
};

var Process = {
	init: function(cur_page_name, list) {
		this.scroller = document.getElementById('proc_scroller');
		document.getElementById('proc_content').style.width = (580*list.length) + 'px';
		this.list = list;
		this.text = {};
		for(var i=0; i<list.length; i++) {
			if (i) document.getElementById('top_link:' + i).onclick = function() {
				Process.jump(this.id);
				return false;
			};
			if (i) document.getElementById('img_link:' + i).onclick = function() {
				Process.jump(this.id);
				return false;
			};
			if (list[i] == cur_page_name) {
				this.cur = i;
				continue;
			}
			document.getElementById('proc:'+list[i]).style.display = 'block';
			new Ask(urlroot+'process/'+list[i]+'?body_only=1', {
				handler: this.handler.bind({page_name: list[i]})
			});
		}
		this.scroller.scrollLeft = 580*this.cur;
		if (this.cur > 0) document.getElementById('top_link:' + this.cur).className = 'current';
	},
	handler: function(xhr) {
		var el = document.getElementById('proc:'+this.page_name);
		el.innerHTML = xhr.responseText;
		attachLightbox(el);
		try { document.getElementById('process_lightbox_link').style.display = (Process.cur > 0)? 'block' : 'none' } catch(e){}
	},
	prev: function() { this.slide(this.cur-1); },
	next: function() { this.slide(this.cur+1); },
	jump: function(id) { this.slide(id.substring(9)); },
	slide: function(dest) {
		if (dest < 0 || dest >= this.list.length) return;

		if (this.cur > 0) document.getElementById('top_link:' + this.cur).className = '';
		scrollStart(this.scroller, this.cur*580, dest*580, 'h');
		this.cur = Number(dest);
		if (this.cur > 0) document.getElementById('top_link:' + this.cur).className = 'current';
		
		try { document.getElementById('process_lightbox_link').style.display = (this.cur > 0)? 'block' : 'none' } catch(e){}

		document.getElementById('proc_next').style.display = (this.cur >= this.list.length-1)? 'none' : 'block';
		document.getElementById('proc_prev').style.display = (this.cur <= 0)? 'none' : 'block';
	}
};

var anim_state = {time:0, begin:0, change:0.0, duration:0.0, element:null, timer:null};
function scrollStart(elem, start, end, direction) {
	//console.log("scrollStart from "+start+" to "+end+" in direction "+direction);

	if (anim_state.timer != null) clearInterval(anim_state.timer);
	anim_state = {
		time: 0, begin: start, change: end-start,
		duration: 25, element: elem,
		timer: setInterval("scrollAnim('"+direction+"')", 15)
	};
}
function scrollAnim(dir) {
	if (anim_state.time > anim_state.duration) {
		clearInterval(anim_state.timer);
		anim_state.timer = null;
	} else {
		var move = sineInOut(anim_state.time, anim_state.begin, anim_state.change, anim_state.duration);
		if (dir == 'h') anim_state.element.scrollLeft = move;
		else anim_state.element.scrollTop = move;
		anim_state.time++;
	}
}
var fade_state = {time:0, begin:0, change:0.0, duration:0.0, element:null, timer:null, oncomplete:null};
function fadeStart(elem, start, end, oncomplete) {
	//console.log("fadeStart from "+start+" to "+end);

	if (fade_state.timer != null) clearInterval(fade_state.timer);
	fade_state = {
		time: 0, begin: start, change: end-start,
		duration: 25, element: elem,
		timer: setInterval("fadeAnim()", 15),
		oncomplete: oncomplete
	};
}
function fadeAnim() {
	if (fade_state.time > fade_state.duration) {
		clearInterval(fade_state.timer);
		fade_state.timer = null;
		if (fade_state.oncomplete) fade_state.oncomplete();
	} else {
		var move = sineInOut(fade_state.time, fade_state.begin, fade_state.change, fade_state.duration);
		fade_state.element.style.opacity = move/100;
		fade_state.element.style.filter = 'alpha(opacity='+move+')';
		fade_state.time++;
	}
}
function sineInOut(t, b, c, d) { return -c/2 * (Math.cos(Math.PI*t/d) - 1) + b; }