Element.implement({
  makeClickable: function(){
		var anchor = this.getElement('a');
		if (anchor){
			this.setStyle('cursor', 'pointer');
			this.addEvent('click', function(event){
			  if (document.id(event.target) != anchor) window.location = anchor.href;

			});
		}
	}
});


var SimpleCarousel = new Class({

  Extends: Fx.Scroll,
	
	options: {
		// Fx.Scroll options
		duration: 500,
		link: 'cancel',
		transition: 'cubic:out',
		mode: 'horizontal',
		wheelStops: false,
		// static carousel options
		loop: true,
		auto: false,
		interval: 0,
		visible: 1,  // number of visible items
		size: false, // overrides item dimensions
		childSelector: ':first-child > div',
		contentSelector: ':first-child'
	},
	
	initialize: function(element, options){
		this.parent(element, options);
		
		this.set(0, 0);
		
		this.elements = this.element.getElements(this.options.childSelector);
		this.count = this.elements.length;
		this.content = this.element.getElement(this.options.contentSelector);
		this.current = 0;
		this.index = 0;
		
		// set width
		this.size = this.options.size ? this.options.size : this.elements[0].getSize().x;
		this.content.setStyle('width', this.elements.length*this.size);

		// auto move
		this.scrollTimer = null;
		if (this.options.auto){
			this.autoScroll('start');
		}
		
		// self events
		this.addEvents({
		  'complete': function(){
				this.fireEvent('scrollComplete', this.index);
			}
		});
		
		this.fireEvent('ready');
		
		return this;
		
	},
	
	getCount: function(){
		return this.elements.length;
	},
	
	getCurrent: function(){
		return this.index;
	},
	
	toNext: function(steps){
		if (steps == undefined) steps = 1;
		for (var i = 0; i<steps; i++){
			if (this.current+this.options.visible == this.count){
				if (this.options.loop){
					var scroll = this.element.getScroll();
					var element = this.content.getFirst();
					element.dispose();
					this.set(scroll.x-this.size, scroll.y)
					element.inject(this.content, 'bottom');
					this.index = ++this.index%this.count;
				} else {
					this.current = 0;
					this.index = 0;
				}
			} else {
				this.current++;
				this.index = ++this.index%this.count;
			}
		}
		this.toElement(this.elements[this.index]);
		
		return this;
	},
	
	toPrevious: function(steps){
		if (steps == undefined) steps = 1;
		for (var i = 0; i<steps; i++){
			if (this.current == 0){
				if (this.options.loop){
					var scroll = this.element.getScroll();
					var element = this.content.getLast();
					element.dispose();
					this.set(scroll.x+this.size, scroll.y)
					element.inject(this.content, 'top');
					this.index--;
					if (this.index < 0) this.index = this.count-1;
				} else {
					this.current = this.count-1;
					this.index = this.count-1;
				}
			} else {
				this.current--;
				this.index--;
				if (this.index < 0) this.index = this.count-1;
			}
		}
		this.toElement(this.elements[this.index]);
		
		return this;
	},
	
	toItem: function(index){
	  if (this.options.auto) this.autoScroll('stop');
		
		if (index == 'next') index = (this.index+1)%this.count;
		if (index == 'prev') index = this.index-1;
		if (index < 0) index = this.count-1;
	

		var stepToPrevious = (index < this.index ? this.index - index : this.index + this.count - index);
		var stepToNext = (index > this.index ? index - this.index : index + this.count - this.index);

    if (stepToPrevious < stepToNext){
			this.toPrevious(stepToPrevious);
		} else {
			this.toNext(stepToNext);
		}
		
		if (this.options.auto) this.autoScroll('start');
		return this;
	},
	
	autoScroll: function(command){
		switch (command){
			case 'start':
			  this.scrollTimer = this.toNext.periodical(this.options.interval, this);
			break;
			case 'stop':
			  $clear(this.scrollTimer);
			break;
		}
		
		return this;
	}


});

var BackgroundSlideshow = new Class({
	
	Implements: [Events, Options],

  options: {
		// onStart: $emtpy()
		// onReady: $empty()
		path: '/images/page-bg-{i}.jpg', // dynamic loading OR image folder
		images: [], // predefined images
		auto: true,
		duration: 10000,
		fxDuration: 500,
		range: 0
	},
	
  initialize: function(container, options){
		this.container = document.id(container);
		
		this.setOptions(options);
		
		this.paths = [];
		if (this.options.images.length){
			var length = this.options.images.length;
			for (var i = 1; i < length; i++){
				this.paths.push(this.options.path + this.options.images[i]);
			}
		} else {
			for (var i = 1; i < this.options.range; i++){
				this.paths.push(this.options.path.substitute({i: i}));
			}
		}
		
		this.slides = [];
		this.slides.push(this.container.getElement('.image'));
		this.current = 0;
		this.slideFx = [];
		this.slideFx[0] = new Fx.Tween(this.slides[0], { property: 'opacity', duration: this.options.fxDuration, link: 'cancel' }).set(0);
		this.count = 1;
		this.timer = null;
		
		
		this.images = new Asset.images(this.paths, {
		  onComplete: function(){
				this.fireEvent('build');
			}.bind(this)
		});
		
		// class events
		this.addEvents({
		  'build': function(){ this.createSlides(); },
			'start': function(){ this.start(); }
		});
		
	},
	
	createSlides: function(){
		this.images.each(function(image, index){
			this.slides[index+1] = new Element('div', {
			  'class': 'image',
				'styles': {
					'background-image': 'url('+image.src+')'
				}
			});
			this.slideFx.include(new Fx.Tween(this.slides[index+1], { property: 'opacity', duration: this.options.fxDuration, link: 'cancel' }).set(0));
			this.slides[index+1].inject(this.container);
		}, this);
		
		this.count = this.slides.length;
		
		this.fireEvent('ready');
		if (this.options.auto) this.fireEvent('start');
	},
	
	start: function(){
		this.timer = this.move.periodical(this.options.duration, this);
	},
	
	move: function(){
		this.slideFx[this.current].start(0);
		this.current = ++this.current%this.count;
		this.slideFx[this.current].start(1);
	},
	
	show: function(index){
		this.slideFx[this.current].start(0);
		this.current = index;
		this.slideFx[this.current].start(1);
	}
	
});

var Prodejci = {

  init: function(){

		// map init
		if ($('map-wrapper')) new Map('map-wrapper', {
			field: '#mapa-sr-wrapper',
			parseRegexp: /\/predajcovia\/([^\-]*)(.*)\//
		});

	}
	
};

var Map = new Class({
		
		Implements: Options,
		
		options: {
			field: '.mapa-cr-wrapper',
			areas: 'area',
			parseRegexp: /\/predajcovia\/([^\/-]*)(-.*)?\/.*/,
			width: 425,
			height: 211
		},
	
	  initialize: function(container, options){
			 
		   this.container = document.id(container);
			 
			 this.setOptions(options);
			 
			 this.field = this.container.getElement(this.options.field);
			 this.field.getElement('img').setOpacity(0.001);
			 
			 // kraje
			 this.areas = this.container.getElements('area');
			 
			 this.kraje = new Hash({
						'kosicky'         : [3, 1],
						'presovsky'       : [0, 2],
						'banskobystricky' : [1, 1],
						'zilinsky'        : [2, 1],
						'trenciansky'     : [3, 0],
						'nitriansky'      : [0, 1],
						'trnavsky'        : [2, 0],
						'bratislavsky'    : [1, 0]
			 });
			 
			 this.bubbles = new Hash({
						'banskobystricky'	: [182,  90],
						'bratislavsky'    : [ 14, 102],
						'kosicky' 				: [290,  55],
						'nitriansky'      : [ 99, 118],
						'presovsky'       : [290,  15],
						'trenciansky'     : [ 79,  54],
						'trnavsky'        : [ 50,  84],
						'zilinsky'   			: [150,  15]
			 });

       this.areas.each(function(element){
          var kraj = element.getProperty('href').replace(this.options.parseRegexp, '$1');
				 // bubble
	 			  var bubble = new Element('p', { 'class' : 'bubble' });
				  bubble.set('html', '<span>' + element.getProperty('title') +'</span>');
					bubble.setStyles({
					    'left' : this.bubbles.get(kraj)[0],
							'top'  : this.bubbles.get(kraj)[1]
					});
				  var bubbleFx = new Fx.Tween(bubble, { property: 'opacity', duration: 200, wait: false });
				  bubbleFx.set(0);
				  bubble.inject(this.field);
					
					element.removeProperties('title', 'alt');
					element.addEvents({
					  'mouseenter': function(){
							this.move(this.kraje.get(kraj), this.field);
							bubbleFx.start(1);
						}.bind(this),
						'mouseleave': function(){
							this.move([0, 0], this.field);
							bubbleFx.start(0);
						}.bind(this)
					});
			 }, this);
			
		},
		
		move: function(coords, field){
			var col = coords[0];
			var row = coords[1];
			field.setStyle('background-position', (-this.options.width*col) + 'px ' + (-this.options.height*row) + 'px');
		}
		
});


var Site = {
	
	init: function(){
		
		$$('div.box, div.clickable').makeClickable();
		
		if ($('mapa-sr-wrapper')) Prodejci.init();
		
		$$('div.carousel').each(function(element){
			  var wrapper = element.getParent();
				var carousel = new SimpleCarousel(element, {
					size: 328,
					visible: 3,
					transition: 'sine:in:out',
					duration: 1000,
					interval: 7000,
					loop: true,
					auto: true,
					onReady: function(){
						wrapper.addClass('ready');
					}
				});
				
				var nextBtn = wrapper.getElement('a.next');
				if (nextBtn){
					nextBtn.addEvent('click', function(event){
						event.preventDefault();
						carousel.toItem('next');
					});
				}
				
				var prevBtn = wrapper.getElement('a.prev');
				if (prevBtn){
					prevBtn.addEvent('click', function(event){
						event.preventDefault();
						carousel.toItem('prev');
					});
				}
		});
		
		this.backgrounds = ['bg-1.jpg', 'bg-2.jpg', 'bg-3.jpg', 'bg-4.jpg'].shuffle();
		// prepare first element
		var pageBg = new Element('div', {
			id: 'page-bg'
		});
		pageBg.adopt(new Element('div', {
			'class': 'image',
			styles: {
				opacity: 0
			}
		}));
		pageBg.inject(document.body, 'top');
		
		this.slideshow = new BackgroundSlideshow('page-bg', {
			path: '/img/backgrounds/',
			images: this.backgrounds,
			auto: true,
			fxDuration: 1000
		});

	}
	
};

window.addEvent('domready', Site.init.bind(Site));