document.ondragstart = function() { return false; };
//document.onselectstart = function() { return false; };
document.oncontextmenu = function() { return false; };

$$(".menuItem").each(function(menuItem) {
	menuItem.addEvent("mouseenter", (function(event) {
		var shadowLeft = $("HoverShadowLeft"),
			shadowRight = $("HoverShadowRight");
		shadowLeft.setStyle("display", "block");
		shadowRight.setStyle("display", "block");
		var left = this.getPosition().x - this.getParent().getPosition().x;
		var right = left + this.getSize().x - shadowRight.getSize().x;
		shadowLeft.getParent().removeChild(shadowLeft);
		shadowRight.getParent().removeChild(shadowRight);
		shadowLeft.setStyle("left", left + "px");
		shadowRight.setStyle("left", right + "px");
		this.appendChild(shadowLeft);
		this.appendChild(shadowRight);
		if (this.getPrevious().hasClass("menuItemSelected")) {
			shadowLeft.setStyle("display", "none");
			$("selectedShadowRight").setStyle("display", "none");
		}
		if (this.getNext().hasClass("menuItemSelected")) {
			shadowRight.setStyle("display", "none");
			$("selectedShadowLeft").setStyle("display", "none");
		}
	}).bindWithEvent(menuItem));
	menuItem.addEvent("mouseleave", (function(event) {
		$("HoverShadowLeft").setStyle("display", "none");
		$("HoverShadowRight").setStyle("display", "none");
		$("selectedShadowLeft").setStyle("display", "block");
		$("selectedShadowRight").setStyle("display", "block");
	}).bindWithEvent(menuItem));
});

$$(".menuItemSelected").each(function(menuItem) {
	var shadowLeft = $("selectedShadowLeft"),
		shadowRight = $("selectedShadowRight");
	shadowLeft.setStyle("display", "block");
	shadowRight.setStyle("display", "block");
	var left = menuItem.getPosition().x - menuItem.getParent().getPosition().x;
	var right = left + menuItem.getSize().x - shadowRight.getSize().x;
	shadowLeft.getParent().removeChild(shadowLeft);
	shadowRight.getParent().removeChild(shadowRight);
	shadowLeft.setStyle("left", left + "px");
	shadowRight.setStyle("left", right + "px");
	menuItem.appendChild(shadowLeft);
	menuItem.appendChild(shadowRight);
});

var Slideshow = new Class({
	
	isSlideshow: true,
	
	initialize: function(options) {
		this.slides = options.slides;
		this.index = this.slides.length - 1;
		
		this.slides.each(function(slide) {
			slide.setStyles({
				opacity: 0.00,
				visibility: "visible"
			});
			slide.set('tween', {
				duration : 2000
			});
		}, this);
		
		window.addEvent("keydown", (function(event) {
			if (event.key == "left") {
				this.previous();
			} else if (event.key == "right") {
				this.next();
			}
		}).bindWithEvent(this));
		
		this.next();
	},
	
	next: function() {
		var slides = this.slides,
			last = this.last,
			index = this.index;
		
		if (this.nextTimer) {
			clearTimeout(this.nextTimer);
			this.nextTimer = null;
		}
		
		if (last != null) {
			slides[last].setStyle('opacity', 0.00);
		}
		
		slides[index].setStyle('zIndex', 0);
		
		this.last = index;
		this.index = (index + 1) % slides.length;
		
		var slide = slides[this.index];
		
		slide.tween('opacity', slide.get('opacity'), 1.00);
		slide.setStyle('zIndex', 1);
		
		this.nextTimer = this.next.delay(4000, this);
	},
	
	previous: function() {
		var slides = this.slides,
			last = this.last,
			index = this.index;
		
		if (this.nextTimer) {
			clearTimeout(this.nextTimer);
			this.nextTimer = null;
		}
		
		if (last != null) {
			slides[last].setStyle('opacity', 0.00);
		}
		
		slides[index].setStyle('zIndex', 0);
		
		this.last = index;
		this.index = (slides.length + index - 1) % slides.length;
		
		var slide = slides[this.index];
		
		slide.tween('opacity', slide.get('opacity'), 1.00);
		slide.setStyle('zIndex', 1);
		
		this.nextTimer = this.next.delay(4000, this);
	}
	
});

$$(".slideshow").each(function(slideshow) {
	var slides = slideshow.getElements(".slide");
	if (slides.length > 0) {
		new Slideshow({
			slides: slides
		});
	}
});

var Picturebox = new Class({
	
	isPicturebox: true,
	
	initialize: function(options) {
		var img = this.img = options.img;
		this.src = img.getAttribute("picturebox");
		
		img.addEvent("click", this.onClick.bindWithEvent(this));
	},
	
	dispose : function() {
		var duration = 300;
		
		var bigImg = this.bigImg;
		bigImg.set('tween', {
			duration: duration,
			onComplete: (function() {
				document.body.removeChild(this.bigImg);
			}).bind(this)
		});
		bigImg.tween('opacity', 0.00);
		
		var blocker = this.blocker;
		blocker.set('tween', {
			duration: duration,
			onComplete: (function() {
				document.body.removeChild(this.blocker);
			}).bind(this)
		});
		blocker.tween('opacity', 0.00);
	},
	
	onClick : function(event) {
		var bigImg = this.bigImg = new Element("img");
		bigImg.onload = this.onLoad.bindWithEvent(this);
		bigImg.src = this.src;
		
		var blocker = this.blocker = new Element("div");
		blocker.setStyles({
			position: "fixed",
			top: "0px",
			left: "0px",
			width: "100%",
			height: "100%",
			zIndex: 1,
			background: "black",
			cursor: "not-allowed",
			opacity: 0.00
		});
		blocker.setAttribute('title', "click to close");
		document.body.appendChild(blocker);
		
		blocker.onclick = this.dispose.bindWithEvent(this);
		bigImg.onclick = this.dispose.bindWithEvent(this);
		
		blocker.set('tween', {
			duration: 300,
			onComplete: function() {}
		});
		blocker.tween('opacity', 0.50);
	},
	
	onLoad : function(event) {
		var bigImg = this.bigImg;
		bigImg.setStyles({
			position: "fixed",
			marginTop: -(bigImg.height / 2) + "px",
			marginLeft: -(bigImg.width / 2) + "px",
			top: "50%",
			left: "50%",
			border: "20px solid black",
			borderRadius: "20px",
			zIndex: 2,
			opacity: 0
		});
		document.body.appendChild(bigImg);
		
		bigImg.set('tween', {
			duration: 500,
			onComplete: function() {}
		});
		bigImg.tween('opacity', 1.00);
	},
	
	onClear : function(event) {
		
	}
	
});

$$("img[picturebox]").each(function(img) {
	new Picturebox({
		img: img
	});
	img.setStyles({
		cursor: "pointer"
	})
	img.setAttribute('title', "click to enlarge");
});