Effect.Scroll = Class.create();
Object.extend(Object.extend(Effect.Scroll.prototype, Effect.Base.prototype), {
  initialize: function(element) {
    this.element = $(element);
    if(!this.element) throw(Effect._elementDoesNotExistError);
    this.start(Object.extend({x: 0, y: 0}, arguments[1] || {}));
  },
  setup: function() {
    var scrollOffsets = (this.element == window) 
                ? document.viewport.getScrollOffsets() 
                : Element._returnOffset(this.element.scrollLeft, this.element.scrollTop) ;
    this.originalScrollLeft = scrollOffsets.left;
    this.originalScrollTop  = scrollOffsets.top;
  },
  update: function(pos) {
    this.element.scrollTo(Math.round(this.options.x * pos + this.originalScrollLeft), Math.round(this.options.y * pos + this.originalScrollTop));
  }
});
Element.addMethods({
  scrollTo: function(element, left, top){
    var element = $(element);
    if (arguments.length == 1){
      var pos = element.cumulativeOffset();
      window.scrollTo(pos[0], pos[1]);
    } else {
      element.scrollLeft = left;
      element.scrollTop  = top;
    }
    return element;
  }
});

init_needed = 0

function init() {
	init_needed += 1
	if (init_needed <= 1) {
		if ($$("body.home").length > 0) { setup_home_image_swap() }
		if ($$("body.portfolio").length > 0) { setup_gallery() }
		if ($$("#pictures").length > 0) { thumb_swaper() }
	}
}

function setup_gallery(event) {
	$$('#navmenu li.selected li a').each(function(gallery){
		gallery.observe('click', switch_to_gallery)
	})
	insert_arrows()
	replace_big_picture()
	setup_thumbnail_events()
}

function insert_arrows() {
	$$('div.thumbnails ul').first().setStyle('overflow:hidden;')
	$$('div.gallery').first().insert('<a href="#" id="up">Up</a><a href="#" id="down">Down</a>')
	toggle_scroll_buttons()
}

function replace_big_picture() {
	picture = $$('.bigpicture').first()
	src = picture.getAttribute('src')
	picture.replace('<div id="scroller"> <img src="'+src+'" id="pic-one"> <img src="'+src+'" id="pic-two"></div>')
	$('up').observe('click', scroll_gallery)
	$('down').observe('click', scroll_gallery)
}

function scroll_gallery(event) {
	direction = this.getAttribute('id') == 'up' ? -1 : 1
	new Effect.Scroll($$('div.thumbnails ul').first(), {x:0, y:460*direction, duration:1})
	event.stop()
}

function thumb_clicked(event) {
	if (this.up().hasClassName('selected') == false){
		url = this.getAttribute('href').toQueryParams()
		url = url['gallery'] + "/" + url['image']
		this.up().up().select('.selected').each(function(i) { i.removeClassName('selected')})
		this.up().addClassName('selected')
		swap_image(url)
	}
	event.stop()
}

function swap_image(url) {
	$('pic-two').setAttribute('src', $('pic-one').getAttribute('src'))
	x = new Image()
	x.onload = function() {
		$('pic-one').setAttribute('src', this.src)
		$('scroller').scrollLeft = 775
		new Effect.Scroll('scroller', {x:-775, y:0, duration:1})
	}
	x.src = url
}

function switch_to_gallery(event) {
	if (this.up().hasClassName('selected') == false) {
		this.up().up().select('.selected').each(function(i){i.removeClassName('selected')})
		this.up().addClassName('selected')
		parameters = 'gallery=' + this.getAttribute('href').toQueryParams()['gallery']
		new Ajax.Request('fragment.html', {
			method: 'get',
			parameters: parameters,
			onComplete: swap_gallery
		})
	}
	event.stop()
}

function swap_gallery(response){
	newcode = response.responseText.evalJSON()
	thumbnails = $$('div.thumbnails ul').first()
	new Effect.Morph(thumbnails, {
		style:'opacity:0',
		duration:0.5,
		afterFinish: function(effect) {
			newthumbs = new Element('ul')
			newthumbs.setStyle('opacity:0; overflow:hidden')
			newcode.each(function(i){
				newthumbs.insert('\t<li><a href="?gallery='+ i['path'] + '&amp;image='+ i['filename'] + '"><img src="'+ i['path'] +'/thumb/'+i['filename']+ '"></a></li>\n')
			})
			thumbnails.replace(newthumbs)
			thumbnails = $$('div.thumbnails ul').first()
			thumbnails.select('li').first().addClassName('selected')
			new Effect.Morph(thumbnails, {style:'opacity:1', duration:0.5})
			setup_thumbnail_events()
			$('pic-two').setStyle('left:0px; top:500px').setAttribute('src', $('pic-one').getAttribute('src'))

			url = $$('.thumbnails .selected a').first().getAttribute('href').toQueryParams()
			url = url['gallery'] + "/" + url['image']
			x = new Image()
			x.onload = function() {
				$('pic-one').setAttribute('src', this.src)
				$('scroller').scrollTop = 500
				new Effect.Scroll('scroller', {x:0, y:-500, duration:1})
				toggle_scroll_buttons()

				setTimeout(function(){$('pic-two').setStyle('left:775px; top:0px') },1100)
			}
			x.src = url
		}
	})
}

function toggle_scroll_buttons() {
	if ($$('div.thumbnails ul').first().scrollHeight < 500) {
		new Effect.Morph('up', {style:'opacity:0'})
		new Effect.Morph('down', {style:'opacity:0'})
	} else {
		new Effect.Morph('up', {style:'opacity:1'})
		new Effect.Morph('down', {style:'opacity:1'})
	}
}

function setup_thumbnail_events() {
	$$('.thumbnails a').each(function(thumb){
		thumb.observe('click', thumb_clicked)
	})
}

function setup_home_image_swap() {
	$('gallery').setStyle('overflow:hidden')
	$('gallery').insert($$('#gallery img').first().outerHTML)
	new Effect.Scroll('gallery', {
		x: 0,
		y: 1592,
		duration: 0,
		afterFinish:function(effect){
			new PeriodicalExecuter(swap_home_image, 8)	
		}
	})
}

function swap_home_image() {
	new Effect.Scroll('gallery',{
		x: 0,
		y: -398,
		duration: 1,
		afterFinish: function(effect) {
			if ($('gallery').scrollTop == 0)
				new Effect.Scroll('gallery', {x:0, y: 1592, duration:0 })
		}
	})
}

function thumb_swaper() {
	$$('#pictures #thumbs li a').each(function(a){
		a.observe('click', swap_pic_thumb)
	})
}
function swap_pic_thumb(event) {
	$('big').setAttribute('src', this.getAttribute('href'))
	event.stop()
	return false
}



document.observe('dom:loaded', init)