/**
 * @author thomas
 */
(function(){
    Array.implement({
        'sumup': function(){
            var sum=0;
            this.each(function(val){sum+=(val).toInt();});
            return sum;
        }
    });
	
    var reMoozOpts = {
        'origin': 'img',
        'shadow': 'onOpenEnd',
        'resizeFactor': 0.8,
        'cutOut': false,
        'opacityResize': 0.4,
        'dragging': true,
        'centered': true
    };
	
	var ScrollBar = new Class({
		Extends: Slider,
		options: {
			'btPrev': null,
			'btNext': null,
			'btSteps': 1,
			'btDelay': 100,
			'btPeriod': 50
		},
		
		initialize: function(el, knob, opts){
			this.parent(el, knob, opts);
			var klass = this;
			var initButton = function(bt, dir){
				bt.addEvent('mousedown', function(e){
					e.stop();
					$clear(this.retrieve('period'));
					klass.set(klass.step + klass.options.btSteps * dir);
                    this.store('delay', (function(){
                        this.store('period', (function(){
                            klass.set(klass.step + klass.options.btSteps * dir);
                        }).periodical(klass.options.btPeriod));
                    }).delay(klass.options.btDelay, this));
				}).addEvent('mouseup', function(e){
					e.stop();
					$clear(this.retrieve('delay'));
					$clear(this.retrieve('period'));
				});
			};
			
			this.btPrev = document.id(this.options.btPrev);
			if(this.btPrev){initButton(this.btPrev, -1);}
			this.btNext = document.id(this.options.btNext);
			if(this.btNext){initButton(this.btNext, 1);}
		}
	});
	
	var PhotoDetailLoader = new Class({
		Implements: [Options, Events],
		options:{
			'url': '/photoDetail'
		},
		initialize: function(opt){
			this.setOptions(opt);
			
			this.imgCont = document.getElement('.mainimage');
			this.img = this.imgCont.getElement('img').set('spinner', {style: {opacity: 0.5}});
			
			this.req = new Request.JSON({
				url: this.options.url,
				onRequest: this.img.spin.bind(this.img),
				onSuccess: this.render.bind(this),
				onFailure: this.showError.bind(this)
			});
		},
		
		load: function(id){
			this.fireEvent('load', [id]);
			this.req.post({'id': id});
			return this;
		},
		render: function(json){
			if(json.id){
				document.fireEvent('picRender', [json]);
				this.img.addEvent('load', function(){
					this.removeEvent('load', arguments.callee).unspin();
				}).set('src', '/upload/' + (json.size.width > json.size.height ? '615x' : 'x480') + '/' + json.filename);
				var lightbox = this.imgCont.getElement('.remooz').set('href', '/upload/x600/' + json.filename).retrieve('lightbox');
				lightbox.close();
				lightbox.link = '/upload/x600/' + json.filename;
				lightbox.content = null;
				if(lightbox.body){lightbox.body.empty();}
				
				document.getElements('.comments-count').set('text', json.comments.length);
				
				var raters = document.getElements('.rater').removeClass('active');
				
				if(json.rating){
					raters.filter('*[rel=' + json.rating + ']').addClass('active');
				}
				
				if(this.activeThumb){
					this.activeThumb.removeClass('active');
				}
				
				this.activeThumb = document.getElement('a[href$=' + json.id + ']');
				this.activeThumb.addClass('active');
				this.fireEvent('render', [this.activeThumb]);
			}
			else{
				this.img.unspin();
			}
			return this;
		},
		showError: function(){
			this.img.unspin();
			return this;
		}
	});
	
	var InfiniteTicker2 = new Class({
		Extends: InfiniteTicker,
		options: {'startEl': 0, 'link': 'ignore'},
		initialize: function(element, options){
			this.addEvents({
				'onStart': function(){this.running = true;},
				'onComplete': function(){this.running = false;}
			});
			this.parent(element, options);
			this.curEl = ($type(this.options.startEl) == 'element'?this.options.startEl:this.elements[this.options.startEl]);
			this.stopLoop().toElement(this.curEl);
		},
		move: function(){
			this.checkLooping();
			var scroll = this.element.getScroll();
			switch(this.options.direction){
				case 'down': this.start(0, scroll.y - this.elementsSize.y); break;
				case 'up': this.start(0, scroll.y + this.elementsSize.y); break;
				case 'right': this.start(scroll.x - this.elementsSize.x, 0); break;
				case 'left': this.start(scroll.x + this.elementsSize.x, 0); break;
			}
		},
		moveElement: function(target){
			return this;
		},
		toPrev: function(){
			if(this.running){return this;}
			this.options.direction = 'right';
			this.curEl = (this.curEl.getPrevious()||this.elements.getLast());
			this.toElement(this.curEl);
			return this;
		},
		toNext: function(){
			if(this.running){return this;}
			this.options.direction = 'left';
			this.curEl = (this.curEl.getNext()||this.elements[0]);
			this.toElement(this.curEl);
			return this;
		},
		
		toElement: function(el){
			this.curEl = el;
			return this.parent(this.curEl);
		}
	});	
	
	window.addEvent('domready', function(){
		document.getElements('.lazyload').each(function(el){
			var imgs = el.getElements('img');
			var width = imgs.length * 127;
			el.getFirst().setStyle('width', width).store('lazyloader', new LazyLoad({
				range: 0,
				resetDimensions: false,
				image: '/static-frontend/images/transparent.gif',
				elements: imgs,
				mode: 'horizontal',
				container: el,
				storeProp: 'rel',
				onComplete: function(){
					el.eliminate('lazyloader');
				}
			}));
			
			var scrollableWidth = el.getScrollSize().x - el.getSize().x;
			var slider = el.getNext('.slider');
			if(slider){
				var slider_fx = new ScrollBar(slider, slider.getElement('.knob'), {
				    wheel: false,
				    snap: false,
					btPrev: slider.getElement('.bt-left'),
					btNext: slider.getElement('.bt-right'),
				    onChange: function(pos){
						el.scrollTo(scrollableWidth*(pos/100));
				    }
				});
			}
		});
		
		if (document.getElement('.foto-detail')) {
		    $LAB.script('/static-frontend/javascripts/HM/HashListener.js').wait(function(){
		        window.HM = new HashListener();
				window.HM.start();
				
				var uri = new URI(document.location);
				
				document.getElement('.imagebox').setStyle('width', document.getElements('.thumbsbox').getWidth().sumup());
				if(!uri.get('fragment') && (uri.get('directory') + uri.get('file')).split('/').length > 3 && uri.get('file').toInt()){
					uri.set('fragment', uri.get('file')).set('file', '').set('directory', uri.get('directory').replace(/\/$/, '')).go();
				}
				var startEl = document.getElement('a[href$=' + uri.get('fragment') + ']');
				var ts = new InfiniteTicker2(document.getElement('.clipbox'), {
					'childSelector': '.thumbsbox',
					'onStart': function(){
						if (!this.statusCont) {
							this.statusCont = document.getElement('.status-text');
							this.statusText = document.getElement('.status-text').get('text');
							this.statusObj = {};
							this.fotosPerPage = 12;
							this.statusObj.count = this.element.getElements('img').length;
						}
						
						var curIndex = this.elements.indexOf(this.curEl);
						this.statusObj.rangeStart = curIndex * this.fotosPerPage + 1;
						this.statusObj.rangeEnd = ((curIndex + 1) * this.fotosPerPage).min(this.statusObj.count);
							
						if (this.statusCont) {
							this.statusCont.set('text', this.statusText.substitute(this.statusObj));
						}						
					},
					'onComplete': function(){
						if (!this.curEl.retrieve('loaded')) {
							this.curEl.getElements('a img').each(function(el){
								el.set('src', el.get('rel'));
							});
							this.curEl.store('loaded', true);
						}
					},
					'startEl': (startEl?startEl.getParent('.thumbsbox'):0)
				});
				document.getElements('.navigator .next').addEvent('click', (function(e){
					e.stop();
					this.toNext();
				}).bind(ts));
				
				document.getElements('.navigator .prev').addEvent('click', (function(e){
					e.stop();
					this.toPrev();
				}).bind(ts));
				
				var lightbox = new ReMooz(document.getElement('.remooz'), reMoozOpts);
	            document.getElement('.gross').addEvent('click', function(e){
	                e.stop();
	                lightbox.bound.click();
	            });
				document.getElement('.remooz').store('lightbox', lightbox);
				
				var pdl = new PhotoDetailLoader({
					'onRender': function(activeThumb){
						ts.toElement(activeThumb.getParent());
					}
				});
				
				window.HM.addEvent('hash-changed', pdl.load.bind(pdl));
				var allUris = document.getElements('.thumbsbox a').get('href');
				
				document.getElements('.button.next').addEvent('click', function(e){
					e.stop();
					if(pdl.activeThumb){
						(allUris[allUris.indexOf(pdl.activeThumb.get('href')) + 1] || allUris[0]).toURI().go();
					}
				});
				
				document.getElements('.button.prev').addEvent('click', function(e){
					e.stop();
					if(pdl.activeThumb){
						(allUris[allUris.indexOf(pdl.activeThumb.get('href')) - 1] || allUris.getLast()).toURI().go();
					}
				});
				
				document.addEvent('picRender', function(picData){
					document.getElements('input.getinput').each(function(el){
						el.set('value', el.get('rel').substitute(picData));
					});
				});		
				
				$LAB.script('/static-frontend/javascripts/comments.js');
				$LAB.script('/static-frontend/javascripts/tools.js');
			});
		}
		
		if(document.getElement('.set')){
			var nav = document.getElement('.navigator');
			document.getElement('.imagebox2').setStyle('width', document.getElements('.thumbsbox').getWidth().sumup());
			var tsSet = new InfiniteTicker2(document.getElement('.set-thumb-clip'), {
				'childSelector': '.thumbsbox',
				'onStart': function(){					
					var curIndex = this.elements.indexOf(this.curEl);
					nav.getElements('.page-nr').removeClass('active');
					nav.getElements('.page-nr[rel=' + curIndex + ']').addClass('active');						
				},
				'onComplete': function(){
					
					if (!this.curEl.retrieve('loaded')) {
						this.curEl.getElements('a').each(function(el){
							el.getElement('img').set('src', el.get('rel'));
						});
						this.curEl.store('loaded', true);
					}
				}
			});

			nav.getElements('.page-nr').addEvent('click', function(e){
				e.stop();
				tsSet.toElement(tsSet.elements[this.get('rel').toInt()]);
			});	

			document.getElements('.next').addEvent('click', (function(e){
				e.stop();
				this.toNext();
			}).bind(tsSet));
			
			document.getElements('.prev').addEvent('click', (function(e){
				e.stop();
				this.toPrev();
			}).bind(tsSet));	
		}
		
        var input_ort = document.id('input_ort');
		new ComBoo(input_ort.getFirst('select'), {'container': input_ort});

        var input_zeit = document.id('input_zeit');
		new ComBoo(input_zeit.getFirst('select'), {'container': input_zeit});
	});
})();