var CONFIG = {}, GLOBAL = {};

var nav, cases, player;
var ipad = navigator.userAgent.match(/iPad/i) != null;
var html = $$('html')[0];

if(Browser.name == 'ie') {
	html.addClass('ie');
	html.addClass('ie' + Browser.version);
}

if(ipad) {
	html.addClass('ipad');
} else {
	html.addClass('no-ipad');
}

function playerInitDone() {
	getFlashMovieObject('videoplayer').setVolume(1);
	player.hideControls();
	player.initVolumeSlider();
//	player.initXml();
}

var currentFlashTime = 0;
function videoTimeUpdate(time) {
	player.videoTimeUpdate(time);
}

function updateVideoDuration(duration) {
	player.setDuration(duration);
}

function getFlashMovieObject(movieName)
{
  if (window.document[movieName])
  {
      return window.document[movieName];
  }
  if (navigator.appName.indexOf("Microsoft Internet")==-1)
  {
    if (document.embeds && document.embeds[movieName])
      return document.embeds[movieName];
  }
  else // if (navigator.appName.indexOf("Microsoft Internet")!=-1)
  {
    return document.getElementById(movieName);
  }
}

window.addEvent('domready', function() {
	GLOBAL.baseHref  = $(document.head).getElement('base').get('data-large-href');
	GLOBAL.baseLocal = $(document.head).getElement('base').get('data-local-href');

	if(ipad) {
		GLOBAL.mask = new Element('div', {'id': 'mask'}).inject($(document.body), 'inside');
	}

	$('header').getElements('ul li.dropdown').each(function(el) {
		new Dropdown({
			button: el.getElement('a'),
			dropdown: el.getElement('div.box')
		});
	}.bind(this));

	$('pushbox').getElements('ul.locations li').each(function(el) {
		new Clock({
			time: el.getElement('.clock').get('data-time'),
			clock: el.getElement('.clock'),
			clockId: el.getElement('.clock').get('id'),
			zone: el.getElement('.clock').get('data-zone')
		});
	}.bind(this));

	if(html.hasClass('cssanimations')) {

		var delay;
		$$('[data-delay]').each(function(el) {

			delay = el.get('data-delay').toInt();
			if(ipad) {
				delay += 500;
			}
			(function() {
				el.addClass('animate');
			}.delay(delay, this));
		}.bind(this));
	}

	new RotateHeader($('pushbox').getElement('h1'));

	if($('projects')) {
		cases = new Projects({
			wrapper: $('projects'),
			filterButtons: $('projects').getElements('nav.filter a'),
			projectsWrapper: $('projects').getElement('.project-wrapper'),
			projects: $('projects').getElements('.project-wrapper a')
		});
	}

	if($('videoplayer-wrapper')) {
		player = new Videoplayer({
			wrapper: $('videoplayer-wrapper'),
			fullscreenWrapper: $('fullscreen'),
			playerWrapper: $('videoplayer'),
			player: $('player'),
			controls: $('controls'),
			closeButton: $('close-video')
		});
	}

	new ContactForm($('footer').getElement('section.contact'));
	new CustomDropDown();
});

var ContactForm = new Class(
{
	Implements: Options,
	container: null,
	opened: false,
	options: {
		linkElement: 'a.contact',
		contactForm: 'article#contact-form',
		introductionText: 'article#contact-article',
		successMessage: '.success'
	},
	initialize: function(container, options)
	{
		this.setOptions(options);
		this.container = $(container);
		this.initEvents();

		var form = this.container.getElement(this.options.contactForm),
			button = this.container.getElement(this.options.linkElement);

		var left = button.getPosition(this.container).x,
			bottom = this.container.getSize().y - button.getPosition(this.container).y;

		this.container.getElement(this.options.contactForm).setStyles({
			'left': left,
			'bottom': bottom
		});

		this.container.getElements('input,textarea').each(function(element)
		{
			new InputPlaceholder(element);
		});
	},
	initEvents: function()
	{
		this.container.getElement(this.options.linkElement).addEvent('click', function(e)
		{
			if(e) {e.stop();}
			this.toggle();
		}.bind(this));

		var form = this.container.getElements(this.options.contactForm).getElement('form'),
			self = this,
			successMessage = this.container.getElement(this.options.successMessage),
			button = this.container.getElement(this.options.contactForm).getElement('button');

		form.set('send', {
			url: GLOBAL.baseLocal+'contact.php',
			method: 'post',
			onComplete: function(response)
			{
				var result = JSON.decode(response);
				if(result.success)
				{
					(function(){self.close();}).delay(3000);
					//form.addClass('hide');
					button.addClass('hide');
					(function(){successMessage.addClass('animate');}).delay(225);
//					form.getElement('[name=name]').set('value', '');
//					form.getElement('[name=email]').set('value', '');
//					form.getElement('[name=message]').set('value', '');
				}
				else
				{
					result.errors.each(function(field)
					{
						form.getElement('[name=' + field + ']').getParent('p').addClass('error');
					});
				}

				$$('img.sending').removeClass('sending');
			}
		});

		form.addEvent('submit', function(e)
		{
			$$('img.send').addClass('sending');

			this.getElements('.error').removeClass('error');

			['name','email','country','message'].each(function(name)
			{
				var element = this.getElement('[name=' + name + ']');
				var defaultValue = element.retrieve('defaultValue');
				if(element.get('value') == '' || element.get('value') == defaultValue)
				{
					element.getParent('p').addClass('error');
				}
			}.bind(this));

			e.stop();

			if(this.getElement('.error'))
			{
				$$('img.sending').removeClass('sending');
			}
			else
			{
				this.send();
			}
		});
	},
	toggle: function()
	{
		if(this.opened)
		{
			this.close();
		}
		else
		{
			this.open();
		}
	},
	open: function()
	{
		(function() {
			this.opened = true;
		}.delay(225, this));

		this.container.getElement(this.options.linkElement).addClass('active');
		this.container.getElement(this.options.contactForm).addClass('active').setStyles({
			'width': this.container.getElement(this.options.introductionText).getSize().x + this.container.getElement(this.options.linkElement).getStyle('padding-left').toInt(),
			'height': this.container.getElement(this.options.introductionText).getSize().y - this.container.getElement(this.options.linkElement).getSize().y + 2
		});

		this.container.getElement(this.options.contactForm).getElement('button').setStyles({
			'bottom': 'auto',
			'top': this.container.getElement(this.options.introductionText).getSize().y - this.container.getElement(this.options.linkElement).getSize().y
		});

		this.container.getElement(this.options.successMessage).setStyles({
			'bottom': 'auto',
			'top': this.container.getElement(this.options.introductionText).getSize().y - this.container.getElement(this.options.linkElement).getSize().y + 2
		});

		$$('img.send').setStyles({
			'bottom': 'auto',
			'right': 10,
			'top': this.container.getElement(this.options.introductionText).getSize().y - this.container.getElement(this.options.linkElement).getSize().y + 14
		});

		(function()
		{
			this.container.getElement(this.options.contactForm).setStyle('overflow', 'visible');
			this.container.getElement(this.options.contactForm).getElement('button').fade('hide').fade(1);
		}.bind(this)).delay(225);
	},
	close: function()
	{
		this.opened = false;
		this.container.getElement(this.options.linkElement).removeClass('active');
		this.container.getElement(this.options.contactForm).removeClass('active').setStyles({
			'width': 0,
			'height': 0
		});

		this.container.getElement(this.options.contactForm).setStyle('overflow', 'hidden');
		//this.container.getElement(this.options.contactForm).getElement('form').removeClass('hide');
		//this.container.getElement(this.options.successMessage).removeClass('animate');
	}
});

var RotateHeader = new Class(
{
	Implements: Options,
	container: null,
	titles: [],
	currentActive: 0,
	numberOfElements: 0,
	options: {
		delay: 4000,
		titles: 'span.rotate'
	},
	initialize: function(container, options)
	{
		this.setOptions(options);
		this.container = $(container);
		this.titles = this.container.getElements(this.options.titles);
		this.numberOfElements = this.titles.length;

		if(Browser.name == 'ie')
		{
			this.titles.set('text', '');
		}

		var rotateFn = function()
		{
			this.titles.removeClass('animate');
			this.titles[this.currentActive].addClass('animate');

			this.currentActive++;
			if(this.currentActive == this.numberOfElements)
			{
				this.currentActive = 0;
			}
		}.bind(this);

		rotateFn.periodical(this.options.delay);
		(rotateFn)();
	}
});



var Dropdown = new Class({
	options: {
		button: null,
		dropdown: null,
		clicked: false
	},
	Implements: Options,

	initialize: function(options) {
		this.setOptions(options);

		this.options.hover = false;

		this.addEvents();
	},

	addEvents: function() {
		this.options.button.addEvents({
			'click': function(e) {e.stop();this.options.clicked = true;this.toggle();}.bind(this),
			'mouseenter': function(e) {this.show(); }.bind(this),
			'mouseleave': function(e) {this.hide(); }.bind(this)
		});

		this.options.dropdown.addEvents({
			'click': function(e) {this.options.clicked = true;this.toggle()}.bind(this),
			'mouseenter': function(e) {this.options.hover = true;}.bind(this),
			'mouseleave': function(e) {this.hide();}.bind(this)
		});

		if(ipad) {
			GLOBAL.mask.addEvent('click', function() {this.toggle();}.bind(this));
		}
	},

	show: function() {
		this.options.hover = true;
		this.options.button.addClass('active');
		this.options.dropdown.addClass('box-hover');
	},

	hide: function() {
		this.options.hover = false;
		(function() {
			if(!this.options.hover) {
				this.options.button.removeClass('active');
				this.options.dropdown.removeClass('box-hover');
			}
		}.delay(100, this));
	},

	toggle: function() {
		if(ipad) {
			if(this.options.clicked) {
				GLOBAL.mask.setStyle('display', 'block');
				this.options.clicked = false;
			} else {
				GLOBAL.mask.setStyle('display', 'none');
				this.options.clicked = false;
			}
		}
	}
});



var Videoplayer = new Class({
	options: {
		wrapper: null,
		fullscreenWrapper: null,
		playerWrapper: null,
		player: null,
		controls: null,
		closeButton: null
	},
	Implements: Options,

	initialize: function(options) {
		this.setOptions(options);

		this.options.muted = false;

		this.options.expanded = false;
		//this.options.scrollFx = new Fx.Scroll($('description'));
		this.options.scrollFx = new Fx.Tween($('description').getElement('.description-wrapper'));

		if(html.hasClass('no-video')) {
			this.initFlashplayer();
		}

		if(!html.hasClass('ie')) {
			this.hideControls();
			this.initVolumeSlider();
		}

		this.initXml();
	},

	initFlashplayer: function() {
		var params = {
			quality : "high",
			scale : "noscale",
			wmode : "transparent",
			allowscriptaccess : "always",
			bgcolor : "#059DDC"
		};

		var flashvars = {};
		flashvars.version = 1;
		//flashvars.videoURL = "http://medhavi.mediamonks.local/mediamonks/website/inc/video/mediamonks_showreel.mp4";

		/*
		var attributes = {
			id : "videoplayer",
			name : "videoplayer"
		};
		*/
		swfobject.embedSWF("inc/swf/player.swf?v=" + flashvars.version, "videoplayer", "890px", "410px", "9.0.28", "expressInstall.swf", flashvars, params, {id : "videoplayer",name : "videoplayer"});
	},

	initXml: function() {
		var videoDescriptions = new Request.JSON({
			url: GLOBAL.baseLocal+'inc/xml/video.php',
			onComplete: function(response) {
				this.createSliderElements(response.video);
				this.options.responseVideos = response.video;
				this.addEvents();
			}.bind(this)
		}).send();
	},

	createSliderElements: function(videos) {
		this.options.controls.getElement('#description .description-wrapper').set('html', '');
		var offset = 0;
		if (typeof videos !== 'undefined') {
			videos.project.each(function(video, i) {
				var className = 'item';
				if(i == videos.project.length - 1) {
					className += ' hide';
				}
				var itemWrapper = new Element('div', {'class': className, 'data-timecode': video.timecode, 'data-offset': offset}).inject(this.options.controls.getElement('#description .description-wrapper'), 'inside');
				var itemTitle = new Element('h4', {'html': video.title}).inject(itemWrapper, 'inside');
				var itemDescription = new Element('p', {'html': video.author + '<br>' + video.description}).inject(itemWrapper, 'inside');
				offset += 100;
			}.bind(this));
		} else {
			alert('undefined');
		}

		this.options.cases = $('description').getElements('.item');
		this.resetDescriptions();
	},

	addEvents: function() {

		this.options.wrapper.addEvents({
			'mouseenter': function() {
				this.showControls();
			}.bind(this),
			'mouseleave': function() {
				this.hideControls();
			}.bind(this)
		});

		this.options.controls.getElements('a').each(function(el) {
			el.addEvent('click', function(e) {
				e.stop();
				if(el.hasClass('play')) {
					this.playVideo();
				} else if(el.hasClass('pause')) {
					this.pauseVideo();
				} else if(el.hasClass('fullscreen')) {
					this.toggleFullscreen();
					this.playVideo();
				} else if(el.hasClass('mute')) {
					if(html.hasClass('ipad')) {
						this.hideControls();
					}
				}
			}.bind(this));
		}.bind(this));

		this.options.closeButton.addEvent('click', function(e)
		{
			e.stop();
			this.options.player.currentTime = 0;
			this.pauseVideo();
			this.resetDescriptions();
			this.options.wrapper.removeClass('open');

			if(Browser.safari)
			{
				this.options.player.setStyle('display', 'none');
			}

			if(this.options.expanded) {
				this.toggleFullscreen();
			}
		}.bind(this));

		this.options.controls.getElement('#progressbar #progress').addEvent('click', function(e) {
			e.stop();
			var offset = e.page.x - this.options.controls.getElement('#progressbar #progress').getPosition().x;
			this.scrubProgress(offset);
		}.bind(this));

		this.options.playerWrapper.addEvent('click', function(e) {
			e.stop();
			this.showControls();
		}.bind(this));

		if(html.hasClass('video')) {
			var current = 0;

			this.options.player.addEventListener('timeupdate', function() {

				if(current != Math.round(this.options.player.currentTime)) {
					this.updateTimer(this.options.player.currentTime);
					this.setDescription(Math.round(this.options.player.currentTime));
					current = Math.round(this.options.player.currentTime);
					this.setProgressbar(Math.round(this.options.player.currentTime));
				}
			}.bind(this), false);

			this.options.player.addEventListener('ended', function() {
				this.options.player.currentTime = 0;
				this.options.player.pause();
				this.resetDescriptions();
				this.options.wrapper.removeClass('open');

				if(Browser.safari)
				{
					this.options.player.setStyle('display', 'none');
				}

				if(this.options.expanded) {
					this.toggleFullscreen();
				}
			}.bind(this), false);
		}
	},

	videoTimeUpdate: function(time) {
		if(currentFlashTime != Math.round(time)) {
			this.updateTimer(time);
			this.setDescription(Math.round(time));
			currentFlashTime = Math.round(time);
			this.setProgressbar(Math.round(time));
		}
	},

	initProjectEvents: function() {
		this.options.scrollWindow = new Fx.Scroll($(document.body));
		this.options.triggers = $$('a.play-video');
		this.options.triggers.each(function(el) {
			el.addEvent('click', function(e) {
				e.stop();
				this.options.scrollWindow.start(0,0);
				this.options.wrapper.addClass('open');
				if(!el.hasClass('showreel')) {
					this.setVideoDescription(el.getElement('h2').get('html'), el.getElement('p').get('html'));
				} else {
					this.createSliderElements(this.options.responseVideos);
				}
				if(html.hasClass('ie')) {
					this.pauseVideo();
				}
				this.setVideo(el.get('data-video'));
				this.playVideo();
			}.bind(this));
		}.bind(this));
	},

	setVideo: function(video) {
		if(html.hasClass('video')) {
			video = GLOBAL.baseHref+'inc/video/' + video;
			if(Modernizr.video.h264) {video += '.mp4';}
			else if(Modernizr.video.ogg) {video += '.ogg';}
			else if(Modernizr.video.webm) {video += '.webm';}

			this.options.player.src = video;
			this.options.player.load();
		} else {
			getFlashMovieObject('videoplayer').setUrl(GLOBAL.baseHref+'inc/video/' + video + '.mp4');
		}
	},

	setDuration: function(duration) {
		this.options.player.duration = duration;
	},

	updateTimer: function(t) {
		var s = t;
        s = s % 3600;
        var m = Math.floor(s / 60);
        s = Math.floor(s % 60);
        if (s.toString().length < 2)
            s = '0' + s;
        if (m.toString().length < 2)
            m = '0' + m;

        this.options.controls.getElement('time').set('html', m + ':' + s);
	},

	playVideo: function() {
		this.options.controls.getElement('a.pause').removeClass('pause-active');
		this.options.controls.getElement('a.play').addClass('play-active');
		if(html.hasClass('video')) {
			if(Browser.safari)
			{
				this.options.player.setStyle('display', 'block');
			}
			this.options.player.play();
		} else {
			getFlashMovieObject('videoplayer').playVideo();
		}
	},

	pauseVideo: function() {
		this.options.controls.getElement('a.play').removeClass('play-active');
		this.options.controls.getElement('a.pause').addClass('pause-active');
		if(html.hasClass('video')) {
			this.options.player.pause();
		} else {
			getFlashMovieObject('videoplayer').pauseVideo();
		}
	},

	setDescription: function(currentTime) {
		var timecodes = [];
		this.options.cases.each(function(el, i) {
			timecodes.push(el.get('data-timecode').toInt());
		}.bind(this));

		if(timecodes.contains(currentTime)) {
			var slide = '[data-timecode=' + currentTime + ']';
			//var pos = $$(slide)[0].getPosition($('description')).y;

			if($$(slide)[0])
			{
				var pos = $$(slide)[0].get('data-offset');
				if(html.hasClass('ipad')) {
					$('description').getElement('.description-wrapper').setStyle('top', pos * -1);
				} else {
					this.options.scrollFx.start('top', pos * -1);
				}
			}
		}
	},

	setVideoDescription: function(title, description) {
		this.options.controls.getElements('#description .item').dispose();
		var itemWrapper = new Element('div', {'class': 'item'}).inject(this.options.controls.getElement('#description .description-wrapper'), 'inside');
		var itemTitle = new Element('h4', {'html': title}).inject(itemWrapper, 'inside');
		var itemDescription = new Element('p', {'html': description}).inject(itemWrapper, 'inside');
		this.resetDescriptions();
	},

	resetDescriptions: function() {
		if(html.hasClass('ipad')) {
			$('description').getElement('.description-wrapper').setStyle('top', 0);
		} else {
			this.options.scrollFx.start('top', 0);
		}
	},

	setProgressbar: function(currentTime) {
		var progressWidth = $('progress').getSize().x;
		$('progress').getElement('span').setStyle('width', progressWidth / Math.round(this.options.player.duration) * currentTime);
	},

	scrubProgress: function(offset) {
		var progressWidth = $('progress').getSize().x;
		var percentage = progressWidth / offset;

		if(html.hasClass('ie'))
		{
			getFlashMovieObject('videoplayer').updatePlayHead(this.options.player.duration / percentage);
		}
		else
		{
			this.options.player.currentTime = (this.options.player.duration / percentage);
		}

		this.setProgressbar(Math.round(this.options.player.currentTime));
	},

	showControls: function() {
		if(html.hasClass('ie')) {
			this.options.controls.setStyle('display', 'block');
			this.options.closeButton.setStyle('display', 'block');
		} else {
			this.options.controls.fade(1);
			this.options.closeButton.fade(1);
		}
	},

	hideControls: function() {
		if(html.hasClass('ie')) {
			this.options.controls.setStyle('display', 'none');
			this.options.closeButton.setStyle('display', 'none');
		} else {
			this.options.controls.fade(0);
			this.options.closeButton.fade(0);
		}
	},

	initVolumeSlider: function() {
		var slider = new Slider(this.options.controls.getElement('#volume .slider'), this.options.controls.getElement('#volume .knob'), {
			range: [100, 0],
			mode: 'vertical',
			initialStep: 100,
			onTick: function(value) {
				if(html.hasClass('video')) {
					this.options.player.volume = (value/100);
				} else {
					getFlashMovieObject('videoplayer').setVolume(value/100);
				}
			}.bind(this),
			onChange: function(value) {
				if(html.hasClass('video')) {
					this.options.player.volume = (value/100);
				} else {
					getFlashMovieObject('videoplayer').setVolume(value/100);
				}
			}.bind(this)
		});

		if(html.hasClass('video')) {
			this.options.player.volume = 1;
		} else {
			getFlashMovieObject('videoplayer').setVolume(1);
		}
	},

	toggleFullscreen: function() {
		if(html.hasClass('ipad')) {
			try {
			  this.options.player.webkitEnterFullscreen();
			} catch(error) {
			   onFullscreenChange();
			}
		} else if(html.hasClass('ie')) {
			if(!this.options.expanded) {
				this.options.expanded = true;
				$('pushbox').setStyle('position', 'static');
				$(document.body).setStyle('overflow', 'hidden');
				this.options.wrapper.addClass('fullscreen');
			} else {
				this.options.expanded = false;
				$('pushbox').setStyle('position', 'relative');
				$(document.body).setStyle('overflow', 'visible');
				this.options.wrapper.removeClass('fullscreen');
			}
		} else {
			if(!this.options.expanded) {
				this.options.expanded = true;
				this.options.fullscreenWrapper.setStyle('display', 'block');
				this.options.wrapper.inject(this.options.fullscreenWrapper, 'inside');
				$(document.body).setStyle('overflow', 'hidden');
			} else {
				this.options.expanded = false;
				this.options.fullscreenWrapper.setStyle('display', 'none');
				this.options.wrapper.inject($('smallscreen'), 'inside');
				$(document.body).setStyle('overflow', 'visible');
			}
		}
	}
});



var Projects = new Class({
	options: {
		wrapper: null,
		filterButtons: null,
		projectsWrapper: null,
		projects: null,
		active: 0
	},
	Implements: Options,

	initialize: function(options) {
		this.setOptions(options);
		this.setLoader(this.options.filterButtons[this.options.active].get('data-category'));
		this.addEvents();
	},

	addEvents: function() {
		this.options.filterButtons.each(function(el, i) {
			el.addEvent('click', function(e) {
				e.stop();
				this.setActive(i);
				this.resetProjects(el.get('data-category'));
			}.bind(this));
		}.bind(this));
	},

	setActive: function(active) {
		this.options.active = active;
		this.options.filterButtons.removeClass('active');
		this.options.filterButtons[this.options.active].addClass('active');
	},

	resetProjects: function(category) {
		var delay = 0;
		this.options.projects.each(function(el, i) {
			(function() {
				el.addClass('fade-out');
			}.delay(delay, this));
			delay += 80;
		}.bind(this));

		(function() {
			this.options.projects.getParent('article').dispose();
			this.setLoader(category);
		}.delay(delay + 240, this));
	},

	setLoader: function(category) {
		this.options.loader = Asset.image('inc/image/ajax-loader-black.gif', {
			'class': 'loader',
			onLoad: function() {
				this.options.loader.inject(this.options.projectsWrapper, 'inside');
				this.getProjects(category);
			}.bind(this)
		});
	},

	getProjects: function(category) {
		var request = new Request.JSON({
			url: GLOBAL.baseLocal+'projects.php?c=' + category,
			onSuccess: function(response) {
				this.options.loader.dispose();
				response.each(function(project, i) {
					this.insertProject(project, i);
				}.bind(this));
				this.initProjects();
				this.tweenProjects();
			}.bind(this)
		}).get();
	},

	insertProject: function(project, i) {
		var projectClass = 'col-3';
		if(i == 2) {projectClass += ' col-last';}

		var article = new Element('article', {'class': projectClass}).inject(this.options.projectsWrapper, 'inside');
		var articleLink = new Element('a', {'href': '#', 'class': 'play-video', 'data-video': project['videoName']}).inject(article, 'inside');
		var articleVisual = new Element('figure', {'data-img': project['imgUrl'], 'html': '<img class="loader" src="inc/image/ajax-loader.gif">'}).inject(articleLink, 'inside');
		var articleTitle = new Element('h2', {'text': project['title']}).inject(articleLink, 'inside');
		var articleDescription = new Element('p', {'html': project['text']}).inject(articleLink, 'inside');
	},

	initProjects: function() {
		player.initProjectEvents();
		this.options.projects = this.options.projectsWrapper.getElements('article a');

		this.options.projects.each(function(el) {
			el.getElement('figure').set('tween', {'duration': 100}).tween('opacity', 0.7);
			el.addEvents({
				'mouseenter': function() {
					el.getElement('figure').tween('opacity', 1);
				}.bind(this),
				'mouseleave': function() {
					el.getElement('figure').tween('opacity', 0.7);
				}.bind(this)
			});
		}.bind(this));
	},

	tweenProjects: function() {
		var delay = 80;
		this.options.projects.each(function(el, i) {
			(function() {
				el.getParent('article').addClass('animate');
			}.delay(delay, this));
			delay += 40;

			this.loadVisual(el.getElement('figure'), el.getElement('figure').get('data-img'));

		}.bind(this));
	},

	loadVisual: function(figure, imgUrl) {
		var image = Asset.image(imgUrl, {
			'class': 'visual',
			onLoad: function() {
				image.inject(figure, 'inside').fade('hide').fade('in');
				figure.getElement('img.loader').dispose();
			}.bind(this)
		});
	}
});



var Clock = new Class({
	options: {
		listItem: null,
		clock: null,
		zone: null,
		time: null,
		clockId: null
	},
	Implements: Options,

	initialize: function(options) {
		this.setOptions(options);
		this.drawClock();
	},

	drawClock: function() {
		if(html.hasClass('ie7')) {
			return false;
		}
		canvas = Raphael(this.options.clockId, 40, 40);
		var clock = canvas.circle(20, 20, 20);
		clock.attr({'fill': '#000000', 'stroke': '#000000', 'stroke-width': '0'})

		this.hour_hand = canvas.path('M20 20L20 10');
		this.hour_hand.attr({stroke: '#FFFFFF', 'stroke-width': 2});

		this.minute_hand = canvas.path('M20 20L20 7');
		this.minute_hand.attr({stroke: '#FFFFFF', 'stroke-width': 2});

		//this.second_hand = canvas.path('M'+20+' '+(20+ 20)+'L'+20+' 20');
		//this.second_hand.attr({stroke: '#666666', 'stroke-width': 1});

		this.updateClock();
		this.updateClock.periodical(1000, this);
	},

	updateClock: function() {
		var now = new Date(this.options.time);
		var hours = now.getHours();
		var minutes = now.getMinutes();
		var seconds = now.getSeconds();

		hours = 30 * hours + (minutes / 2.5);
		minutes = 6 * minutes;
		seconds = (seconds * 6) - 180;

		this.hour_hand.rotate(hours, 20, 20);
		this.minute_hand.rotate(minutes, 20, 20);
		//this.second_hand.rotate(seconds, 20, 20);
	}

});

/**
 * Dropdown Class
 *
 * @author René Drieënhuizen
 **/
var CustomDropDown = new Class(
{
	arrSelect: null,

	initialize:function()
	{
		this.arrSelect = $$('.custom_dropdown');
		var maxlength = 30;

		this.arrSelect.each(function(elDropDown, i)
		{
			elDropDown.getParent().getElement('.dropdown_label').set('text', elDropDown.getSelected().getLast().get('text'));
			elDropDown.addEvents(
			{
				mouseenter:function()
				{
					this.getParent().addClass('dropdown_over');
				},
				mouseleave:function()
				{
					this.getParent().removeClass('dropdown_over');
				},
				change:function()
				{
					var text = elDropDown.getSelected().getLast().get('text');
					if(text.length > maxlength)
					{
						while(text.length > maxlength)
						{
							text = text.substr(0, text.length-1);
						}

						text += '..';
					}

					if(text == elDropDown.getFirst().get('text'))
					{
						this.getParent().getElement('.dropdown_label').removeClass('selected');
					}
					else
					{
						this.getParent().getElement('.dropdown_label').addClass('selected');
					}

					this.getParent().getElement('.dropdown_label').set('text', text);
				}
			});
		});
	}
});

var InputPlaceholder = new Class(
{
	initialize: function(input)
	{
		var defaultValue = input.get('value');
		input.store('defaultValue', defaultValue);

		input.addEvents({
			'focus': function(e)
			{
				if(this.get('value') == defaultValue)
				{
					this.set('value', '');
				}
			},
			'blur': function(e)
			{
				this.addClass('active');
				if(this.get('value') == '')
				{
					this.set('value', defaultValue).removeClass('active');
				}
			}
		});
	}
});