var Overlay = new Class({
	options: {
		opacity: 0.7,
		duration: 300
	},

	initialize: function(name, options) {
		this.setOptions(options);
		this.showing = false;
		this.dashboard = new Element('div', {
			'id': name,
			'class': 'dashboard',
			'styles': {
				'visibility': 'hidden'
			},
			'events': {
				'click': this.hide.bindWithEvent(this)
			}
		}).injectInside(document.body);

		// IE6 select z-order hack:
		// http://shepherdweb.com/2007/02/14/z-index-ignored-for-select-element-in-ie-6-workaround/
		if (window.ie6) {
			var ieHack = new Element('iframe', {
				'class': 'ie6SelectHider'
			}).injectInside(this.dashboard);
		}

		this.overlay = new Element('div', {
			'class': 'overlay',
			'style': {
				'opacity': 0
			}
		}).injectInside(this.dashboard);

		this.overlayFx = new Fx.Styles(this.overlay, {
			duration: this.options.duration,
			onComplete: function() {
				if (!this.showing) {
					this.dashboard.setStyle('visibility', 'hidden');
					this.hidden();
				}
			}.bind(this)
		});
		window.addEvents({
			'resize': this.update.bind(this),
			'scroll': this.update.bind(this)
		});
	},
	show: function() {
		if (!this.showing) {
			this.showing = true;
			this.update();
			this.dashboard.setStyle('visibility', 'visible');
			this.overlayFx.start({
				'opacity': [0, this.options.opacity]
			});
		}
	},
	hide: function(e) {
		var e = new Event(e).stop();

		if (this.showing) {
			this.overlayFx.start({
				opacity: [this.options.opacity, 0]
			});
			this.showing = false;
			this.hiding();
		}
	},
	hiding: function() {
	},
	hidden: function() {
	},
	update: function() {
		if (this.showing) {
			this.dashboard.setStyle('height', Window.getScrollHeight());
			this.overlay.setStyle('height', Window.getScrollHeight());
		}
	}
});
Overlay.implement(new Options, new Events);


Gallery = Overlay.extend({

	options: {
		trigger: 'gallery',
		url: getBaseUrl() + 'index.php/products/gallery/',
		thumbnailWidth: 64,
		thumbnailHeight: 64,
		borderWidth: 60,
		borderHeight: 70
	},

	initialize: function(name, options) {
		this.parent(name, options);

		$$('a').each(function(x) {
			if (x.rel == this.options.trigger) {
				x.addEvent('click', this.showGallery.bindWithEvent(this));
			}
		}.bind(this));

		this.spinner = new Element('img', {
			'src': 'images/spinner.gif',
			'alt': 'loading...',
			'class': 'spinner'
		}).injectInside(this.overlay);

		this.thumbnails = new Element('div', {
			'class': 'thumbnails'
		}).injectInside(this.dashboard);

		this.imager = new Element('div', {
			'class': 'imager',
			'styles': {
				'visibility': 'hidden',
				'width': 400
			}
		}).injectInside(this.dashboard);

		this.img = new Element('img');
		this.img.addEvent('load', function() {
			this.update();
			this.spinner.setStyle('visibility', 'hidden');
			this.imager.setStyle('visibility', 'visible');
		}.bind(this));
		this.img.injectInside(this.imager);
		this.title = new Element('p').injectInside(this.imager);

		var imgClose = new Element('img', {
			'src': 'images/close.gif',
			'class': 'close',
			'alt': 'bezár',
			'title': 'bezár'
		}).injectInside(this.imager);

		this.currentImg = -1;
		this.request = null;
	},
	showGallery: function(e) {
		var e = new Event(e).stop();

		var id = this.getURL(e.target);

		this.request = new Json.Remote(this.options.url + id, {
			onComplete: this.populate.bind(this)
		}).send();

		this.show();
		this.spinner.setStyle('visibility', 'visible');
	},
	getURL: function(obj) {
		if (obj.nodeName.toLowerCase() == "img")
			return obj.getProperty('id');
		else
			return $(obj.firstChild).getProperty('id');
	},
	update: function() {
		if (this.showing) {
			if (this.currentImg > -1) {
				var size = this.resize(
					this.currentImg,
					Window.getWidth() - this.options.borderWidth,
					Window.getHeight() - this.thumbnails.getSize().size.y - this.options.borderHeight
				);
				this.img.setStyles({
					'width': size.x,
					'height': size.y
				});
				this.imager.setStyle('width', size.x + 4);
			}
			this.dashboard.setStyle('height', Window.getScrollHeight());
			this.overlay.setStyle('height', Window.getScrollHeight());
			this.spinner.setStyles({
				'top': Window.getScrollTop() + Window.getHeight() / 2,
				'left': Window.getScrollLeft() + Window.getWidth() / 2
			});
			this.imager.setStyles({
				'top': Window.getScrollTop() + Window.getHeight() / 2 - this.imager.getSize().size.y / 2 - 30,
				'left': Window.getScrollLeft() + Window.getWidth() / 2 - this.imager.getSize().size.x / 2
			});
			this.thumbnails.setStyles({
				'top': Window.getScrollTop() + Window.getHeight() - this.thumbnails.getSize().size.y,
				'left': Window.getScrollLeft() + Window.getWidth() / 2 - this.thumbnails.getSize().size.x / 2
			});
		}
	},
	hiding: function() {
		this.thumbnails.setStyle('visibility', 'hidden');
		this.thumbnails.empty();
		this.spinner.setStyle('visibility', 'hidden');
		this.imager.setStyle('visibility', 'hidden');
		this.currentImg = -1;
		if (this.request) {
			this.request.cancel();
			this.request = null;
		}
	},
	hidden: function() {
	},
	populate: function(jsonObj) {
		if (!this.showing) return;

		this.request = null;

		this.spinner.setStyle('visibility', 'hidden');

		this.pictures = jsonObj.pictures;

		for (var i = 0; i < jsonObj.pictures.length; i++) {
			var size = this.resize(i, this.options.thumbnailWidth, this.options.thumbnailHeight);
			var img = new Element('img', {
				'id': i,
				'src': jsonObj.pictures[i].thumbnail,
				'title': jsonObj.pictures[i].title,
				'styles': {
					'width': size.x,
					'height': size.y
				}
			});
			img.injectInside(this.thumbnails);
			img.addEvent('click', function(e) {
				var e = new Event(e).stop();
				this.showImage(e.target.getProperty('id'));
			}.bindWithEvent(this));
		}
		this.thumbnails.setStyle('visibility', 'visible');

		this.showImage(0);

		this.update();
	},
	resize: function(i, maxWidth, maxHeight) {
		var w = this.pictures[i].width;
		var h = this.pictures[i].height;
		var aspect = h / w;

		var size = {
			x: w,
			y: h
		};

		if (size.x > maxWidth) {
			size.x = maxWidth;
			size.y = size.x * aspect;
		}

		if (size.y > maxHeight) {
			size.y = maxHeight;
			size.x = size.y / aspect;
		}

		return size;
	},
	showImage: function(i) {
		if (this.currentImg == i) return;

		this.currentImg = i;

		this.imager.setStyle('visibility', 'hidden');
		this.spinner.setStyle('visibility', 'visible');
		this.img.src = this.pictures[i].src;
		this.title.setText(this.pictures[i].title);
		this.update();
	}
});

Feature = Overlay.extend({

	options: {
		trigger: 'feature',
		url: getBaseUrl() + 'index.php/products/feature/',
		thumbnailWidth: 64,
		thumbnailHeight: 64
	},

	initialize: function(name, options) {
		this.parent(name, options);

		$$('a').each(function(x) {
			if (x.rel == this.options.trigger) {
				x.addEvent('click', this.showFeatures.bindWithEvent(this));
			}
		}.bind(this));

		this.spinner = new Element('img', {
			'src': 'images/spinner.gif',
			'alt': 'loading...',
			'class': 'spinner'
		}).injectInside(this.overlay);

		this.feature = new Element('div', {
			'class': 'feature',
			'styles': {
				'visibility': 'hidden',
				'width': '400px'
			}
		}).injectInside(this.dashboard);

		this.picDiv = new Element('div', {
			'class': 'pic'
		}).injectInside(this.feature);

		this.pic = new Element('img').injectInside(this.picDiv);
		this.pic.addEvent('load', function() {
			this.update();
		}.bind(this));

		this.info = new Element('div', {
			'class': 'info'
		}).injectInside(this.feature);

		this.imgClose = new Element('img', {
			'src': 'images/close.gif',
			'class': 'close',
			'alt': 'bezár',
			'title': 'bezár'
		}).injectInside(this.feature);

		this.thumbnails = new Element('div', {
			'class': 'thumbnails'
		}).injectInside(this.dashboard);
	},
	showFeatures: function(e) {
		var e = new Event(e).stop();

		var id = this.getURL(e.target);
		var product_id = id.substr(0, id.indexOf('#'));
		this.currentIndex = id.substr(id.indexOf('#') + 1);

		this.info.empty();
		this.thumbnails.empty();
		this.pic.src = 'images/blank.gif';
		this.pic.setStyles({
			'width': '',
			'height': ''
		});

		this.request = new Json.Remote(this.options.url + product_id, {
			onComplete: function(jsonObj) {
				this.request = null;

				this.features = jsonObj.features;

				this.feature.setStyle('visibility', 'visible');
				this.thumbnails.setStyle('visibility', 'visible');
				this.spinner.setStyle('visibility', 'hidden');

				for (var i = 0; i < this.features.length; i++) {
					var size = this.resize(i, this.options.thumbnailWidth, this.options.thumbnailHeight);
					var img = new Element('img', {
						'id': i,
						'src': this.features[i].icon,
						'alt': '',
						'styles': {
							'width': size.x,
							'height': size.y
						}
					});
					img.injectInside(this.thumbnails);
					img.addEvent('click', function(e) {
						var e = new Event(e).stop();
						this.showFeature(e.target.getProperty('id'));
					}.bindWithEvent(this));
				}

				this.showFeature(this.currentIndex);

			}.bind(this)
		}).send();

		this.show();
		this.spinner.setStyle('visibility', 'visible');
	},
	showFeature: function(index) {
		this.pic.setStyles({
			'width': '',
			'height': ''
		});

		this.pic.src = this.features[index].picture;
		this.info.setHTML(this.features[index].info);

		this.currentIndex = index;

		this.update();
	},
	getURL: function(obj) {
		return obj.getProperty('id');
	},
	update: function() {
		if (this.showing) {
			this.dashboard.setStyle('height', Window.getScrollHeight());
			this.overlay.setStyle('height', Window.getScrollHeight());
			this.spinner.setStyles({
				'top': Window.getScrollTop() + Window.getHeight() / 2,
				'left': Window.getScrollLeft() + Window.getWidth() / 2
			});

			if (this.features) {

				this.thumbnails.setStyles({
					'top': Window.getScrollTop() + Window.getHeight() - this.thumbnails.getSize().size.y,
					'left': Window.getScrollLeft() + Window.getWidth() / 2 - this.thumbnails.getSize().size.x / 2
				});


				var size = this.resize(this.currentIndex,
					Window.getWidth() - 60,
					Window.getHeight() - 60 - this.imgClose.getCoordinates().height - this.info.getCoordinates().height - this.thumbnails.getCoordinates().height
				);

				this.pic.setStyles({
					'width': size.x.toInt(),
					'height': size.y.toInt()
				});

				var feature_width = size.x < 500 ? 500 : size.x + 20;

				this.feature.setStyle('width', feature_width);

				this.feature.setStyles({
					'top': Window.getScrollTop() + Window.getHeight() / 2 - this.feature.getSize().size.y / 2 - this.thumbnails.getSize().size.y / 2,
					'left': Window.getScrollLeft() + Window.getWidth() / 2 - this.feature.getSize().size.x / 2
				});
			}
		}
	},
	hiding: function() {
		this.feature.setStyle('visibility', 'hidden');
		this.spinner.setStyle('visibility', 'hidden');
		this.thumbnails.setStyle('visibility', 'hidden');
	},
	hidden: function() {
	},
	resize: function(i, maxWidth, maxHeight) {
		var w = this.features[i].width;
		var h = this.features[i].height;
		var aspect = h / w;

		var size = {
			x: w,
			y: h
		};

		if (size.x > maxWidth) {
			size.x = maxWidth;
			size.y = size.x * aspect;
		}

		if (size.y > maxHeight) {
			size.y = maxHeight;
			size.x = size.y / aspect;
		}

		return size;
	}
});

HtmlOverlay = Overlay.extend({

	initialize: function(name, options) {
		this.parent(name, options);

		this.wnd = new Element('div', {
			'class': 'wnd'
		}).injectInside(this.dashboard);

		this.content = new Element('div').injectInside(this.wnd);

		var imgClose = new Element('img', {
			'src': 'images/close.gif',
			'class': 'close',
			'alt': 'bezár',
			'title': 'bezár'
		}).injectInside(this.wnd);

		this.contentWidth = 0;
		this.contentHeight = 0;
	},
	showHtml: function(html, w, h) {
		this.content.empty();
		this.content.setHTML(html);

		this.contentWidth = w;
		this.contentHeight = h;

		this.show();
	},
	showDiv: function(div, w, h) {
		this.content.empty();
		$(div).clone().setStyle('display', 'block').injectInside(this.content);
		//this.content.setStyle('overflow-y', 'scroll');

		/*this.contentWidth = $(div).getSize().size.x;
		this.contentHeight = $(div).getSize().size.y;*/

		this.contentWidth = w;
		this.contentHeight = h;

		this.show();
	},
	update: function() {
		if (this.showing) {
			this.dashboard.setStyle('height', Window.getScrollHeight());
			this.overlay.setStyle('height', Window.getScrollHeight());

			this.content.setStyles({
				'width': this.contentWidth,
				'height': this.contentHeight
			});

			this.wnd.setStyles({
				'width': this.content.getSize().size.x + 4,
				'top': Window.getScrollTop() + Window.getHeight() / 2 -  this.content.getSize().size.y / 2,
				'left': Window.getScrollLeft() + Window.getWidth() / 2 -  this.content.getSize().size.x / 2
			});
		}
	},
	hiding: function() {
		this.content.empty();
	}
});

function getVideoHtml(url, width, height) {
	var height2 = height + 45;
	var str = '<div class="videoSpacer"></div>';
	str += '<object classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=9,0,0,0" width="'+width+'" height="'+height2+'" align="middle">';
	str += '<param name="allowScriptAccess" value="sameDomain" />';
	str += '<param name="allowFullScreen" value="false" />';
	str += '<param name="movie" value="videoPlayer.swf" />';
	str += '<param name="quality" value="high" />';
	str += '<param name="bgcolor" value="#fafafa" />';
	str += '<param name="flashVars" value="movieUrl='+url+'&movieWidth='+width+'&movieHeight='+height+'" />';
	str += '<embed src="videoPlayer.swf" quality="high" bgcolor="#ffffff" width="'+width+'" height="'+height2+'" flashVars="movieUrl='+url+'&movieWidth='+width+'&movieHeight='+height+'" align="middle" allowScriptAccess="sameDomain" allowFullScreen="false" type="application/x-shockwave-flash" pluginspage="http://www.macromedia.com/go/getflashplayer" />'
	str += '</object>';
	return str;
}

function videoInit() {
	var video = new HtmlOverlay('video');
	$$('a').each(function(x) {
		if (x.rel == 'video') {
			x.addEvent('click', function (e) {
				var e = new Event(e).stop();
				var s = e.target.getProperty('href');;
				movieUrl = s.substr(0, s.indexOf('?'));
				var params = new Object;
				s.substr(s.indexOf('?') + 1).split('&').forEach(function(item) {
					x = item.split('=');
					params[ x[0] ] = parseInt(x[1]);
				});

				video.showHtml(getVideoHtml(movieUrl, params.width, params.height), params.width, params.height + 25 + 45);
			});
		}
	});
}

window.addEvent('domready', function() {
	var gallery = new Gallery('gallery');
	var feature = new Feature('feature');
	videoInit();
});