var ScrollableGallery = function(container) {

	var that = this;

	this.offset = [0];
	this.scrollable = $('.scrollable', container);
	this.viewport = $('.window', container);
	this.popup = $('.gallery-popup', container)
		.appendTo('#content')
		.css('left', ($('body').width() - 443) / 2);

	this.next = $('.next', container).addClass('next-disabled').click(function(e) {
		e.preventDefault();
		if (! $(this).hasClass('next-disabled')) {
			that.offset.push($('.hidden-next:first', that.scrollable).position().left * -1);
			that.scroll();
		}
	});

	this.prev = $('.prev', container).addClass('prev-disabled').click(function(e) {
		e.preventDefault();
		if (! $(this).hasClass('prev-disabled')) {
			that.offset.pop();
			that.scroll();
		}
	});
	
	$(window).load(function() { that.update_scrollable() });

	$('A', this.scrollable).click(function(e) {

		e.preventDefault();
		window.location.href = '#' + $(this.parentNode).attr('id');

		if ($(this).hasClass('video')) {

			$('.content .image', that.popup).empty().hide();
			$('#tube', that.popup).show();
					
			flowplayer('tube', {
				'src' : '/cm-static/flowplayer/flowplayer.crasman-3.0.7.swf',
				'width' : 400, 'height' : 300, 'wmode' : 'transparent' },
			  {
			      key : '421e97354bb1f4626f1',
			      playlist : [ 
			        {
			          url : encodeURIComponent($(this).attr('href')),
			          name : $(this).attr('title'),
			          scaling : 'fit',
			          autoPlay : true,
			          autoBuffering : true
			        }
			      ],
			      play: { opacity: 0 },
			      canvas: {
			        backgroundGradient : 'low'
			      },
			      plugins: {
			        controls: {
			          autoHide: 'never',
			          fullscreen : false,
			          stop : false,
			          play : true,
			          scrubber : true,
			          volume : true,
			          mute : true,
			          playlist : true,
			          backgroundGradient : 'low'
			        },
			        logo: null
			      },
			      onLoad: function() {
			        this.setVolume(50);
			      }
			  }
			);
			
		} else {
			$('.content .image', that.popup).empty().show();
			$('#tube', that.popup).hide();
			var img = $(document.createElement('img'));
			img.css('display', 'none')
				.load(function() {
					img.css('cursor', 'pointer').attr('title', 'Sulje / Close').click(function() { $('.gallery-popup .close').click() });
					if (img.height() > 500) img.height(500);
					if ($.browser.msie) img.show();  // IE doesn't support opacity for 24-bit PNGs
					else $('.content .image', that.popup).animate({ 'height': $(img).height() }, {
						complete: function() { img.fadeIn('fast') }
					});
				})
				.attr('src', $(this).attr('href'))
				.appendTo($('.content .image', that.popup));
		}
		$('.caption', that.popup).text($(this).attr('title'))
		that.popup.fadeIn('fast');
	});
	
	$('.gallery-popup .close').click(function() {
		if ($.browser.msie) that.popup.hide();
		else that.popup.fadeOut('fast');
	});
        
	$(document).keydown(function(e) {
		if (e.which == 27) $('.gallery-popup .close').click();
	});
}

ScrollableGallery.prototype.scroll = function() {
	var that = this;
	this.scrollable.animate({ 'marginLeft': this.offset[this.offset.length - 1] }, { complete: function() { that.refresh() } });
}

ScrollableGallery.prototype.refresh = function() {
	var that = this;
	var offset = this.offset[this.offset.length - 1] * -1;
	$('LI', this.scrollable).each(function() {
		$(this)[$(this).position().left < offset ? 'addClass' : 'removeClass']('hidden-prev');
		$(this)[$(this).position().left + $(this).width() > offset + that.viewport.width() ? 'addClass' : 'removeClass']('hidden-next');
	});
	$(this.next)[$('.hidden-next', that.scrollable).length == 0 ? 'addClass' : 'removeClass']('next-disabled');
	$(this.prev)[$('.hidden-prev', that.scrollable).length == 0 ? 'addClass' : 'removeClass']('prev-disabled');
}

ScrollableGallery.prototype.update_scrollable = function() {
	var that = this;
	var width = 0;
	$('.scrollable LI').each(function() { width += $(this).outerWidth() });
	this.scrollable.width(width);
	this.refresh();
	setTimeout(function() {
		that.viewport.get(0).scrollLeft = 0;
	}, 10);
}