// JavaScript Document

document.id = function(attr){
		return $(attr);
}

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 Mapa = {
	
	  init: function(){
			 
		 
			 var field = $('mapa-cr-wrapper');
			 field.getElement('img').setOpacity(0.001);
			 
			 // kraje
			 var areas = $('mapa-cr-large').getElements('area');
			 
			 var 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] 
			 });
			 
			 var 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] 
			 });

       areas.each(function(element){
          var kraj = element.getProperty('href').replace('/prodejci/', '').replace('-kraj', '');
								 // bubble
	 			  var bubble = new Element('p', { 'class' : 'bubble' });
				  bubble.set('html', '<span>' + element.getProperty('title') +'</span>');
					bubble.setStyles({
					    'left' : bubbles.get(kraj)[0],
							'top'  : bubbles.get(kraj)[1]
					});
				  var bubbleFx = new Fx.Tween(bubble, { property: 'opacity', duration: 200, wait: false });
				  bubbleFx.set(0);
				  bubble.inject(field);
					
					element.addEvent('mouseenter', function(event){
					    Mapa.move(kraje.get(kraj), field);
							bubbleFx.start(1);
					});
					
					element.addEvent('mouseleave', function(event){
							Mapa.move([0, 0], field); 
							bubbleFx.start(0);
					});
			 });
			
		},
		
		move: function(coords, field){
			var col = coords[0];
			var row = coords[1];
			var width = 392;
			var height = 243;
			field.setStyle('background-position', (-width*col) + 'px ' + (-height*row) + 'px');
		}
		
};
*/
var Map = new Class({
		
		Implements: Options,
		
		options: {
			field: '.mapa-cr-wrapper',
			areas: 'area',
			parseRegexp: /\/prodejni-mista\/([^\/-]*)(-.*)?\/.*\//,
			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, 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 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
			});
		});
		
		/*if ($('category-selection')){
			new Tabs('category-selection');
			$$('.map-wrapper').each(function(mapWrapper){
		    new Map(mapWrapper);
		  });
		}*/
		// map init
//		if ($('map-wrapper')) Mapa.init();
		// map init
		if ($('map-wrapper')) new Map('map-wrapper', {
			field: '#mapa-cr-wrapper',
			parseRegexp: /\/prodejni-mista\/([^\-]*)(.*)\/(.*)/
		});
	}
	
};


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