var CtWork_Item = Class.create({

	element: null,
	id: null,

	index: null,
	parameters: null,


	styleHidden: 'z-index: 1001; opacity: 0;',
	styleCurrent: 'z-index: 1010; opacity: 1;',

	initialize: function(htmlElement, index) {
		this.element = $(htmlElement);
		this.id = this.element.identify();
		this.index = index;


		try {
			this.parameters = this.element.readAttribute('title').evalJSON(true);
			this.element.writeAttribute('title', this.element.readAttribute('alt'));
		} catch (ex) {
			this.parameters = {};
		}

		var dummyImage = new Element('img');
		dummyImage.hide();
		$(document.body).insert(dummyImage);
		dummyImage.onload = function(event, img) {
			img.src = dummyImage.src;
			img.removeClassName('loader');
			dummyImage.remove();
		}.bindAsEventListener(dummyImage, this.element);
		dummyImage.src = this.parameters.imageFullPath;

		this.element.observe('click', this.clickHandler.bindAsEventListener(this));
	},

	clickHandler: function(event) {
		Event.stop(event);
		this.element.fire('CtWorkItem:click', {index: this.index});
	},

	effectShow: function(ident, direction) {
		return new Effect.Opacity(this.element, {sync: true, to: 1, afterFinish: function(){this.element.setStyle(this.styleCurrent);}.bind(this)});

	},

	effectHide: function(ident, direction) {
		return new Effect.Opacity(this.element, {sync: true, to: 0, afterFinish: function() {this.element.setStyle(this.styleHidden);}.bind(this)});
	},


	setLast: function(isLast) {
		if (isLast) {
			this.element.setStyle({cursor: 'default'});
		} else {
			this.element.setStyle({cursor: 'pointer'});
		}
	},

	show: function() {
		this.element.setStyle(this.styleCurrent);
//		this.element.show();
	},

	hide: function() {
		this.element.setStyle(this.styleHidden);
//		this.element.hide();
	},


	x: null

});


var CtWork = Class.create({

	element: null,
	id: null,


	buttonPreviousElement: null,
	buttonNextElement: null,
	items: [],
	currentItem: null,

	descriptionElement: null,

	initialize: function(htmlElement) {
		this.element = $(htmlElement).down('div.ctWork');
		if (this.element == null) {
			return;
		}
		this.id = this.element.identify();
		this.items = [];

		var items = this.element.select('img.ctWork-item');
		for (var i = 0; i < items.length; i++) {
			this.items[i] = new CtWork_Item(items[i], i);
			switch (i) {
				case 0: this.items[i].show(); break;
				default: this.items[i].hide(); break;
			}
		}

		this.currentItem = 0;
		this.items[this.currentItem].setLast(false);

		this.descriptionElement = this.element.down('div.ctWork-decription');
		this.buttonPreviousElement = this.element.down('a.ctWork-navigation.previous').hide();
		this.buttonNextElement = this.element.down('a.ctWork-navigation.next');

		this.buttonPreviousElement.observe('click', function(event) {
			Event.stop(event);
			this.scrollToPrevious();
		}.bindAsEventListener(this));

		this.buttonNextElement.observe('click', function(event) {
			Event.stop(event);
			this.scrollToNext();
		}.bindAsEventListener(this));

		this.element.observe('CtWorkItem:click', function(event) {
			if (event.memo.index < this.currentItem) {
				this.scrollToPrevious();
			} else if (event.memo.index >= this.currentItem) {
				this.scrollToNext();
			}
		}.bindAsEventListener(this));
	},

	scrollTo: function(index) {
		if (index == this.currentItem || index < 0 || index >= this.items.length || !this.items[index] || Effect.Queues.get(this.id).effects.length > 0) {
			return;
		}
		var effects = [];

		if (index > this.currentItem) {
			effects.push(this.items[this.currentItem].effectHide(this.id, -1));
			effects.push(this.items[index].effectShow(this.id, -1));
		} else {
			effects.push(this.items[this.currentItem].effectHide(this.id, 1));
			effects.push(this.items[index].effectShow(this.id, 1));
		}

		if (index + 1 < this.items.length) {
			this.buttonNextElement.show();
			this.items[index].setLast(false);
		} else {
			this.buttonNextElement.hide();
			this.items[index].setLast(true);
		}

		if (index - 1 >= 0) {
			this.buttonPreviousElement.show();
		} else {
			this.buttonPreviousElement.hide();
		}

		var description = this.items[index].parameters.text;
		effects.push(new Effect.Opacity(this.descriptionElement, {
			to: 0,
			duration: 0.2,
			afterFinish: function() {
				this.descriptionElement.update(description);
				new Effect.Opacity(this.descriptionElement, {to: 1, duration: 0.2});
			}.bind(this)
		}));

		new Effect.Parallel(effects, {duration: 0.6, /*transition: Effect.Transitions.spring,*/ queue: {scope: this.id, position: 'end'}});


		this.element.fire('CtWork:scrollTo', {index: index});

		this.currentItem = index;
	},


	scrollToNext: function() {
		this.scrollTo(this.currentItem + 1);
	},

	scrollToPrevious: function() {
		this.scrollTo(this.currentItem - 1);
	},


	x: null
});



var CtWorkList_Item = Class.create({

	element: null,
	id: null,

	index: null,
	parameters: null,


	styleHidden: 'width: 0px; height: 0px; left: 0px; top: 115px; opacity: 0; z-index: 0;',
	styleCurrent: 'width: 180px; height: 230px; left: 0px; top: 0px; opacity: 1; z-index: 10;',
	stylePrevious: 'width: 135px; height: 173px; left: -145px; top: 30px; opacity: 0.3; z-index: 5;',
	styleNext: 'width: 135px; height: 173px; left: 190px; top: 30px; opacity: 0.3; z-index: 5;',


	initialize: function(htmlElement, index) {
		this.element = $(htmlElement);
		this.id = this.element.identify();
		this.index = index;

		try {
			this.parameters = this.element.readAttribute('title').evalJSON(true);
			this.element.writeAttribute('title', this.element.readAttribute('alt'));
		} catch (ex) {
			this.parameters = {};
		}

		this.element.observe('click', this.clickHandler.bindAsEventListener(this));
	},

	clickHandler: function(event) {
		Event.stop(event);

		this.element.fire('CtWorkList:click', {index: this.index});
	},

	getEffectNext: function() {
		return new Effect.Morph(this.element, {sync: true, style: this.styleNext});
	},

	getEffectPrevious: function() {
		return new Effect.Morph(this.element, {sync: true, style: this.stylePrevious});
	},

	getEffectCurrent: function() {
		return new Effect.Morph(this.element, {sync: true, style: this.styleCurrent});

	},

	getEffectHide: function() {
		return new Effect.Morph(this.element, {sync: true, style: this.styleHidden});

	},

	setNext: function() {
		this.element.setStyle(this.styleNext);
	},

	setPrevious: function() {
		this.element.setStyle(this.stylePrevious);
	},

	setCurrent: function() {
		this.element.setStyle(this.styleCurrent);
	},

	hide: function() {
		this.element.setStyle(this.styleHidden);
	},


	x: null

});
var CtWorkList = Class.create({

	element: null,
	id: null,


	buttonPreviousElement: null,
	buttonNextElement: null,
	items: [],
	currentItem: null,

	descriptionElement: null,

	workContainerElement: null,

	initialize: function() {
		this.element = $('ctWorkList');
		this.id = this.element.identify();
		this.items = [];

		var items = this.element.select('img.ctWorkList-item');
		for (var i = 0; i < items.length; i++) {
			this.items[i] = new CtWorkList_Item(items[i], i);
			switch (i) {
				case 0: this.items[i].setCurrent(); break;
				case 1: this.items[i].setNext(); break;
				default: this.items[i].hide(); break;
			}
		}

		this.currentItem = 0;

		this.buttonPreviousElement = this.element.down('a.ctWorkList-navigation.previous').hide();
		this.buttonNextElement = this.element.down('a.ctWorkList-navigation.next');
		this.buttonPreviousElement.observe('click', this.clickPreviousHandler.bindAsEventListener(this));
		this.buttonNextElement.observe('click', this.clickNextHandler.bindAsEventListener(this));

		this.element.observe('CtWorkList:click', this.clickHandler.bindAsEventListener(this));

		this.descriptionElement = this.element.down('div.ctWorkList-decription');
	},

	clickHandler: function(event) {
		Event.stop(event);
		if (event.memo.index < this.currentItem) {
			this.scrollToPrevious();
		} else if (event.memo.index > this.currentItem) {
			this.scrollToNext();
		} else if (this.currentItem == event.memo.index) {
			this.openWork();
		}
	},

	clickPreviousHandler: function(event) {
		Event.stop(event);
		this.scrollToPrevious();
	},

	clickNextHandler: function(event) {
		Event.stop(event);
		this.scrollToNext();
	},


	scrollToNext: function() {
		if (this.currentItem + 1 >= this.items.length || Effect.Queues.get(this.id).effects.length > 0) {
			return;
		}
//		Effect.Queues.get(this.id).each(function(effect) { effect.finish(); });
		var effects = [];
		if (this.currentItem - 1 > -1) {
			effects.push(this.items[this.currentItem - 1].getEffectHide());
		}
		effects.push(this.items[this.currentItem].getEffectPrevious());
		this.buttonPreviousElement.show();
		effects.push(this.items[this.currentItem + 1].getEffectCurrent());
		var description = this.items[this.currentItem + 1].parameters.text;
		effects.push(new Effect.Opacity(this.descriptionElement, {
			to: 0,
			duration: 0.15,
			afterFinish: function() {
				this.descriptionElement.update(description);
				new Effect.Opacity(this.descriptionElement, {to: 1, duration: 0.15});
			}.bind(this)
		}));

		this.currentItem++;
		if (this.currentItem + 1 < this.items.length) {
			effects.push(this.items[this.currentItem + 1].getEffectNext());
			this.buttonNextElement.show();
		} else {
			this.buttonNextElement.hide();
		}

		new Effect.Parallel(effects, {duration: 0.4, /*transition: Effect.Transitions.spring,*/ queue: {scope: this.id, position: 'end'}});
	},

	scrollToPrevious: function() {
		if (this.currentItem - 1 < 0 || Effect.Queues.get(this.id).effects.length > 0) {
			return;
		}
//		Effect.Queues.get(this.id).each(function(effect) { effect.finish(); });
		var effects = [];
		if (this.currentItem + 1 < this.items.length) {
			effects.push(this.items[this.currentItem + 1].getEffectHide());
		}
		effects.push(this.items[this.currentItem].getEffectNext());
		this.buttonNextElement.show();
		effects.push(this.items[this.currentItem - 1].getEffectCurrent());
		var description = this.items[this.currentItem - 1].parameters.text;
		effects.push(new Effect.Opacity(this.descriptionElement, {
			to: 0,
			duration: 0.15,
			afterFinish: function() {
				this.descriptionElement.update(description);
				new Effect.Opacity(this.descriptionElement, {to: 1, duration: 0.15});
			}.bind(this)
		}));

		this.currentItem--;
		if (this.currentItem - 1 > -1) {
			effects.push(this.items[this.currentItem - 1].getEffectPrevious());
			this.buttonPreviousElement.show();
		} else {
			this.buttonPreviousElement.hide();
		}
		new Effect.Parallel(effects, {duration: 0.4, /*transition: Effect.Transitions.spring,*/ queue: {scope: this.id, position: 'end'}});
	},


	openWork: function() {
		$('ctWorkItem').fire('CtWorkItem:open', this.items[this.currentItem].parameters);
	},

	x: null
});




var CtWorkItem = Class.create(CtComponent_Abstract, {

	element: null,
	id: null,

	elementWidth: null,
	elementHeight: null,
	elementEmptyWidth: null,
	elementEmptyHeight: null,
	elementInitialMarginTop: null,

	contentElement: null,

	contentWrapperElement: null,
	contentWrapperElementWidth: null,
	contentWrapperElementHeight: null,

	closeElement: null,
	titleElement: null,

	status: null,

	initialize: function() {
		this.element = $('ctWorkItem');
		this.id = this.element.identify();
		this.element.show();

		this.status = new CtComponent_SimpleMessage();

		var dimensions = this.element.getDimensions();
		this.elementWidth = dimensions.width;
		this.elementHeight = dimensions.height;
		this.elementMarginLeft = 0;
		this.elementMarginTop = 0;

		this.contentWrapperElement = this.element.down('span.cc');
		dimensions = this.contentWrapperElement.getDimensions();
		this.contentWrapperElementWidth = dimensions.width;
		this.contentWrapperElementHeight = dimensions.height;

		this.contentElement = this.element.down('div.content');
//		this.contentElement = new Element('div');
//		this.contentWrapperElement.update(this.contentElement);

		this.contentWrapperElement.setStyle({height: '0px'});

		dimensions = this.element.getDimensions();
		this.elementEmptyWidth = 66; //dimensions.width;
		this.elementEmptyHeight = dimensions.height;


		this.elementHiddenMarginLeft = this.elementWidth / 2 - this.elementEmptyWidth / 2;
		this.elementHiddenMarginTop = this.elementHeight / 2 - this.elementEmptyHeight / 2;


		this.element.setStyle({width: '0px', height: '0px', marginTop: this.elementHiddenMarginTop + 'px', marginLeft: this.elementHiddenMarginLeft + 'px'});

		this.element.hide();

		this.titleElement = this.element.down('h1');
		this.closeElement = this.element.down('a.ct-close');
		this.closeElement.observe('click', this.hide.bind(this));

		this.element.observe('CtWorkItem:open', this.openHandler.bindAsEventListener(this));


		CtPage.addComponent(this);
	},

	refresh: function(response) {
		if (response.json && response.json.messages && response.json.messages.length > 0) {
			this.status.refresh(response);
			this.content = this.status.element;
		} else {
			this.content = response.content;
		}
		if (this.effectFinished === true) {
			this.afterRefresh();
		}
	},

	content: null,
	effectFinished: null,
	ctWork: null,

	afterRefresh: function() {
		this.contentWrapperElement.removeClassName('loader');

		this.titleElement.update(this.titleElement.readAttribute('title'));
		this.contentElement.show();
		this.contentElement.setOpacity(0);
		this.contentElement.update(this.content);
		this.ctWork = null;
		this.ctWork = new CtWork(this.contentElement);
		new Effect.Opacity(this.contentElement, {to: 1, duration: 0.2, queue: {scope: this.id, position: 'end'}});

		this.content = null;
		this.effectFinished = null;
	},


	openHandler: function(event) {
		Event.stop(event);
		this.titleElement.update('');
		this.titleElement.writeAttribute('title', event.memo.name);
		this.contentElement.hide();
		this.show();


		var request = CtPage.getRequest(this.id, 'ajax');
		request.url = '/work/item';
		request.options.parameters = {idWork: event.memo.idWork};
		request.send();
	},

	show: function() {
		Effect.Queues.get(this.id).each(function(effect) { effect.cancel(); });
		this.element.setOpacity(0);
		this.element.show();

		var toElementStyle = {width: this.elementWidth + 'px', height: this.elementHeight + 'px', marginTop: this.elementMarginTop + 'px', marginLeft: this.elementMarginLeft + 'px', opacity: 1};
		var fromElementStyle = {width: this.elementEmptyWidth + 'px', height: this.elementEmptyHeight + 'px', marginTop: this.elementHiddenMarginTop + 'px', marginLeft: this.elementHiddenMarginLeft + 'px'};

		this.element.setStyle(fromElementStyle);
		new Effect.Parallel([
			new Effect.Morph(this.element, {sync: true, style: toElementStyle}),
			new Effect.Morph(this.contentWrapperElement, {sync: true, style: {height: this.contentWrapperElementHeight + 'px'}})
		], {duration: 0.6, fps: 50, /*transition: Effect.Transitions.spring, */queue: {scope: this.id, position: 'end'}, afterFinish: function() {
			this.effectFinished = true;
			if (this.content !== null) {
				this.afterRefresh();
			}
		}.bind(this)});
	},

	hide: function() {
		Effect.Queues.get(this.id).each(function(effect) { effect.cancel(); });

		if (!this.element.visible()) {
			return;
		}

		var toElementStyle = {width: this.elementEmptyWidth + 'px', height: this.elementEmptyHeight + 'px', marginTop: this.elementHiddenMarginTop + 'px', marginLeft: this.elementHiddenMarginLeft + 'px', opacity: 0};

		new Effect.Opacity(this.contentElement, {to: 0, duration: 0.2, queue: {scope: this.id, position: 'end'}, afterFinish: function(){this.contentElement.update(''); this.contentElement.hide(); this.titleElement.update('');}.bind(this)});
		new Effect.Parallel([
			new Effect.Morph(this.element, {sync: true, style: toElementStyle}),
			new Effect.Morph(this.contentWrapperElement, {sync: true, style: {height: '0px'}})
		], {duration: 0.4, fps: 50, /*transition: Effect.Transitions.linear, */queue: {scope: this.id, position: 'end'}, afterFinish: function(){this.element.hide(); this.contentWrapperElement.addClassName('loader'); }.bind(this)});
	},

	x: null

});




var CtMenu_Content = Class.create({

	element: null,
	id: null,
	elementWidth: null,
	elementHeight: null,
	elementEmptyWidth: null,
	elementEmptyHeight: null,
	elementInitialMarginTop: null,

	contentWrapperElement: null,
	contentWrapperElementWidth: null,
	contentWrapperElementHeight: null,

	contentElement: null,
	contentElementWidth: null,
	contentElementHeight: null,

	closeElement: null,

	initialize: function(htmlElement) {
		this.element = $(htmlElement);
		this.id = this.element.identify();
		this.element.show();

		var dimensions = this.element.getDimensions();
		this.elementWidth = dimensions.width;
		this.elementHeight = dimensions.height;

		this.contentWrapperElement = this.element.down('span.cc');
		dimensions = this.contentWrapperElement.getDimensions();
		this.contentWrapperElementWidth = dimensions.width;
		this.contentWrapperElementHeight = dimensions.height;

		this.contentWrapperElement.setStyle({height: '0px'/*, width: '0px'*/});


		this.contentElement = this.element.down('div.content').hide();


		dimensions = this.element.getDimensions();
		this.elementEmptyWidth = 66; //dimensions.width;
		this.elementEmptyHeight = dimensions.height;

		this.elementInitialMarginTop = this.element.getStyle('marginTop');

		this.element.setStyle({width: '0px', height: '0px'});

		this.element.hide();

		this.closeElement = this.element.down('a.ct-close');
		this.closeElement.observe('click', this.hide.bind(this));
	},

	show: function() {
		Effect.Queues.get(this.id).each(function(effect) { effect.cancel(); });
		this.element.setOpacity(0);
		this.element.show();
		this.contentElement.hide();

		var toElementStyle = {width: this.elementWidth + 'px', height: this.elementHeight + 'px', opacity: "1"};
		var fromElementStyle = {width: this.elementEmptyWidth + 'px', height: this.elementEmptyHeight + 'px', opacity: "0"};
		if (this.element.hasClassName('r')) {
			fromElementStyle.marginTop = '-58px';
			toElementStyle.marginTop = this.elementInitialMarginTop;
		}
		this.element.setStyle(fromElementStyle);
		new Effect.Parallel([
			new Effect.Morph(this.element, {sync: true, style: toElementStyle} ),
			new Effect.Morph(this.contentWrapperElement, {sync: true, style: {height: this.contentWrapperElementHeight + 'px'/*, width: this.contentWrapperElementWidth + 'px'*/} })
		], {duration: 0.4, queue: {scope: this.id, position: 'end'}, afterFinish: function(){
			this.contentWrapperElement.removeClassName('loader');
			this.contentElement.show();
		}.bind(this)});
		new Effect.Opacity(this.contentElement, {to: 1, duration: 0.2, queue: {scope: this.id, position: 'end'}});
	},

	hide: function() {
		Effect.Queues.get(this.id).each(function(effect) { effect.cancel(); });

		if (!this.element.visible()) {
			return;
		}

		var toElementStyle = {width: this.elementEmptyWidth + 'px', height: this.elementEmptyHeight + 'px', opacity: "0"};
		if (this.element.hasClassName('r')) {
			toElementStyle.marginTop = '-58px';
		}

		new Effect.Opacity(this.contentElement, {to: 0, duration: 0.2, queue: {scope: this.id, position: 'end'}, afterFinish: function(){this.contentElement.hide()}.bind(this)});
		new Effect.Parallel([
			new Effect.Morph(this.element, {sync: true, style: toElementStyle}),
			new Effect.Morph(this.contentWrapperElement, {sync: true, style: {/*width: '0px',*/ height: '0px'}})
		], {duration: 0.4, queue: {scope: this.id, position: 'end'}, afterFinish: function(){this.element.hide(); this.contentWrapperElement.addClassName('loader')}.bind(this)});
	},

	x: null

});

var CtMenu = Class.create({

	linkElements: [],

	initialize: function() {
		this.linkElements = [];

		this.linkElements = $$('a.caption');
		for (var i = 0; i < this.linkElements.length; i++) {
			this.linkElements[i].linkContainer = this.linkElements[i].up('div.ct-left');
			this.linkElements[i].linkContainer.oldStyle = {top: this.linkElements[i].linkContainer.getStyle('top'), left: this.linkElements[i].linkContainer.getStyle('left')};

			this.linkElements[i].content = new CtMenu_Content(this.linkElements[i].readAttribute('rel'));
			this.linkElements[i].linkContainer.setStyle({cursor: 'pointer'});
			this.linkElements[i].linkContainer.observe('click', this.clickHandler.bindAsEventListener(this, i));
			this.linkElements[i].linkContainer.observe('mouseenter', this.mouseenterHandler.bindAsEventListener(this, i));
		}
	},

	clickHandler: function(event, index) {
		if (Event.element(event) == this.linkElements[index].content.element || Event.element(event).descendantOf(this.linkElements[index].content.element)) {
			return;
		}

		for (var i = 0; i < this.linkElements.length; i++) {
			if (i != index) {
				this.linkElements[i].content.hide();
			} else {
				this.linkElements[i].content.show();
			}
		}
	},

	mouseenterHandler: function(event, index) {
		if (this.linkElements[index].content.element.visible()) {
			return;
		}

		var scope = 'shake' + index;
		Effect.Queues.get(scope).each(function(effect) {
			if (effect.finish) {
				effect.finish();
			} else {
				effect.cancel();
			}
		});
		this.linkElements[index].linkContainer.undoPositioned().setStyle(this.linkElements[index].linkContainer.oldStyle);

		var distance = 3;
		var duration = 0.25;
		var split = duration / 4;

		new Effect.Move(this.linkElements[index].linkContainer, {x: -distance, y: 0, duration: split, queue: {scope: scope, position: 'end'}});
		new Effect.Move(this.linkElements[index].linkContainer, {x: distance*1.5, y: 0, duration: split*2, queue: {scope: scope, position: 'end'}});
		new Effect.Move(this.linkElements[index].linkContainer, {x: -distance*0.5, y: 0, duration: split, queue: {scope: scope, position: 'end'}, afterFinishInternal: function(effect) {effect.element.undoPositioned().setStyle(effect.element.oldStyle);}});
	},


	x: null
});



































var CtRecentWork = Class.create({

	element: null,
	id: null,
	parameters: null,

	image: null,
	items: [],
//	parameters: null,

	multiplier: 3,
	count: 6,

	initialize: function() {
		this.element = $('ctRecentWork');
		if (this.element == null) {
			return;
		}

		this.id = this.element.identify();
		this.element.show();
		this.items = [];

		try {
			this.parameters = this.element.readAttribute('title').evalJSON(true);
		} catch (ex) {
			this.parameters = {};
		}
		this.element.writeAttribute('title', null);
		this.wrapper = this.element.down('.wrapper');
		this.image = this.wrapper.down('img');

		this.element.show();
		this.image.store('width', this.image.getWidth());
		this.image.store('height', this.image.getHeight());


		var src = this.image.readAttribute('src');
		for (var i = 0; i < this.count; i++) {
			this.items[i] = new Element('img', {src: src});
			this.wrapper.insert(this.items[i]);

			this.items[i].store('index', i);
			this.items[i].store('width', this.image.retrieve('width') + (i + 1) * this.multiplier * 2);
			this.items[i].store('height', this.image.retrieve('height') + (i + 1) * this.multiplier * 2);
			this.items[i].store('opacity', 3 / (i+4));
			this.items[i].store('maxX', (i + 1) * this.multiplier * 2);
			this.items[i].store('maxY', (i + 1) * this.multiplier * 2);
			this.items[i].store('left', - (i + 1) * this.multiplier);
			this.items[i].store('top', - (i + 1) * this.multiplier);
			this.items[i].setStyle({
				width: this.items[i].retrieve('width') + 'px',
				height: this.items[i].retrieve('height') + 'px',
				left: this.items[i].retrieve('left') + 'px',
				top: this.items[i].retrieve('top') + 'px',
				position: 'absolute',
				opacity: 0
			});

//			e(this.items[i].retrieve('opacity'));
//			e(this.items[i]);
		}

		this.element.observe('click', this.clickHandler.bindAsEventListener(this));
		this.element.observe('mouseenter', this.mouseenterHandler.bindAsEventListener(this));
		this.element.observe('mouseleave', this.mouseleaveHandler.bindAsEventListener(this));
		this.element.observe('mousemove', this.mousemoveHandler.bindAsEventListener(this));


//		e(this.image.retrieve('width'), this.image.retrieve('height'));


	},

	clickHandler: function(event) {
		Event.stop(event);
		$('ctWorkItem').fire('CtWorkItem:open', this.parameters);
	},


	mouseenterHandler: function(event) {
		var currentX = event.pointerX() - this.image.cumulativeOffset().left;
		var currentY = event.pointerY() - this.image.cumulativeOffset().top;
		var percentX = currentX / this.image.retrieve('width');
		var percentY = currentY / this.image.retrieve('height');

		for (var i = 0; i < this.items.length; i++) {
			Effect.Queues.get('transform' + i).each(function(effect) {effect.cancel();});
			var left = - this.items[i].retrieve('maxX') * percentX;
			var top = - this.items[i].retrieve('maxY') * percentY;
			this.items[i].setStyle({
				left: left + 'px',
				top: top + 'px',
				opacity: this.items[i].retrieve('opacity')
			});
		}
		this.image.setOpacity(0.5);
	},


	mouseleaveHandler: function(event) {
		for (var i = 0; i < this.items.length; i++) {
			new Effect.Parallel ([
				new Effect.Morph(this.items[i], {
					sync: true,
					style: {
						left: this.items[i].retrieve('left') + 'px',
						top: this.items[i].retrieve('top') + 'px',
						opacity: 0
					}
				}),
				new Effect.Opacity(this.image, {sync: true, to: 1})
			], {
				duration: 0.2,
				queue: {scope: 'transform' + i, position: 'end'}
			});
		}
	},


	mousemoveHandler: function(event) {
		var currentX = event.pointerX() - this.image.cumulativeOffset().left;
		var currentY = event.pointerY() - this.image.cumulativeOffset().top;
		var percentX = currentX / this.image.retrieve('width');
		var percentY = currentY / this.image.retrieve('height');
		for (var i = 0; i < this.items.length; i++) {
			var left = - this.items[i].retrieve('maxX') * percentX;
			var top = - this.items[i].retrieve('maxY') * percentY;
			this.items[i].setStyle({
				left: left + 'px',
				top: top + 'px'
			});
		}
	},



	x: null

});