// JavaScript Document

Element.implement({

  hide: function(){
		this.displayStyle = this.getStyle('display');
		this.setStyle('display', 'none');
		return this;
	},
	
	show: function(style){
		var style = style ? style : (this.displayStyle ? this.displayStyle : 'block');
		this.setStyle('display', style);
		return this;
	}
});

var EventClasses = {
	
	init: function(){
		$$('.no-link').each(function(element){
      element.addEvent('click', function(event){
			  event.stop();
			});
			element.setStyle('cursor', 'default');
		});
		
		$$('.clickable').each(function(element){
		  element.addEvent('click', function(event){
			  event.preventDefault();
				window.location = this.getElement('a').get('href');
			});
			element.setStyle('cursor', 'pointer');
			element.getElement('a').addEvent('click', function(event){
			  event.preventDefault();
			});
		});
	}
	
};


var Map = new Class({
		
		Implements: [Options, Events],
		
		options: {
			field: '.mapa-cr-wrapper',
			areas: 'area',
			parseRegexp: /\/prodejni-mista\/([^\/-]*)(-.*)?\/.*\//,
			width: 392,
			height: 243,
			select: false
		},
	
	  initialize: function(container, options){
			 
		   this.container = document.id(container);
			 
			 this.setOptions(options);
			 
			 this.selected = false;
			 
			 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, wait: false });
				  bubbleFx.set(0);
				  bubble.inject(this.field);
					
					element.removeProperties('title', 'alt');
					element.addEvents({
					  'mouseenter': function(){
							if (!this.selected) this.move(this.kraje.get(kraj), this.field);
							bubbleFx.start(1);
						}.bind(this),
						'mouseleave': function(){
							if (!this.selected) this.move([0, 0], this.field);
							bubbleFx.start(0);
						}.bind(this)
					});
					
					if (this.options.select){
						element.addEvent('click', function(event){
							event.preventDefault();
							this.selected = element;
							this.move(this.kraje.get(kraj), this.field);
							this.fireEvent('select', [element, kraj]);
						}.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');
			
			return this;
		},
		
		reset: function(){
			this.move([0, 0], this.field);
		
			return this;
		}
		
});

var Tabs = new Class({

  Implements: [Events, Options],
	
	options: {
		tabs: '.tab-anchors li',
		panels: '.tab-panel',
		disableClass: 'disabled',
		start: 0,
		observeDuration: 100
		//onShow: $empty(tab, panel, anchor),
		//onClose: $empty(tab, panel, anchor)
	},
	
	initialize: function(container, options){
		
		this.setOptions(options);
		
		this.container = document.id(container);
		this.tabs = new Hash(); // contains pairs of tabs and panels with anchor as id
		this.anchors = new Array(); // contains all available tab ids
		this.handlers = this.container.getElements(this.options.tabs);

    this.current = null;

    this.handlers.each(function(handler){
		   this.addTab(handler);
			 var link = handler.getElement('a');
			 if (handler.hasClass('disabled') && link){
				 link.addEvent('click', function(event){
				   event.preventDefault()
				 });
			 }
		}, this);
		
		// init default tab
		this.defaultTab = this.anchors[this.options.start];
		var hash = new URI().get('fragment');
    if (this.tabs.has(hash)) this.defaultTab = hash;
		if (this.defaultTab){
			this.show(this.defaultTab);
		}
		
		this.repeater = this.observe.periodical(this.options.observeDuration, this);
		
	},
	
	addTab: function(handler){
		var anchor = handler.getElement('a').get('href');
    if (anchor.test(/^#(.)+$/)){
			var panel =  this.container.getElement(anchor);
			if (panel){
				anchor = anchor.replace('#', '');
				this.tabs.set(anchor, {
				  tab: handler,
					panel: panel.removeProperty('id').hide(),  // remove id to prevent browser from jumping in page
					anchor: anchor
				});
				this.anchors.include(anchor);
			}
		}
	},
	
	show: function(id){
		if (id == '') id = this.defaultTab;
		if (this.tabs.has(id)){
			var tabPanel = this.tabs.get(id);
			if (this.current){
				this.current.tab.removeClass('active');
				this.current.panel.hide();
				this.fireEvent('close', [this.current.tab, this.current.panel, this.current.anchor]);
			}
			var tabPanel = this.tabs.get(id);
			tabPanel.tab.addClass('active');
			tabPanel.tab.getElement('a').blur();
			tabPanel.panel.show();
			this.current = tabPanel;
			this.fireEvent('show', [tabPanel.tab, tabPanel.panel, id]);
		}
	},
	
	observe: function(){
		var hash = window.location.hash.replace('#', '');
		if (hash != this.current.anchor){
      this.show(hash);
		}
	}
		
});

var HenkelLepidla = {
	
	init: function(){
		
		// init Event Classes
		EventClasses.init();
		

		
		// go to other site
		if ($('form-prejit')){
			var prejit = $('form-prejit').getElement('select');
			prejit.addEvent('change', function(){
					var adresa = prejit.options[prejit.selectedIndex].value;
					if (adresa != '0') { window.location.href='http://www.'+adresa+'.cz'; }
			});
		}
		
		// footer: giant link
		if ($('giant')){
			var giant = $('giant').getElement('span');
			giant.setStyle('cursor', 'pointer');
			giant.addEvent('click', function(){
			  window.open('http://www.giant.cz');
			});
		}
		
		// loga na homepage
		if ($('loga-lepidel')){
			var boxes = $('loga-lepidel').getElements('div.desc');
			var boxesFx = new Array();
			boxes.each(function(box, index){
			  boxesFx[index] = new Fx.Tween(box,  { property: 'opacity', duration: 200, link: 'cancel' });
				boxesFx[index].set(0);
				var parentLi = box.getParent('li');
				parentLi.addEvent('mouseenter', function(){
				  boxesFx[index].start(1);
				});
				parentLi.addEvent('mouseleave', function(){
				  boxesFx[index].start(0);
				});
			});
		}
		
		// ReMooz
		$$('#page-prodejni-mista .pic a').each(function(element){
			new ReMooz(element, {
				'shadow': 'onOpen',
				'resizeFactor': 0.9,
				'cutOut': false,
				'opacityResize': 0,
				'dragging': true,
				'centered': true,
				'origin' : element.getParent().getElement('img')
			});
		});
		
		$$('a[rel^=lightbox]').each(function(element){
			new ReMooz(element, {
				'shadow': 'onOpen',
				'resizeFactor': 0.9,
				'cutOut': false,
				'opacityResize': 0,
				'dragging': true,
				'centered': true
			});
		});
		

		// map init
		if ($('map-wrapper')){
			this.map = new Map('map-wrapper', {
				field: '#mapa-cr-wrapper',
				parseRegexp: /\/prodejni-mista\/([^\-]*)(.*)\/(.*)/,
				select: true,
				onSelect: function(element, kraj){
					var container = document.id('form-main-search-group-map');
					if (container){
						var checked = container.getElements('input[type=radio]:checked');
						checked.each(function(radio){
							radio.checked = false;
						});
						document.id('radio-'+kraj).checked = true;
					}
					
					Dealers.Form.MainSearch.resetCity();
				}
			});
		}
	}
	
};


window.addEvent('domready', function(){
  HenkelLepidla.init();
	
});