var Delodepote = function() {
	this.state;
	this.elements = {};

	this.pageTransitionSpeed = 500;
	
	this.headerButtonsHideOpacity = 0.3;
	
	this.windowWidth;
	this.windowHeight;
	this.headerHeight;
	this.viewHeight;

	this.init();
};

Delodepote.prototype.init = function() {
	this.elements.window = $(window);
	this.elements.pageContent = $(".page-content");
	this.elements.allPhotos = $(".main-page .photo, .photo-list .photo, .photo-slideshow .photo");
	this.elements.photos = $(".main-page .photo, .photo-list .photo");
	this.elements.page = $(".page");
	this.elements.menu = $(".menu");
	this.elements.header = $(".header");
	this.elements.headerContent = this.elements.header.find(".header-content");
	this.elements.headerName = this.elements.headerContent.find("h1");
	this.elements.headerContact = this.elements.menu.find("> li.contact");
	this.elements.headerButtons = this.elements.menu.find(".arrow-left, .change-view, .arrow-right");
	this.elements.menuTopItems = this.elements.menu.find('> li.personal,> li.commisioned');
	this.elements.subMenus = this.elements.menu.find("ul");
	
	if (this.elements.page.find(".main-page").length) {
		this.state = Delodepote.STATE_MAIN_PAGE;
	} else if (this.elements.page.find(".photo-list").length) {
		this.state = Delodepote.STATE_LIST;
		this.slideshow = new Slideshow(this);
	}

	var contact = this.elements.page.find('.contact');
	if (contact.length) {
		this.elements.page.width(900);
		this.elements.headerContent.width(900);
	}

	this.initPageTransitions();
	this.initMenu();
	this.initPhotos();

	var self = this;
	
	this.headerHeight = this.elements.header.height();
	this.elements.window.resize(function() { self.onResize(); });
};

Delodepote.prototype.initPhotos = function() {
	this.elements.allPhotos.each(function(i, e) {
		e = $(e);
		var acka = e.find('a');
		acka.hover(function() { acka.addClass('hover'); }, function() { acka.removeClass('hover'); });
		var img = e.find(".image"); 
		e.data("size", {
			width: parseInt(e.attr("width")),
			height: parseInt(e.attr("height"))
		}).bind("resizeTo", function(event, width, height) {
			e.css({ width: width });
			img.css({
				width: width,
				height: height
			});
		});
		if (e.hasClass("hover")) {
			var overlay = e.find(".overlay");
			var speed = 150;
			e.hover(function() {
				overlay
					.stop()
					.css({ opacity: 0, display: 'block' })
					.animate({ opacity: 1 }, speed);
			}, function() {
				overlay
					.stop()
					.animate({ opacity: 0 }, speed, function() {
						overlay.css({ opacity: 0, display: 'none' });
					});
			});
		}
	});
};

Delodepote.prototype.initMenu = function() {
	this.elements.subMenus.hide(0);
	var self = this;
	this.elements.menuTopItems.hover(function() {
		self.elements.headerContent.css({ overflow: "visible" }); //jquery bug fix: sets overflow:hidden after animate
		$(this).find("ul").show(0);
	}, function() {
		$(this).find("ul").hide(0);
	})
		.find("> a")
			.tap(function(e) { e.preventDefault(); return false; });

	this.elements.headerName.tap(function(e) {
		e.preventDefault();
		window.location = $(this).find("a").attr("href");
	});
	
	this.elements.headerButtons.each(function(i, e) {
		e = $(e);
		if (e.attr("href") == '#') {
			e.css({ opacity: self.headerButtonsHideOpacity });
		}
	});
};

Delodepote.prototype.initPageTransitions = function() {
	var self = this;
	this.elements.pageContent
		.stop()
		.css({ opacity: 0 })
		.animate({ opacity: 1 }, this.pageTransitionSpeed)
		.find("a").each(function(i, e) {
			e = $(e);
			if (!e.hasClass("external") && !e.parents(".photo-list").length) {
				e.tap(function(e) {
					self.elements.pageContent.stop().animate({ opacity: 0 }, self.pageTransitionSpeed);
				});
			}
		});
	$([this.elements.menuTopItems.find("li a"), this.elements.headerContact, this.elements.headerName]).tap(function(e) {
		self.elements.pageContent.stop().animate({ opacity: 0 }, self.pageTransitionSpeed);
	});
};

Delodepote.prototype.onResize = function(e) {
	this.windowWidth = this.elements.window.width();
	this.windowHeight = this.elements.window.height();
	this.pageWidth = this.windowWidth * 0.95;
	if (this.pageWidth < 800) {
		this.pageWidth = 800;
	}
	this.viewHeight = this.windowHeight - this.headerHeight;
	
	if (this.contentResizeTimer) {
		clearTimeout(this.contentResizeTimer);
	}
	var self = this;
	this.contentResizeTimer = setTimeout(function() {
		self.centerContent();
	}, 10);
	
};

Delodepote.prototype.centerContent = function() {
	if (this.state == Delodepote.STATE_MAIN_PAGE) {
		var size = this.calculateImageSize(this.elements.photos, this.pageWidth, this.viewHeight - 50);
		this.elements.photos.triggerHandler("resizeTo", [ size.width, size.height ]);
		var headerWidth = size.width;
		if (headerWidth < 800) {
			headerWidth = 800;
		}
		this.elements.headerContent.css({ width: headerWidth });
	} else if (this.state == Delodepote.STATE_LIST) {
		var self = this;
		this.elements.photos.each(function(i, e) {
			e = $(e);
			var origSize = e.data('size');
			var width = Math.floor((self.pageWidth - 40) / 5) ;
			var height = Math.floor(origSize.height * (width / origSize.width));
			e.triggerHandler("resizeTo", [ width, height ]);
		});

		if (this.slideshow) {
			if (this.slideshow.view == Slideshow.VIEW_SLIDESHOW) {
				this.slideshow.fitToSize();
				this.slideshow.setSlideshowHeaderWidth(false);
			}
		}
	}
};

Delodepote.prototype.calculateImageSize = function(photo, maxWidth, maxHeight) {
	var origSize = photo.data("size");
	var origRatio = Math.floor(origSize.width / origSize.height);
	var newRatio = maxWidth / maxHeight;
	
	var size = {
		width: 0,
		height: 0
	};
	if (origRatio > newRatio) {
		//by width
		var width = maxWidth;
		var height = origSize.height * maxWidth / origSize.width;
		size.width = width;
		size.height = height;
	} else {
		//by height
		var height = maxHeight;
		var width = origSize.width * maxHeight / origSize.height;
		size.width = width;
		size.height = height;
	}
	var MIN_WIDTH = 100;
	var MIN_HEIGHT = 100;
	if (size.width < MIN_WIDTH) {
		size.width = MIN_WIDTH;
		size.height = origSize.height * MIN_WIDTH / origSize.width;
	}
	if (size.height < MIN_HEIGHT) {
		size.height = MIN_HEIGHT;
		size.width = origSize.width * MIN_HEIGHT / origSize.geight;
	}
	
	return size;
};

Delodepote.STATE_MAIN_PAGE = 1;
Delodepote.STATE_LIST = 2;

var Slideshow = function(main) {
	this.main = main;
	this.view = Slideshow.VIEW_LIST;
	this.currentPosition = 0;
	this.currentPhotoIndex = 0;
	this.elements = {};
	this.init();
	this.moveSpeed = 350;
	this.headerSpeed = 700;
	this.inAnimation = false;
};
Slideshow.VIEW_LIST = 1;
Slideshow.VIEW_SLIDESHOW = 2;

Slideshow.prototype.init = function() {
	this.elements.slideshow = this.main.elements.pageContent.find(".photo-slideshow");
	this.elements.slideshowTable = this.elements.slideshow.find("table");
	this.elements.list = this.main.elements.pageContent.find(".photo-list");
	this.elements.photos = this.elements.slideshow.find(".photo");
	
	this.elements.nextPhoto = this.main.elements.menu.find(".arrow-right");
	this.elements.prevPhoto = this.main.elements.menu.find(".arrow-left");
	this.elements.changeView = this.main.elements.menu.find(".change-view");
	
	this.elements.photos.each(function(i, e) {
		e = $(e);
		var placeholder = e.find(".placeholder");
		if (placeholder.length) {
			e.bind("load_image", function() {
				var img = $('<img src="' + placeholder.attr("src") + '" alt="' + placeholder.attr("alt") + '">');
				var p = placeholder.parent();
				placeholder.remove();
				p.append(img);
			});
		}
	});
	var self = this;
	this.main.elements.photos.each(function(i, e) {
		e = $(e);
		var tap = function(e) {
			e.preventDefault();
			self.currentPhotoIndex = i;
			self.displayCurrentPhotos();
			self.toSlideshow();
		};
		e.unbind("tap").tap(tap)
			.find("a").unbind("tap").tap(tap);
	});
	
	var self = this;
	this.elements.nextPhoto.tap(function(e) {
		e.preventDefault();
		self.nextPhoto();
	});
	this.elements.prevPhoto.tap(function(e) {
		e.preventDefault();
		self.prevPhoto();
	});
	
	this.elements.changeView.tap(function(e) {
		e.preventDefault();
		self.changeView();
	});
	this.elements.slideshow.tap(function(e) {
		e.preventDefault();
		self.nextPhoto();
	});
	//init keyboard
	$(document).keydown(function(e) {
		if (self.state == Slideshow.STATE_SLIDESHOW) {
			if (e.which == 37) {
				self.prevPhoto();
			} else if (e.which == 39) {
				self.nextPhoto();
			}
		}
	});
	
	
	$(document).mousewheel(function(event, up) {
		up = (up > 0) ? true : false;
		if (self.view == Slideshow.VIEW_SLIDESHOW) {
			event.preventDefault();
			if (up) {
				self.prevPhoto();
			} else {
				self.nextPhoto();
			}
		}
	});
	
};

Slideshow.prototype.changeView = function() {
	if (this.view == Slideshow.VIEW_SLIDESHOW) {
		this.toList();
	}
};

Slideshow.prototype.toSlideshow = function() {
	this.view = Slideshow.VIEW_SLIDESHOW;
	
	var speed = 500;
	var self = this;
	this.elements.list.animate({ opacity: 0 }, speed, function() {
		self.elements.list.hide(0);
		
		self.elements.slideshow
			.css({ opacity: 0 })
			.show(0);
		
		self.fitToSize();
		self.setSlideshowHeaderWidth(true);
		
		self.elements.slideshow
			.animate({ opacity: 1 }, speed);
		
	});
};

Slideshow.prototype.toList = function() {
	var speed = 500;
	var self = this;
	this.elements.slideshow.stop().animate({ opacity: 0 }, speed, function() {
		self.elements.slideshow.hide(0);
		self.elements.list
			.stop()
			.css({ opacity: 0 })
			.show(0)
			.animate({ opacity: 1 }, speed);
	});
	
	this.view = Slideshow.VIEW_LIST;
	this.setListHeaderWidth();
	$([this.elements.nextPhoto.get(0), this.elements.prevPhoto.get(0), this.elements.changeView.get(0) ]).stop().animate({ opacity: this.main.headerButtonsHideOpacity }, 500);	
};

Slideshow.prototype.setSlideshowHeaderWidth = function(animate) {
	var photo = $(this.elements.photos.get(this.currentPhotoIndex));
	var img = photo.find(".image");
	var width = img.width();
	if (width < 800) {
		width = 800;
	}
	if (animate) {
		this.main.elements.headerContent.stop().animate({
			width: width,
			useTranslate3d : true,
			leaveTransforms : false
		}, this.headerSpeed);
	} else {
		this.main.elements.headerContent.stop().css({ width: width });
	}
};

Slideshow.prototype.setListHeaderWidth = function() {
	var self = this;
	this.main.elements.headerContent
		.stop()
		.animate({
			width: this.main.pageWidth,
			useTranslate3d : true,
			leaveTransforms : false
		}, this.headerSpeed, function() {
			self.main.elements.headerContent.css({ width: "95%" });
		});
};


Slideshow.prototype.fitToSize = function(animate) {
	animate = (animate == undefined) ? false : animate;
	
	var photos = this.elements.photos;
	var self = this;
	photos.each(function(i, e) {
		e = $(e);
		var size = self.main.calculateImageSize(e, self.main.pageWidth, self.main.viewHeight - 50);
		e.triggerHandler("resizeTo", [ size.width, size.height ]);
	});
	var photo = $(this.elements.photos.get(this.currentPhotoIndex));
	var img = photo.find(".image");
	var size = {
		width: img.width(),
		height: img.height() + 50
	};
	var offset = Math.floor((this.main.pageWidth - size.width) / 2);
	
	var slideshowData = {
			width: size.width,
			height: size.height,
			marginLeft: offset
		};
	
	if (animate) {
		this.elements.slideshow
			.stop()
			.animate(slideshowData, 250);
	} else {
		this.elements.slideshow
			.css(slideshowData);
	}
	this.elements.slideshowTable
		.css({ left: (-1 * photo.position().left) });
};

Slideshow.prototype.nextPhoto = function() {
	if (!this.inAnimation && (this.currentPhotoIndex + 1 < this.elements.photos.length)) {
		this.currentPhotoIndex++;
		this.displayCurrentPhotos();
		this.animateToCurrentPhoto();
	}
};

Slideshow.prototype.prevPhoto = function() {
	if (!this.inAnimation && (this.currentPhotoIndex != 0)) {
		this.currentPhotoIndex--;
		this.displayCurrentPhotos();
		this.animateToCurrentPhoto();
	}
};

Slideshow.prototype.animateToCurrentPhoto = function() {
	var self = this;
	this.inAnimation = true;
	this.elements.slideshowTable
		.stop()
		.animate({
			left: (-1 * $(this.elements.photos[this.currentPhotoIndex]).position().left),
			useTranslate3d : true,
			leaveTransforms : false
		}, this.moveSpeed, function() {
			self.fitToSize(true);
			self.setSlideshowHeaderWidth(true);
		});
	setTimeout(function() {
		self.inAnimation = false;
	}, this.moveSpeed);
};

Slideshow.prototype.displayCurrentPhotos = function() {
	var speed = 500;
	this.elements.changeView.stop().animate({ opacity: 1 }, speed);
	$(this.elements.photos[this.currentPhotoIndex]).trigger("load_image");
	if (this.currentPhotoIndex > 0) {
		$(this.elements.photos[this.currentPhotoIndex - 1]).trigger("load_image");
		this.elements.prevPhoto.stop().animate({ opacity: 1 }, speed);
	} else {
		this.elements.prevPhoto.stop().animate({ opacity: this.main.headerButtonsHideOpacity }, speed);		
	}
	if (this.currentPhotoIndex + 1 <this.elements.photos.length) {
		$(this.elements.photos[this.currentPhotoIndex + 1]).trigger("load_image");
		this.elements.nextPhoto.stop().animate({ opacity: 1 }, speed);
	} else {
		this.elements.nextPhoto.stop().animate({ opacity: this.main.headerButtonsHideOpacity }, speed);		
	}
};

$(document).ready(function() {
	var delodepote = new Delodepote();

	$(window).trigger("resize");
});