var editor = false, packaged;

var agent = navigator.userAgent.toLowerCase();
var iphone = (agent.indexOf('iphone')!=-1);

document.observe('dom:loaded', function() {
	Application.initialize();
	$$('.slideshow').each(function(s) {new Slideshow(s);});
	var a = $('arkanoid');
	if (a) {
		arkanoid.init();
	}
});

function video(id, src, preview, width, height) {
	var flashvars = {
		src: src,
		preview: preview
	};
	var params = {
		allowfullscreen: "true",
		wmode: "transparent"
	};
	swfobject.embedSWF('/flash/player.swf', id, width, height, "9.0.0", false, flashvars, params, null);
}

var Application = {
	initialize: function() {
		var self = this;
		this.crop = $('crop');
		this.works_link = $$('a.works')[0];
		this.works_list = $$('.works_list')[0];
		
		this.options = {
			starteffect: null,
			endeffect: null,
			zindex: 1,
			snap: function(x, y) {
				var w = -self.doc_size.width + self.dimensions.width,
					h = -self.doc_size.height + self.dimensions.height;
				return [x > w ? (x < 0 ? x : 0) : w, y > h ? (y < 0 ? y : 0) : h];
		    }
		};
		
		if (this.crop) {
			this.doc = this.crop.down('div');
			this.draggable = new Draggable(this.doc, this.options);
			this.doc_size = this.doc.getDimensions();
			this.scroll = this.scroll_bar_width();
			Event.observe(window, 'resize', this.resize.bind(this));
			this.resize();
		}
		
		$$('.item.youtube').each(function(yt) {
			this.load_youtube(yt);
		}, this);
		
		if (this.works_link) {
			this.works_link.observe('click', this.toggle_works.bind(this));
		}
	},
	load_youtube: function(element) {
		var src = element.readAttribute('src'), swf_src;
		if (packaged || iphone) {
			swf_src = 'http://www.youtube.com/v/' + src;
		} else {
			swf_src = '/flash/yt_player.swf?id=' + src;
		}
		var placeholder = new Element('div', {'id': 'youtube_' + src});
		var flashvars = {
			location: document.location.href
		};
		var params = {
			allowFullScreen: "true",
			allowScriptAccess: "always"
		};
		element.insert(placeholder);
		if (iphone) {
			placeholder.innerHTML = '<embed src="' + swf_src + '" type="application/x-shockwave-flash" allowscriptaccess="always" allowfullscreen="true" width="100%" height="100%"></embed>';
		} else {
			swfobject.embedSWF(swf_src, placeholder.id, '100%', '100%', "9.0.0", false, flashvars, params, null);
		}
	},
	toggle_works: function(e) {
		Event.stop(e);
		this.works_link.toggleClassName('active');
		this.works_list.toggle();
	},
	resize: function() {
		this.dimensions = document.viewport.getDimensions();
		this.crop.setStyle({
			'width': this.dimensions.width + this.scroll + 'px',
			'height': this.dimensions.height + this.scroll + 'px'
		});
	},
	scroll_bar_width: function() {
		var body = $(document.getElementsByTagName('body')[0]);	
		body.style.overflow = "hidden";
		var width = body.clientWidth;		
		body.style.overflow = "scroll";
		width -= body.clientWidth;
		if (!width) width = body.offsetWidth - body.clientWidth;
		body.style.overflow = "hidden";
		width = width + 1;
		return Math.floor(width/2) * 2;
	}
}

var Slideshow = Class.create({
	initialize: function(element) {
		this.element = $(element);
		this.container = this.element.down('ul');
		this.items = this.container.getElementsByTagName('li');
		this.cur = 0;
		Event.observe(window, 'load', this.start.bind(this));
	},
	create_thumbnails: function() {
		this.telement = new Element('div', {'class': 'thumbs_container'});
		this.tcontainer = new Element('ul', {'class': 'thumbs'});
		this.tcontainer.innerHTML = this.container.innerHTML;
		this.telement.insert(this.tcontainer);
		this.element.insert(this.telement);
		this.titems = this.tcontainer.getElementsByTagName('li');
		
		this.titem_dimensions = {
			width: this.dimensions.width / 10,
			height: this.dimensions.height / 10
		};
		this.telement.style.width = this.titem_dimensions.width * 8 + 'px';
		this.telement.style.height = this.titem_dimensions.height + 'px';
		this.tcontainer.style.width = (this.titem_dimensions.width + 10) * this.titems.length + 'px';
		
		var images = this.telement.select('img');
		for (var i=0, len=images.length; i<len; i++) {
			var image = images[i];
			image.writeAttribute('width', this.titem_dimensions.width);
			image.writeAttribute('height', this.titem_dimensions.height);
			image.observe('click', this.update.bind(this, i));
		}
		
		this.create_buttons();
	},
	create_buttons: function() {
		this.tleft = new Element('div', {'class': 'button_left'});
		this.tleft.innerHTML = '&lt;';
		this.tleft.hide();
		this.tright = new Element('div', {'class': 'button_right'});
		this.tright.innerHTML = '&gt;';
		this.element.insert(this.tleft);
		this.element.insert(this.tright);
		this.tpage = 0;
		this.tpage_size = (this.titem_dimensions.width + 10) * 8;
		this.tpages = Math.ceil(this.titems.length / 8);
		this.tleft.observe('click', this.change.bind(this, -1));
		this.tright.observe('click', this.change.bind(this, 1));
		
		if (this.tpages == 1) {
			this.telement.style.width = (this.titem_dimensions.width + 10) * this.titems.length + 'px';
			this.telement.style.paddingLeft = '10px';
			this.tright.hide();
		}
	},
	start: function() {
		this.dimensions = this.container.down('img').getDimensions();
		this.create_thumbnails();
		this.element.style.width = this.dimensions.width + 'px';
		this.element.style.height = this.dimensions.height + this.titem_dimensions.height + 10 + 'px';
		this.container.style.width = this.items.length * this.dimensions.width + 'px';
		new Effect.Fade(this.titems[this.cur], {to: 0.5, duration: 0.1});
	},
	update: function(i) {
		var previous = this.cur, c = this.cur, self = this, from, to;
		if (i >= 0) {
			this.cur = i;
		} else {
			this.cur = c + 1 > this.items.length - 1 ? 0 : c + 1;
		}
		
		new Effect.Appear(this.titems[previous], {duration: 0.75, fps: 100, transition: Effect.Transitions.easeInOutExpo});
		new Effect.Fade(this.titems[this.cur], {to: 0.5, duration: 0.75, fps: 100, transition: Effect.Transitions.easeInOutExpo});
		
		from = previous * this.dimensions.width;
		to = this.cur * this.dimensions.width;
		this.move(this.container, from, to);
	},
	change: function(dir) {
		var previous = this.tpage, new_page = this.tpage + dir, from, to;
		
		if (new_page < this.tpages && new_page >= 0) {
			this.tpage = new_page;
		}
		
		from = previous * this.tpage_size;
		to = this.tpage * this.tpage_size;
		this.move(this.tcontainer, from, to);
		
		if (this.tpage + 1 >= this.tpages) {
			this.tright.hide();
		} else {
			this.tright.show();
		}
		
		if (this.tpage - 1 < 0) {
			this.tleft.hide();
		} else {
			this.tleft.show();
		}
	},
	move: function(element, from, to) {
		if (this.effect) {
			this.effect.cancel();
		}
		
		this.effect = new Effect.Tween(null, -from, -to,
			{
				duration: 0.75,
				fps: 100,
				transition: Effect.Transitions.easeInOutExpo
			},
			function(p) {
				element.style.left = p + 'px';
			}
		);
	}
});