var CtWork_Item = Class.create({

	element: null,
	id: null,

	index: null,
	parameters: null,

	elementWidth: null,
	elementHeight: null,
	elementLeft: null,

	elementWidthOrig: null,
	elementHeightOrig: null,

	isCached: false,

	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', '');
		} catch (ex) {
			return;
		}
		this.element.observe('click', function(event) {
			Event.stop(event);
			this.element.fire('CtWork_Item:click', this.parameters);
		}.bindAsEventListener(this));

		this.isCached = false;
		this.elementRatio = this.elementWidthOrig / this.elementHeightOrig;
		this.refreshDimensions();
		Event.observe(window, 'resize', this.refreshDimensions.bindAsEventListener(this));
		this.refreshDimensions();
	},

	refreshDimensions: function() {
		var viewportDimensions = document.viewport.getDimensions();
		var height = viewportDimensions.height - 180;

		this.elementHeight = (height > this.parameters.height) ? this.parameters.height : height;
		this.elementTop = (height - this.elementHeight) / 2;
		this.elementWidth = this.elementHeight * this.parameters.width / this.parameters.height;
		this.elementLeft = -this.elementWidth / 2;

		this.element.setStyle({width: this.elementWidth + 'px', height: this.elementHeight + 'px', left: this.elementLeft + 'px', top: 	this.elementTop + 'px'});
	},


	tmpImage: null,
	preload: function(callback) {
		if (!callback) {
			callback = Prototype.emptyFunction;
		}

		if (!this.isCached) {
			this.tmpImage = new Element('img', {className: 'hidden'});
			$(document.body).insert(this.tmpImage);
			this.tmpImage.onload = function() {
				this.element.writeAttribute('src', this.parameters.imagePath);
				this.element.removeClassName('loader');
				this.isCached = true;
				this.tmpImage.remove();
				this.tmpImage = null;
				callback();
			}.bind(this);
			this.tmpImage.src = this.parameters.imagePath;
		} else {
			callback();
		}
	},


	effectShow: function(ident, direction) {

		var delta = 0;
		if (direction > 0) {
			delta = -(document.viewport.getWidth() + this.elementWidth);
		} else {
			delta = document.viewport.getWidth();
		}

		this.element.setStyle({left: delta + 'px', opacity: 0});

		this.element.show();
		this.preload();
		new Effect.Morph(this.element, {duration: 0.3, style: {left: this.elementLeft + 'px', opacity: 1}, queue: {scope: ident, position: 'end'}});
	},

	effectHide: function(ident, direction) {
		var delta = 0;
		if (direction > 0) {
			delta = document.viewport.getWidth();
		} else {
			delta = -(document.viewport.getWidth() + this.elementWidth);
		}

		this.element.setStyle({left: this.elementLeft + 'px', opacity: 1});
		new Effect.Morph(this.element, {duration: 0.3, style: {left: delta + 'px', opacity: 0}, queue: {scope: ident, position: 'end'}, afterFinish: function() {
			this.element.hide();
			this.element.setStyle({
				left: this.elementLeft + 'px',
				opacity: 0
			});
		}.bind(this)});
	},


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

	show: function() {
		this.element.show();
		this.preload();
	},

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


	x: null

});

var CtWork = Class.create({

	element: null,
	id: null,


	buttonPreviousElement: null,
	buttonNextElement: null,
	items: null,
	itemsMap: null,
	currentItem: null,

	descriptionElement: null,
	descriptionHeaderElement: null,

	navigation: null,

	initialize: function(htmlElement) {
		$(document.body).setStyle({overflow: 'hidden'});

		this.element = $(htmlElement);
		if (this.element == null) {
			return;
		}
		this.id = this.element.identify();

		this.items = [];
		this.itemsMap = new Hash();



		/*
		* Restore position
		* */
		var restore = {w: 0, p: 0};
		try {
			var restoreHash = location.hash.replace('#', '').toQueryParams();
			if (restoreHash.w != undefined) {
				restore.w = restoreHash.w;
				if (restoreHash.p != undefined) {
					restore.p = restoreHash.p;
				}
			}
		} catch (ex) {
		}

		this.currentItem = 0;
		var restoreItem = 0;
		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);

			if (this.itemsMap.get(this.items[i].parameters.idWork) == undefined) {
				this.itemsMap.set(this.items[i].parameters.idWork, new Hash());
			}
			this.itemsMap.get(this.items[i].parameters.idWork).set(this.items[i].parameters.idPage, i);

			if (this.items[i].parameters.idWork == restore.w && this.items[i].parameters.idPage == restore.p) {
				restoreItem = i;
			}
		}

		this.buttonPreviousElement = this.element.down('a.navigation.previous').hide();
		this.buttonNextElement = this.element.down('a.navigation.next').show();

		this.descriptionContainerElement = $('ctWorkDecription');
		new Draggable(this.descriptionContainerElement, {
			zindex: 10002,
			starteffect: function(element) {Draggable._dragging[element] = true;},
			endeffect: function(element) {Draggable._dragging[element] = false;}
		});

		this.descriptionElement = this.descriptionContainerElement.down('div.content').update(this.items[this.currentItem].parameters.text);
		this.descriptionHeaderElement = this.descriptionContainerElement.down('div.header').update(this.items[this.currentItem].parameters.workName);

		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('CtWork_Item:click', function(event) {
//			e(event.memo);
			this.scrollToNext();
		}.bindAsEventListener(this));

		$(document.body).observe('CtPageNavigation:click', function(event) {
			this.scrollTo(this.itemsMap.get(event.memo.idWork).get(event.memo.idPage));
		}.bindAsEventListener(this));

		$(document.body).observe('CtWorkNavigation:click', function(event) {
			this.scrollTo(this.itemsMap.get(event.memo.idWork).get(this.itemsMap.get(event.memo.idWork).keys()[0]));
		}.bindAsEventListener(this));


		if (restoreItem) {
			this.scrollTo(restoreItem);
		} else {
			if (this.currentItem + 1 < this.items.length) {
				this.buttonNextElement.show();
				this.items[this.currentItem].setLast(false);
				this.items[this.currentItem + 1].preload();
			}
			this.items[this.currentItem].show();
			this.element.fire('CtWork:scrollTo', this.items[this.currentItem].parameters);
		}


		Event.observe(window, 'resize', this.refreshDimensions.bindAsEventListener(this));
		this.refreshDimensions();
	},

	refreshDimensions: function() {
		var viewportDimensions = document.viewport.getDimensions();
		var elementWidth = viewportDimensions.width;
		var elementHeight = viewportDimensions.height - 180;
		this.element.setStyle({width: elementWidth + 'px', height: elementHeight + 'px'});
	},


	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;
		}

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

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

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

		this.descriptionHeaderElement.update(this.items[index].parameters.workName);

		var description = this.items[index].parameters.text;
		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)
		});

		this.currentItem = index;
		this.element.fire('CtWork:scrollTo', this.items[this.currentItem].parameters);

		/*
		* Save position
		* */
		location.hash = Object.toQueryString({w: this.items[this.currentItem].parameters.idWork, p: this.items[this.currentItem].parameters.idPage});
	},

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

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



	x: null
});

CtPage.registerScript('CtWork');



















var CtPageNavigation_Item = Class.create({
	element: null,
	id: null,

	parameters: null,

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

		this.element.writeAttribute('title', this.parameters.idPage);

		this.element.observe('click', function(event) {
			Event.stop(event);
			this.element.fire('CtPageNavigation:click', this.parameters);
		}.bindAsEventListener(this));
	},

	refreshActive: function(parameters) {
		this.setActive(parameters.idWork == this.parameters.idWork && parameters.idPage == this.parameters.idPage);
	},

	setActive: function(isActive) {
		if (isActive) {
			this.element.addClassName('active');
		} else {
			this.element.removeClassName('active');
		}
	}


});
var CtPageNavigation = Class.create({

	container: null,
	element: null,
	id: null,

	items: null,
	isActive: false,

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


		$H(items).each(function(item) {
			var itemLink = new Element('a', {href: 'javascript:void(0)', className: 'page'});
			this.element.insert(itemLink);
			this.items.set(item.key, new CtPageNavigation_Item(itemLink, item.value));
		}.bind(this));

		this.element.insert(new Element('div', {className: 'clr'}));

		$(document.body).observe('CtWork:scrollTo', function(event) {
			this.items.each(function(item) {
				item.value.refreshActive(event.memo);
			}.bind(this));
		}.bindAsEventListener(this));

		this.hide();
	},


	show: function() {
		if (this.element == null) {
			return;
		}
		this.element.show();
		this.isActive = true;
	},

	hide: function() {
		if (this.element == null) {
			return;
		}
		this.element.hide();
		this.isActive = false;
	},

	x: null

});




var CtWorkNavigation_Item = Class.create({
	element: null,
	id: null,

	linkElement: null,
	pageNavigation: null,
	parameters: null,

	leftOffset: null,


	initialize: function(htmlElement) {
		this.element = $(htmlElement);
		this.id = this.element.identify();
		this.linkElement = this.element.down('a');

		try {
			this.parameters = this.linkElement.readAttribute('title').evalJSON(true);
			this.linkElement.writeAttribute('title', null);
		} catch (ex) {
			return;
		}
		this.leftOffset = this.linkElement.getWidth() / 2 + this.linkElement.positionedOffset().left;
		this.linkElement.observe('mouseover', function(event) {
			this.element.fire('CtWorkNavigation_Item:mouseover', {leftOffset: this.leftOffset, name: this.parameters.name});
		}.bindAsEventListener(this));

		this.linkElement.observe('mouseout', function(event) {
			this.element.fire('CtWorkNavigation_Item:mouseout');
		}.bindAsEventListener(this));


		this.linkElement.observe('click', function(event) {
			Event.stop(event);
			this.element.fire('CtWorkNavigation:click', this.parameters);
		}.bindAsEventListener(this));

		var navigationElement = new Element('div');
		$('ctPageNavigation').insert(navigationElement);

		this.pageNavigation = new CtPageNavigation(navigationElement, this.parameters.items);
	},

	refreshActive: function(parameters) {
		this.setActive(parameters.idWork == this.parameters.idWork);
	},

	setActive: function(isActive) {
		if (isActive) {
			this.element.addClassName('active');
			this.pageNavigation.show();

			$('ctWork').writeAttribute('style', null);
			$(document.body).writeAttribute('style', null);
			$(document.body).setStyle({overflow: 'hidden'});


			if (this.parameters.stylePrepared.work.length > 0) {
				$('ctWork').setStyle("background: " + this.parameters.stylePrepared.work);
			}
			if (this.parameters.stylePrepared.body.length > 0) {
				$(document.body).setStyle("background: " + this.parameters.stylePrepared.body);
			}
			$(document.body).className = this.parameters.stylePrepared.bodyClass;
		} else {
			this.element.removeClassName('active');
			this.pageNavigation.hide();
		}


	}


});
var CtWorkNavigation = Class.create({

	element: null,
	id: null,

	index: null,
	parameters: null,
	popupElement: null,

	items: null,

	initialize: function(htmlElement) {
		this.element = $(htmlElement);
		this.id = this.element.identify();
		this.popupElement = this.element.down('div.popup');
		this.popupElement.contentElement = this.popupElement.down('div.content');
		this.popupElement.show();
//		this.popupElement.elementWidth = parseInt(this.popupElement.getStyle('width'));
		this.popupElement.elementWidth = this.popupElement.getWidth();
		this.popupElement.hide();

		this.items = new Hash();

		var items = this.element.select('li');
		items.each(function(item) {
			var ctWorkNavigationItem = new CtWorkNavigation_Item(item);
			this.items.set(ctWorkNavigationItem.parameters.idWork, ctWorkNavigationItem);
		}.bind(this));

		this.element.observe('CtWorkNavigation_Item:mouseover', function(event) {
			Effect.Queues.get(this.id).each(function(effect) { effect.cancel(); });
			var left = this.popupElement.elementWidth / 2 - event.memo.leftOffset;
			this.popupElement.contentElement.update(event.memo.name);
			this.popupElement.setStyle({left: event.memo.leftOffset - this.popupElement.elementWidth / 2 + 'px'});
			this.popupElement.appear({duration: 0.3, queue: {scope: this.id, position: 'end'}});
		}.bindAsEventListener(this));

		this.element.observe('CtWorkNavigation_Item:mouseout', function(event) {
			Effect.Queues.get(this.id).each(function(effect) { effect.cancel(); });
			this.popupElement.fade({duration: 0.3, queue: {scope: this.id, position: 'end'}});
		}.bindAsEventListener(this));


		$(document.body).observe('CtWork:scrollTo', function(event) {
			this.items.each(function(item) {
				item.value.refreshActive(event.memo);
			}.bind(this));
		}.bindAsEventListener(this));

	},




	x: null

});
CtPage.registerScript('CtWorkNavigation');