// JavaScript Document


// HTML5 form support
Browser.Features = [Browser.Features, {}].pick();
Browser.Features.placeholder = 'placeholder' in document.createElement('input');

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;
			});
		}
	},
	

	createPlaceholder: function(){
		var text = this.get('placeholder');
		this.addEvents({
			'focus': function(){
				if (this.value.trim() == text) this.value = '';
			},
			'blur': function(){
				if (this.value.trim().length == 0) this.value = text;
			}
		});
		// prevent submitting placeholder value with form
		var form = this.getParent('form');
		if (form){
			form.addEvent('submit', function(){
				if (this.value.trim() == text) this.value = '';
			}.bind(this))
		}
		if (this.value.trim().length == 0) this.value = text;
		return this;
	}

});

var Giant = {
	
	init: function(){
		this.container = document.id('giant');
		this.img = this.container.getElement('img');
		this.link = this.container.getElement('a');
		
		this.img.set({
		  'styles': {
				'cursor': 'pointer'
			},
			'events': {
				'click': function(event){ window.location = this.link.get('href'); }.bind(this)
			}
		});
	}
 };

var Map = new Class({
		
		Implements: Options,
		
		options: {
			field: '.mapa-cr-wrapper',
			areas: 'area',
			parseRegexp: /\/prodejci\/([^\/-]*)(-.*)?\/.*/,
			width: 392,
			height: 243
		},
	
	  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({
						'zlinsky'         : [1, 2],
						'praha'           : [2, 1],
						'kralovehradecky' : [3, 2],
						'vysocina'        : [1, 0],
						'jihocesky'       : [0, 2],
						'karlovarsky'     : [2, 0],
						'plzensky'        : [3, 1],
						'jihomoravsky'    : [0, 3],
						'moravskoslezsky' : [2, 3],
						'olomoucky'       : [1, 3],
						'pardubicky'      : [2, 2],
						'liberecky'       : [0, 1],
						'ustecky'         : [3, 0],
						'stredocesky'     : [1, 1] 
			 });
			 
			 this.bubbles = new Hash({
					  'zlinsky'         : [317, 169],
						'praha'           : [132,  65],
						'kralovehradecky' : [217,  53],
						'vysocina'        : [198, 139],
						'jihocesky'       : [116, 160],
						'karlovarsky'     : [ 34,  45],
						'plzensky'        : [ 53, 102],
						'jihomoravsky'    : [251, 175],
						'moravskoslezsky' : [339, 110],
						'olomoucky'       : [288, 127],
						'pardubicky'      : [233,  98],
						'liberecky'       : [172,  12],
						'ustecky'         : [105,  22],
						'stredocesky'     : [163,  72] 
			 });

       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, link: 'cancel' });
				  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(){

		// map init
		if (document.id('map-wrapper')) new Map('map-wrapper', {
			field: '#mapa-cr-wrapper',
			parseRegexp: /\/prodejci\/([^\-]*)(.*)\//
		});

		// form loader
		this.Form.init();
		
		// group section (with vert slides)
		
		if($('chemopren-profi')) { this.ProductGroup.init(); }
		if($('chemopren-klasik')) { this.ProductGroup.init(); }
		
		// clickable collection
		$$('div.product-item').makeClickable();

		// target=_blank replacement
		$$('._blank').each(function(item){
			if(item.hasClass('clickable')) {
				var url = item.getElement('a').get('href');
				item.setStyle('cursor', 'pointer');
				item.getElements('a').set('href', '#');
				item.addEvent('click', function(){
						window.open(url, "_blank");
				});
			} else {
			  item.set('target', '_blank');
			}
		});
		
		// image galleries
		var images = $$('a[rel^=lightbox]');
		if (images.length){
			var gallery = new CeraBox({
				group: true,
				errorLoadingMessage:	'Požadovaná fotografie nebyla načtena. Prosím opakujte znovu.'
			});
			gallery.addItems(images, {animation: 'ease'});
		}

	}
	
 };

Site.Form = {
	
	init: function(){
		
		this.forms = document.getElements('form');

		this.forms.each(function(form){
			var formID = form.get('id');
			if (formID){
				var objectTitle = formID.replace('form-','').camelCase().capitalize();
				if (this[objectTitle]) this[objectTitle].init(form);
			}
		}, this);
		
		// placeholders
		if (!Browser.Features.placeholder){
			$$('input[placeholder]').createPlaceholder();
		}
		
	}
	
 };
 
Site.ProductGroup = {

	init: function(){
		  
		  $$('div.slide').setStyle('display', 'block');
		  
		  var status = {
			'true': 'Skrýt',
			'false': 'Zobrazit více informací'
		  };
		  
		var slide1 = new Fx.Slide('slide1');
		slide1.hide();
		var slide2 = new Fx.Slide('slide2');
		slide2.hide();
		var slide3 = new Fx.Slide('slide3');
		slide3.hide();
		
		  $$('a.more-info.info-1').addEvent('click', function(event){
			event.stop();
			slide1.toggle();
		  });
		  
		  slide1.addEvent('complete', function() {
			$$('a.info-1').set('text', status[slide1.open]);
		  });
		  
		  $$('a.more-info.info-2').addEvent('click', function(event){
			event.stop();
			slide2.toggle();
		  });
		  
		  slide2.addEvent('complete', function() {
			$$('a.info-2').set('text', status[slide2.open]);
		  });

		  $$('a.more-info.info-3').addEvent('click', function(event){
			event.stop();
			slide3.toggle();
		  });
		  
		  slide3.addEvent('complete', function() {
			$$('a.info-3').set('text', status[slide3.open]);
		  });
	}	

};

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