$(document).ready(function(){
	Archive.init();
});


var Archive={
	path:img_server+'/covers/',
	init:function(){
		var self=this;
		this.scroller=$('#archive-scroller');
		this.cutter=$('#archive-cutter');
		this.inner=$('#archive-inner');
		this.items=$('a',this.inner);
		this.margin=parseInt(this.items.css('marginRight'));
		this.cutterWidth=this.cutter.width();
		this.itemWidth=this.items.width();
		this.itemsWidth=this.inner.width();
		this.scrollContainer=$('#archive-scroll-container');
		this.scrollContainerWidth=this.scrollContainer.width();
		this.scrollerWidth=this.scrollContainerWidth-this.scroller.width();
		this.maxScroll=this.cutter[0].scrollWidth-this.cutterWidth-this.margin;
		this.padding=parseInt($('div:not(.selected) a',this.inner).css('paddingLeft'))*2;
		
		//////// Zascrolluje na vybrane cislo ///////
		var itr=$('#archive-inner .selected a').attr('href').match(/([^\/]+)\/$/)[1],
		x=(this.items.length-itr)*(this.itemWidth+this.margin+this.padding),
		y;
		x=x>self.maxScroll?self.maxScroll:x;
		y=parseInt(x/self.maxScroll*self.scrollerWidth);
		self.cutter.animate({scrollLeft:x})
		self.scroller.animate({left:y+'px'});
		///////////////
		
		this.scroller
			.draggable({addClasses:false,axis:'x',containment:'parent'})
			.bind('drag',function(e,ui){
				var k=parseInt(ui.position.left)/self.scrollerWidth;
				self.cutter.scrollLeft(parseInt(k*(self.itemsWidth-self.cutterWidth-self.margin)));
			});
			
		this.scrollContainer.click(function(e){
			if(!$(e.target).is('#archive-scroller')){
				var k=(e.pageX-parseInt(self.scrollContainer.offset().left))/self.scrollContainerWidth,
				x=parseInt(k*self.maxScroll),
				y=parseInt(k*self.scrollerWidth);
		 		self.cutter.stop(true).animate({scrollLeft:x});
		 		self.scroller.stop(true).animate({left:y+'px'});
			}
		});

		$('#archive-left,#archive-right').click(function(){
			var sl=self.cutter.scrollLeft(),
			a=5*(self.itemWidth+self.margin+self.padding),
			x,y;
			if($(this).is('#archive-left')){
				x=sl-a<0?0:sl-a;
			}else{
				x=sl+a>self.maxScroll?self.maxScroll:sl+a;
			}
			y=parseInt(x/self.maxScroll*self.scrollerWidth);
			self.cutter.stop(true).animate({scrollLeft:x});
			self.scroller.stop(true).animate({left:y+'px'});
		});

		setInterval(Archive.checkVisible,500);
	},
	checkVisible:function(){
		var self=Archive,
		active=parseInt(self.cutter.scrollLeft()/(self.itemWidth+self.margin+self.padding)),
		i;
		for(i=active;i<=active+6;i++){
			var it=$(self.items[i]);
			if(!it.is('.loaded')){
				if(it.is('.onscreen')){
					it.removeClass('onscreen').addClass('loaded');
					it[0].img=$(new Image());
					it[0].img[0].i=i;
					it[0].img.load(function(){
						$('span',self.items[this.i]).replaceWith('<img src="'+$(this).attr('src')+'" alt=""/>');
					});
					it[0].img.attr('src',self.path+'t_'+it.attr('href').match(/([^\/]+)\/$/)[1]+'.jpg');
				}else{
					it.addClass('onscreen');
				}
			}
		}
		$(self.items[active]).prevAll('.onscreen').removeClass('onscreen');
		$(self.items[i]).nextAll('.onscreen').removeClass('onscreen');
	}
};