
var Gallery = new Class({
	initialize: function(gallery, container, images, category){
		// Init
		this.category = category;
		this.images = images;
		this.selectedIndex = -1;
		this.gallery = gallery;
		this.totalWidth = 0;
		this.container = container;
		this.mainImageContainer = $('mainImageContainer');
		// Sett høyde på stort bilde etter screen size
		this.mainImageHeight = 500;
		if (screen && screen.height) {
			if (screen.height >= 1200)
				this.mainImageHeight = 750;
			else		
			if (screen.height >= 1024)
				this.mainImageHeight = 650;
			else if (screen.height >= 900)
				this.mainImageHeight = 600;
		}
		this.mainImageContainer.style.height = this.mainImageHeight + 50 + 'px';
		// Shortcuts til DOM
		this.mainImageDisplay = $('mainImage1');
		this.mainImageLoad = $('mainImage2');
		this.subtitles = $('subtitles');
		this.mainImg = $('mainImage1');
		this.nextImageButton = $('nextImageButton');
		this.prevImageButton = $('previousImageButton');
		// Effekter
		this.displayFader = new Fx.Tween(this.mainImageDisplay, { property: 'opacity' });
		this.loadFader = new Fx.Tween(this.mainImageLoad, { property: 'opacity' });
		this.bound = {
			thumbSelected: this.thumbSelected.bindWithEvent(this),
			thumbLoaded: this.thumbLoaded.bindWithEvent(this),
			mouseInMainImage: this.mouseInMainImage.bindWithEvent(this),
			clickInMainImage: this.clickInMainImage.bindWithEvent(this),
			next: this.next.bindWithEvent(this),
			previous: this.previous.bindWithEvent(this)
		};
		// Events
		this.mainImageLoad.addEvent('load', this.mainLoaded.bind(this));
		this.mainImageDisplay.addEvent('load', this.mainLoaded.bind(this));
		this.nextImageButton.addEvent('click', this.bound.next);
		this.nextImageButton.setStyle('cursor', 'pointer');
		this.prevImageButton.addEvent('click', this.bound.previous);
		this.prevImageButton.setStyle('cursor', 'pointer');
		if (window.ie6) {
			for (var i = 0; i < this.images.length; i++)
				this.create(i);
			this.setMainImage(0);
		} else
			this.create(0);
	},
	setMainImage: function(index){
		var image = this.images[index];
		$('infoGalleryIndex').set('text', index + 1);
		this.thumbSelected({
			target: {
				image: image,
				index: index
			}
		});
	},
	next: function(){
		this.setMainImage(this.selectedIndex < this.images.length - 1 ? this.selectedIndex + 1 : 0);
	},
	previous: function(){
		this.setMainImage(this.selectedIndex > 0 ? this.selectedIndex - 1 : this.images.length - 1);
	},
	create: function(index){
		var image = this.images[index];
		this.loadingIndex = index;
		var mono = index == 0 ? '' : 'mono=true&';
		image.img = new Element('img', {
			src: '/nyforside/resizer.php?' + mono + 'maxwidth=70&maxheight=60&img=' + this.images[index].src + '&cat=' + this.category,
			events: {
				load: this.bound.thumbLoaded,
				click: this.bound.thumbSelected
			},
			styles: {
				visibility: window.ie6 ? 'visible' : 'hidden',
				cursor: 'pointer'
			}
		}).injectInside(this.container);
		image.img.image = image;
		image.img.index = index;
	},
	thumbSelected: function(e){
		var thumb = e.target.image;
		var index = e.target.index;
		$('infoGalleryIndex').set('text', index + 1);
		if (this.selectedIndex != -1) {
			this.images[this.selectedIndex].img.src = '/nyforside/resizer.php?mono=true&maxwidth=70&maxheight=60&img=' + this.images[this.selectedIndex].src + '&cat=' + this.category;
		}
		thumb.img.src = '/nyforside/resizer.php?maxwidth=70&maxheight=60&img=' + this.images[index].src + '&cat=' + this.category;
		var thumbCoord = thumb.img.getCoordinates();
		var galleryCoord = this.gallery.getCoordinates();
		this.mainImageLoad.image = e.target.image;
		this.mainImageLoad.src = '/nyforside/resizer.php?maxwidth=580&maxheight=' + this.mainImageHeight + '&img=' + e.target.image.src + '&cat=' + this.category + (watermark ? '&watermark' : '');
		if (this.totalWidth > galleryCoord.width) {
			var scroller = new Fx.Tween(this.container, { property: 'margin-left' });
			var currentMargin = parseInt(this.container.style.marginLeft, 10);
			if (isNaN(currentMargin)) 
				currentMargin = 0;
			var targetMargin = currentMargin + (galleryCoord.left + galleryCoord.right) / 2 - (thumbCoord.left + thumbCoord.right) / 2;
			targetMargin = targetMargin > 6 ? 6 : (targetMargin < -this.totalWidth + galleryCoord.width - 6 ? -this.totalWidth + galleryCoord.width - 6 : targetMargin);
			scroller.start(currentMargin, targetMargin);
		}
		this.selectedIndex = index;
	},
	thumbLoaded: function(){
		var index = this.loadingIndex;
		var image = this.images[index];
		image.img.removeEvent('load', this.bound.thumbLoaded);
		var size = image.img.getSize();
		this.totalWidth += size.x + 6;
		var fader = new Fx.Tween(this.images[index].img, { property: 'opacity' });
		fader.start(0, 1);
		if (!window.ie6 && index < this.images.length - 1)
			this.create(index + 1);
		if (this.selectedIndex == -1 && index == 0)
			this.setMainImage(0);
		$('infoGalleryCount').set('text', this.images.length);
	},
	mainLoaded: function(){
		var size = this.mainImageLoad.getSize();
		var container = $('mainImageContainer');
		var containerCoord = container.getCoordinates();
		this.mainImageLoad.setStyles({
			left: containerCoord.width / 2 - size.x / 2 + 'px',
			//top: containerCoord.top + 12 + 'px'
			top: containerCoord.top + 0 + 'px'
		});
		var intro = this.mainImageLoad.image.intro;
		var title = this.mainImageLoad.image.title;
		var link = this.mainImageLoad.image.link;
		var a = $('mainImageLink');
		if (link != '')
			a.href = link;
		else
			a.removeAttribute('href');
		if (title.length == 0) {
			this.subtitles.setStyle('visibility', 'hidden');
		} else {
			this.subtitles.setStyles({
				left: containerCoord.width / 2 - size.x / 2 + 2 + 'px',
				width: size.x - 12 + 'px',
				opacity: 0.7,
				visibility: 'visible'
			}).set('html', (intro.length > 0 ? '<b>' + intro + '</b>&nbsp;' : '') + title);
			var subSize = this.subtitles.getSize();
			this.subtitles.setStyles({
				//top: containerCoord.top + 14 + 'px'
				top: containerCoord.top + 2 + 'px'
			});
		}
		//container.setStyle('height', size.y + 'px');
		this.displayFader.start(1, 0);
		this.loadFader.start(0, 1);
		var tmp = this.mainImageDisplay;
		this.mainImageDisplay = this.mainImageLoad;
		this.mainImageLoad = tmp;
		tmp = this.displayFader;
		this.displayFader = this.loadFader
		this.loadFader = tmp;
	},
	getHalf: function(e){
		var imgCoord = this.mainImageDisplay.getCoordinates();
		return Math.floor((e.page.x - imgCoord.left) / (imgCoord.width / 2));
	},
	getThird: function(e){
		var imgCoord = this.mainImageDisplay.getCoordinates();
		return Math.floor((e.page.x - imgCoord.left) / (imgCoord.width / 3));
	},
	mouseInMainImage: function(e){
		var imgCoord = this.mainImageDisplay.getCoordinates();
		var x = e.page.x, y = e.page.y;
		var oneHalf = imgCoord.width / 2;
		//this.mainImageDisplay.setStyle('cursor', 'pointer');
		var index = this.selectedIndex;
		if (index > 0 && x > imgCoord.left && x < imgCoord.left + oneHalf) {
			this.nextImageBackground.setStyle('visibility', 'hidden');
			this.nextImageButton.setStyle('visibility', 'hidden');
			this.prevImageBackground.setStyles({
				left: imgCoord.left + 6 + 'px',
				top: imgCoord.top + 6 + 'px',
				opacity: 0.5
			});
			this.prevImageButton.setStyles({
				left: imgCoord.left + 6 + 'px',
				top: imgCoord.top + 6 + 'px',
				visibility: 'visible'
			});
		} else if (index < this.images.length - 1 && x > imgCoord.left + oneHalf && x < imgCoord.right) {
			this.prevImageBackground.setStyle('visibility', 'hidden');
			this.prevImageButton.setStyle('visibility', 'hidden');
			this.nextImageBackground.setStyles({
				left: imgCoord.right - 48 - 8 + 'px',
				top: imgCoord.top + 6 + 'px',
				opacity: 0.5
			});
			this.nextImageButton.setStyles({
				left: imgCoord.right - 48 - 8 + 'px',
				top: imgCoord.top + 6 + 'px',
				visibility: 'visible'
			});
		} else
			;//this.hideButtons();
	},
	clickInMainImage: function(e){
		var half = this.getHalf(e);
		if (this.selectedIndex > 0 && half == 0)
			this.setMainImage(this.selectedIndex - 1);
		else if (this.selectedIndex < this.images.length - 1 && half == 1)
			this.setMainImage(this.selectedIndex + 1);
	}
})			