// JavaScript Document

var oldIE = (Browser.Engine.trident && Browser.Engine.version < 5);

var FlashLoader = {
	
	init: function(){
		this.config = new Hash({
		  hpLeftBoxFlash: { path: '/flash/hp-left-box3.swf', width: 282, height: 202 },
		  hpMiddleBoxFlash: { path: '/flash/hp-middle-box2.swf', width: 282, height: 202 },
			hpRightBoxFlash: { path: '/flash/hp-right-box2.swf', width: 282, height: 202 },
			homepageFlash: { path: '/flash/metylancz.swf', width: 715, height: 240 },
			//flashSuchar: { path: '/flash/suchar-roku.swf', width: 469, height: 60 }
			flashSuchar: { path: '/flash/sr-promo.swf', width: 180, height: 370 }
		});
		
		this.items = $$('.flash');
		
		if(Browser.Plugins.Flash.build > 0){
			this.items.each(function(item){
			  var id = item.get('id');
				if (id && this.config.has(id)){
					var params = this.config.get(id);
					new Swiff(params.path, {
						width: params.width,
						height: params.height,
						container: item
					});
				}
			}, this);
		
		} else {
			this.items.each(function(item){
			  var id = item.get('id');
				if (id && this.config.has(id)){
					document.id(id).getParent().addClass('load-replacer');
				}
			}, this);
		}
	}
};

var GiantLink = {
	
	init: function(){
		this.container = $('giant');
		this.anchor = this.container.getElement('a');
		this.logo = this.container.getElement('img').setStyle('cursor', 'pointer');
		this.logo.addEvent('click', function(){
		  window.location = this.anchor.get('href');
		}.bind(this));
																		
	}
};

var PNGFix = new Class({

  initialize: function(img){
		this.img = $(img);
    this.src = this.img.get('src');
		this.img.set('src', '/img/blank.gif');
		this.img.style.filter = 'progid:DXImageTransform.Microsoft.AlphaImageLoader(src="'+this.src+'", sizingMethod="image")';
	}
	
});

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'         : [395, 180],
                        'praha'           : [170, 75],
                        'kralovehradecky' : [275, 45],
                        'vysocina'        : [260, 155],
                        'jihocesky'       : [145, 170],
                        'karlovarsky'     : [50, 50],
                        'plzensky'        : [70, 105],
                        'jihomoravsky'    : [325, 175],
                        'moravskoslezsky' : [400, 100],
                        'olomoucky'       : [365, 70],
                        'pardubicky'      : [270, 90],
                        'liberecky'       : [190, 5],
                        'ustecky'         : [110, 20],
                        'stredocesky'     : [130, 65]
             });

       areas.each(function(element){
          var kraj = element.getProperty('id');
            // bubble
                  var bubble = new Element('p', { 'class' : 'bubble' });
                  //bubble.setHTML('<span>' + element.getProperty('title').replace('|', '<br />') +'</span>');
                    bubble.set('html', '<span>' + element.getProperty('title').replace('|', '<br />') +'</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);
                    });
             });
             
             var selectedRow = '';
             
             // SmoothScroll
             SmoothScroll.implement({
                useLink: function(link, anchor){
                        link.addEvent('click', function(event){
                            this.anchor = anchor;
                            this.toElement(anchor);
                            event.stop();
                            if ($(anchor)) {
                                 if ($(selectedRow)) $(selectedRow).removeClass('active');
                                 $(anchor).addClass('active');
                                 selectedRow = anchor;
                            }
                        }.bindWithEvent(this));
                    }
             });
             
             new SmoothScroll();
            
        },
        
        move: function(coords, field){
            var col = coords[0];
            var row = coords[1];
            var width = 530;
            var height = 340;
            field.setStyle('background-position', (-530*col) + 'px ' + (-340*row) + 'px');
        }
        
};

var Dealers = {
	
	init: function(){
				
		this.searchDealerInput = $('form-search-dealer-city');
		if (this.searchDealerInput) new Autocompleter.Request.JSON(this.searchDealerInput, '/prodejci/mesta');
	}

};
 
window.addEvent('domready', Dealers.init.bind(Dealers));

var Metylan =  {
	
	init: function(){
		
		// giant
		GiantLink.init();
		
		// target=_blank replacement
		$$('a._blank').each(function(anchor){
		  anchor.set('target', '_blank');
		});
		
		// reflection
		if (!oldIE){
			var reflectedImages = $$('.product-image img, .item-list .img img');
			reflectedImages.each(function(image){
			  image.reflect({height: 1/10, opacity: 0.5});
			});
		}
		
		// png fix
		if (oldIE){
			$$('img[src$=png]').each(function(img){
				new PNGFix(img);
			});
		}
		
		// clickable blocks
		$$('.clickable').each(function(item){
		  item.setStyle('cursor', 'pointer');
			var anchor = item.getElement('a');
			if (anchor){
				item.addEvent('click', function(){
				  window.location = anchor.get('href');
				});
				anchor.addEvent('click', function(event){
				  event.stopPropagation();
				});
			}
			
		});
		
		this.anchors = $$('.anchors');
		if (this.anchors.length > 0){
			new Fx.SmoothScroll({
			  links: '.anchors a',
				transition: Fx.Transitions.Quint.easeInOut,
				duration: 1000
			});
		}
		
		// ReMooz
		$$('.photogallery a').each(function(element){
		  new ReMooz(element, {
          centered: true,
					opacityResize: 0,
					cutOut: false,
          origin: element.getElement('img')
      });
		});
		
		// antispam
		$$('form.protect').each(function(form){
		  new Element('input', {
			  type: 'hidden',
				name: 'anti',
				value: 'metylan'
			}).inject(form);
		});
		
		FlashLoader.init();

		if ($('mapa-cr-wrapper')) Mapa.init();

	}
	
};

var Toggling = {
	  
		config: {
	    toggler : '.toggler',
			toggled : '.toggled',
			duration : 500
		},
		
		init: function(options){
			  
				options = Object.extend(this.config, options || {});
				
				var togglers = $$(options.toggler);
				var slides = $$(options.toggled);

				togglers.each(function(element){
				    
						// css
						
						var slideFx = new Fx.Slide(slides[togglers.indexOf(element)], { duration: options.duration, transition: Fx.Transitions.Cubic.easeOut }).hide();
						
						element.addEvent('click', function(e){
					      slideFx.toggle();
								this.toggleClass('on');
						});
						
				});
				
		}
};

/**/

var ie6FastNav = {
	
	init: function(){
		
		var fnContainer = $('pages-fast-nav');
		var fnList = $('fast-nav-list');
		
		fnContainer.addEvent('mouseover', function(){
		  fnList.addClass('hover');
		});
		fnContainer.addEvent('mouseout', function(){
		  fnList.removeClass('hover');
		});
		
	}
	
};

/**/

window.addEvent('domready', function(){

  if ($$('.toggler').length) {
		Toggling.init();
	}
	
	Metylan.init();
	
	if ($('pages-fast-nav')) {
		ie6FastNav.init();
	}
	
	new SmoothScroll({ duration:700 }, window); //700 milliseconds to get there
	
	
});

