/**
 * @author Dipl.-Ing. (FH) André Fiedler <a.fiedler@oe-konzept.de>
 *
 * requires: HoverGroup.js
 */

Locale.define('en-US', 'DatePicker', {
	select_a_time: 'Bitte wählen Sie eine Zeit',
	use_mouse_wheel: 'Mit Hilfe des Mausrades können Sie den Wert schneller ändern',
	time_confirm_button: 'OK'
});
var BadegaertenMerkzettel = {

    bookmark: function(type, id, value){
		value = value.toInt() || 1;
        if (id != null && id != '') {
            var sCard = JSON.decode(Cookie.read('shopping-cart')) || {};

            sCard.items = sCard.items || {};
            if(!sCard.items[id])
                sCard.items[id] = 0;
            
            sCard.items[id] = sCard.items[id].toInt() + value;

            Cookie.write('shopping-cart', JSON.encode(sCard), {
                duration: (365 * 10),
                path: '/'
            });
            
            alert('Das Angebot wurde in Ihren Warenkorb gelegt. Diesen finden Sie oben rechts auf der Internetseite. Klicken Sie dort, um zum Bestellprozess zu gelangen.');
            new Request({
                'url': 'ajax/count_bookmark_click.php',
                'method': 'get',
                'data': {
                    'id': id
                }
            }).send();
        }
    },

    isBookmarked: function(type, id){
        if (id != null && id != '') {
            var sCard = JSON.decode(Cookie.read('shopping-cart')) || {};

            if(sCard.items && sCard.items[id])
                return true;
        }
        return false;
    },

    printToElementTop: function(el){
        this.toElementTop = el;
    },

    printToElementMenu: function(el){
        this.toElementMenu = el;
    },

    refreshCounter: function(){
        if(!this.printToElementTop && !this.toElementMenu) return;
        var sCard = JSON.decode(Cookie.read('shopping-cart')) || {};
 
        if(sCard.items && Object.getLength(sCard.items) > 0){

			var value = 0;
            Object.each(sCard.items, function(i){
				if(i !== null && i !== undefined)
                    value += i.toInt();
            });

            this.toElementTop.set('text', '(' + value + ') / Kasse');
            this.toElementMenu.set('text', '(' + value + ') / Kasse');
            this.toElementTop.getParent().setStyle('font-weight', 'bold');
        } else {
            this.toElementTop.set('text', '');
            this.toElementMenu.set('text', '');
            this.toElementTop.getParent().setStyle('font-weight', 'normal');
        }
    }
 };


 var BadegaertenMenu = new Class({

	Implements: [Events, Options],

	options: {
		cssPathMenu:  			'div.menu',
		cssPathTabsContainer: 	'.tabs',
		cssPathTabs: 			'.tabs a',
		cssPathTabsContent: 	'.tab-content div'
	},

	selectors: {
		'.info': {
			'color': '#fff',
			'background-color': '#3378CC'
		},
		'.wohlfuehlen': {
			'color': '#fff',
			'background-color': '#999900'
		},
		'.baden': {
			'color': '#fff',
			'background-color': '#DB8400'
		},
		'.saunieren': {
			'color': '#fff',
			'background-color': '#DA3D16'
		}
	},

	initialize: function(options){
		this.setOptions(options);

		// build the menu
		var menu = document.body.getElement(this.options.cssPathMenu);

		menu.getElements(this.options.cssPathTabsContainer).rotate90ccw();
		var bgTweenOpts = { 'duration': 200, 'transition': 'cubic:out' };
		this.leftCol = $('left-col');
		this.leftColContent = $('left-col-content-wrapper');
		if(this.leftCol) this.leftCol.set('tween', bgTweenOpts);
		this.current = null;
		Object.forEach(this.selectors, function(css, selector){
			var el = menu.getElement(this.options.cssPathTabs + selector);
			if(!el) return;
			el.store('BadegaertenMenu:morph:color', el.getStyle('color'));
			el.store('BadegaertenMenu:morph:background-color', el.getStyle('background-color'));
			el.store('BadegaertenMenu:morph:background-image', el.getStyle('background-image'));
			el.store('BadegaertenMenu:morph:css', css);

			if(el.hasClass('current')){
				this.current = el.setStyle('background-image', 'none').setStyles(css);
			}
			el.store('BadegaertenMenu:morph:content', menu.getElement(this.options.cssPathTabsContent + selector));
			if(!el.retrieve('BadegaertenMenu:morph:content').hasClass('current')){
				el.retrieve('BadegaertenMenu:morph:content').fade('hide');
			}
			el.retrieve('BadegaertenMenu:morph:content').set('tween', bgTweenOpts);
			if(this.leftCol){
				el.retrieve('BadegaertenMenu:morph:content').setStyle('background-color', 'transparent');
			}
			el.set('morph', {
				'duration': 150
			});
			new HoverGroup({
				'elements': [el, el.retrieve('BadegaertenMenu:morph:content')],
				'onEnter': function(){
					clearTimeout(this.currentInInterval);

					if(this.current && this.current != el){
						(function(){
							clearTimeout(this.currentInInterval);
							this.hide(this.current);
						}).delay(100, this);
					}

					this.show(el);
				}.bind(this),
				'onLeave': function(){
					if(this.current && this.current == el) return;
					(function(){
						if(this.current){
							this.currentInInterval = (function(){
								this.show(this.current);
							}).delay(100, this);
						}
						this.hide(el);
					}).delay(100, this);
				}.bind(this)
			});
		}, this);

		// scroll the menu
		if (this.leftCol && !(Browser.ie && Browser.version < 9)) {
			this.menu = $$(this.options.cssPathMenu)[0];
			window.addEvent('scroll', function(){
				if (window.getScrollTop() - 120 > 0)
					this.menu.setStyles({
						'position': 'fixed'
					});
				else
					this.menu.setStyles({
						'position': 'relative'
					});
			}.bind(this));
		}
	},

	show: function(el){
		var css = el.retrieve('BadegaertenMenu:morph:css');
		el.setStyle('background-image', 'none');
		el.morph(css);
		el.retrieve('BadegaertenMenu:morph:content').fade('in');
		if(this.leftCol) this.leftCol.tween('background-color', css['background-color']);
		if(this.leftColContent && this.current) {
			if(el != this.current) this.leftColContent.fade('out');
			else this.leftColContent.fade('in');
		}
		this.fireEvent('show', [el, el.retrieve('BadegaertenMenu:morph:content')]);
	},

	hide: function(el){
		el.setStyle('background-image', el.retrieve('BadegaertenMenu:morph:background-image'));
		el.morph({
			'color': el.retrieve('color'),
			'background-color': el.retrieve('BadegaertenMenu:morph:background-color')
		});
		el.retrieve('BadegaertenMenu:morph:content').fade('out');
		this.fireEvent('hide', [el, el.retrieve('BadegaertenMenu:morph:content')]);
	}
 });

 var BadegaertenImages = new Class({

	Implements: [Events, Options],

	options: {
		cssSelector: 'div.image'
	},

	styles: {
		'info': 		'#004080',
		'wohlfuehlen': 	'#666600',
		'baden': 		'#B35900',
		'saunieren': 	'#990000'
	},

	initialize: function(options){
		this.setOptions(options);

		$$(this.options.cssSelector).each(function(el){
			el.store('BadegaertenImages:img', el.getElement('.img').set('morph', { 'duration': 100 }));
			var img = el.retrieve('BadegaertenImages:img').getElement('img');
			el.store('BadegaertenImages:img:size', img.getSize());
			img.setStyle('visibility', 'hidden');
			el.retrieve('BadegaertenImages:img').getParent('div').setStyles({
				'background-image': 'url(' + img.get('src') + ')',
				'background-position': '0 0',
				'width': el.retrieve('BadegaertenImages:img:size').x,
				'height': el.retrieve('BadegaertenImages:img:size').y
			});
			var caption = el.getElement('.caption');
			if(caption){
				el.store('BadegaertenImages:caption', caption.set('tween', { 'duration': 100 }));
				el.store('BadegaertenImages:caption:color:a', el.retrieve('BadegaertenImages:caption').getStyle('color'));
				Object.forEach(this.styles, function(val, cls){
					if($(document.body).hasClass(cls)) el.store('BadegaertenImages:caption:color:b', val);
				});
			}
			el.addEvents({
				'mouseenter': function(){
					this.retrieve('BadegaertenImages:img').morph({
						'border-width': 3,
						'background-position': '-3px -3px',
						'width': this.retrieve('BadegaertenImages:img:size').x - 6,
						'height': this.retrieve('BadegaertenImages:img:size').y - 6
					});
					if(this.retrieve('BadegaertenImages:caption')) this.retrieve('BadegaertenImages:caption').tween('color', this.retrieve('BadegaertenImages:caption:color:b'));
				},
				'mouseleave': function(){
					this.retrieve('BadegaertenImages:img').morph({
						'border-width': 0,
						'background-position': '0 0',
						'width': this.retrieve('BadegaertenImages:img:size').x,
						'height': this.retrieve('BadegaertenImages:img:size').y
					});
					if(this.retrieve('BadegaertenImages:caption')) this.retrieve('BadegaertenImages:caption').tween('color', this.retrieve('BadegaertenImages:caption:color:a'));
				}
			});
		}, this);
	}
 });

 var BadegaertenLayoutGallery = new Class({

	Implements: [Events],

	tabs: new Hash(),
	images: [],
	styles: {
		'info': {
			'color': '#fff',
			'background-color': '#001224'
		},
		'wohlfuehlen': {
			'color': '#fff',
			'background-color': '#191A00'
		},
		'baden': {
			'color': '#fff',
			'background-color': '#2E1700'
		},
		'saunieren': {
			'color': '#fff',
			'background-color': '#420000'
		}
	},

	initialize: function(){
		this.currentIndex = 0;
		this.imagesLoaded = 1;

		// tabs
		var css = '';
		new Hash(this.styles).each(function(val, cls){
			if($(document.body).hasClass(cls)){
				css = val;
			}
		})

		$$('#right-col .box-gallery ul li a').each(function(el, i){
			this.tabs[i] = el;

			el.store('bgg:index', i);
			el.store('bgg:morph:color', el.getStyle('color'));
			el.store('bgg:morph:background-color', el.getStyle('background-color'));
			el.store('bgg:morph:background-image', el.getStyle('background-image'));
			el.store('bgg:morph:css', css);
			if(el.hasClass('current')){
				this.currentIndex = i;
				el.setStyle('background-image', 'none').setStyles(css);
			}
			el.set('morph', {
				'duration': 150
			});
			el.addEvent('click', function(e){
				e.stop();
				this.tabs[i].blur();
				this.show(i);
			}.bind(this));
		}, this);

		// images
		this.images = $$('#right-col .box-gallery img, #right-col .box-gallery span[id^=layout-gallery-image]');

		// rollover/click
		this.tabs.each(function(el, i){
			new HoverGroup({
				'delay': 100,
				'elements': [el, this.images[i]],
				'onEnter': function(){
				    this.stop();
					this.show(el.retrieve('bgg:index'));
				}.bind(this)
			}, this);
		}, this);

		window.addEvent('load', function(){
		  if(this.images.length > 1){
		      this.loadImage.delay(500, this, [1]);
		  }
		}.bind(this));
	},

	loadImage: function(i){

	   var img = this.images[i];
	   if(!img || !img.get('data-src')) {
	       this.start();
	       return this;
	   }

       new Asset.image(img.get('data-src'), {
           onLoad: function() {
              this.imagesLoaded++;

                 img = new Element('img', {

                    src:    img.get('data-src'),
                    id:     img.get('id'),
                    width:  img.get('data-width'),
                    height: img.get('data-height')

                 }).replaces(this.images[i]);

                 img.fade('hide').set('tween', {
                      duration: 500
                 });

                 this.images[i] = img;

                 this.tabs[i].removeClass('hidden');

                 this.loadImage.delay(100, this, [this.imagesLoaded]);
           }.bind(this)
       });

	   return this;
	},

    validateIndex: function(index) {
        if(index > this.images.length - 1) index = 0;
        if(index < 0) index = this.images.length - 1;
        return index;
    },

    showPrev: function(){
        var index = this.validateIndex(this.currentIndex - 1);
        this.show(index);
    },

    showNext: function(){
        var index = this.validateIndex(this.currentIndex + 1);
        this.show(index);
    },

    onTimerTick: function() {
        this.showNext();
    },

    start: function(){
        clearInterval(this.timer);
        this.timer = this.onTimerTick.periodical(5000, this);
    },

    stop: function(){
        clearInterval(this.timer);
    },

	show: function(index){
	    this.currentIndex = index;

        this.tabs.each(function(tab){
          this.hideTab(tab);
        }, this);
        this.images.each(function(image){
          this.hideImage(image);
        }, this);

        var tab = this.tabs[index];
        var image = this.images[index];

		this.showTab(tab);
		this.showImage(image);

		this.fireEvent('show', [index]);
	},

	showTab: function(el){
		var css = el.retrieve('bgg:morph:css');
		el.get('morph').cancel().start(css).chain(function(){
			el.setStyle('background-image', 'none');
		});
		this.fireEvent('showTab', [el]);
	},

	hideTab: function(el){
		el.setStyle('background-image', el.retrieve('bgg:morph:background-image'));
		el.get('morph').cancel().start({
			'color': el.retrieve('color'),
			'background-color': el.retrieve('bgg:morph:background-color')
		});
		this.fireEvent('hideTab', [el]);
	},

	showImage: function(el){
		clearTimeout(el.retrieve('bgg:imgOutInterval'));
		el.fade('in');
		this.fireEvent('showImage', [el]);
	},

	hideImage: function(el){
		el.store('bgg:imgOutInterval', el.fade.delay(100, el, ['out']));
		this.fireEvent('hideImage', [el]);
	}
 });