var browser = new Hash({
	open : false,
	height : 400,
	offset : 20,
	initialize : function() {
		this.scroll = new Fx.Scroll(window, {offset:{y:0,x:-300}});
		this.winEffect = new Fx.Elements($$('#header','#bar'));
		this.images = $$('#browser>li');
		this.images.splice(0,1);
		this.previews = $$('#preview a');
		this.links = $$('#bar a');
		this.images.each(function(image, i){
			if (!image.hasClass('desc'))
			image.effect = new Fx.Tween(image.getElement('img'));
			image.index = i;
			image.link = browser.links[i+1];
			if (image.link)
			image.link.addEvent('click', function(e){e.stop(); browser.scrollToImg(image);})
			image.addEvent('click', function(e){
				e.stop();
				browser.scrollToImg(this);
			});
		});
		this.links[0].addEvent('click', function(e){e.stop(); browser.scrollToImg(browser.images[0]);});
		this.previews.each(function(el, i){
			el.addEvent('click', function(e) {
				e.stop();
				if (browser.active.uid == $('preview').uid)
					browser.scrollToImg(browser.images[this.hash.replace("#col", "")]);
				else
					browser.scrollToImg(browser.images[0]);
				});
		})
		this.focus = window.getScroll().x + 200;
		this.center();
		this.start();
		window.addEvent('scroll', function(e){browser.scrollDet();
			}).addEvent('resize', function(){browser.checksize();});
		this.submenus = $$('.menu div ul');
		if (this.submenus.length > 1) {
            $('browser').addClass('hasjs');
			this.subscroller = new Fx.Scroll($('container').getElement('.menu div'), {offset:{y:0,x:-20}});
			this.submenus.container = new Element('ul', {id:"pages"}).inject($('browser').getElement('.menu div'), 'after');
			this.submenus.each(function(el, i){
				el.counter = new Element('li', {
					html	: (i+1),
					events 	: {
						click : function(){browser.goToSub(i);}
						}
					}).inject(browser.submenus.container);
				if(el.getElement('.active')) {
					browser.goToSub(i);
				}
			})
		}
	},
	goToSub : function(i) {
		this.submenus.each(function(el) {if (el.counter) el.counter.removeClass('active')});
		this.subscroller.toElement(this.submenus[i]);
		this.submenus[i].counter.addClass('active');
	},
	center : function(){
		var top = ((window.getSize().y - this.height)/2);
		this.winEffect.start({
			0 : {
				'margin-top' : top + 30,
				'height'		 : 0
				},
			1 : {
				'top' : (top/2)
			}
			});
	},
	checksize : function(){
		this.center();
		this.scrollToImg(this.active);
		return;
	},
	scrollToImg : function(img){
		if (!this.open)
			return false;
		this.scroll.toElement(img);
		this.focusOn(img);
	},
	focusOn : function(img){
		if (!this.open)
			return false;
		if (this.active)
			this.active.link.removeClass('on');
		this.active = img.removeClass('off');
		var others = this.images.filter(function(el){
			return ((!el.hasClass('desc')) && (el.uid != img.uid));
		});
		others.each(function(el){
			el.addClass('off');
			if (el.effect)
				el.effect.cancel().start('opacity', '.15');
		});
		if (img.hasClass('desc')) {
			if(this.images[img.index +1].effect)
				this.images[img.index +1].effect.cancel().start('opacity', '1');
		}
		if (img.effect)
			img.effect.cancel().start('opacity', '1');
		img.link.addClass('on');
	},
	scrollDet : function(){
		if (this.scroll.timer != null) return false;
		var newfocus = window.getScroll().x + 200;
		if (this.focus != newfocus) {
			this.focus = newfocus;
			var img = this.findImgByScroll(this.focus)
			if (img)
				this.focusOn(img);
		}
	},
	findImgByScroll : function(focus) {
		var newImg = this.images.filter(function(el){
			if ((focus < el.getCoordinates().left) && (focus < el.getCoordinates().right))
				return el;
		});
			
		if (newImg[0] && ((!this.active) || (newImg[0].uid != this.active.uid)))
			return newImg[0];
		
		return false;
	},
	stop : function() {
		this.active.effect.start('opacity','.15');
		this.erase('active');
		this.open = false;
	},
	start : function() {
		this.open = true;
		this.focusOn(this.findImgByScroll(this.focus));
	}
});

window.addEvent('domready', function() {
	if (document.body.id != "home")
		browser.initialize();
});