/**
 * Animation für eine <ul>/<li>-basierte Navigation.
 * Für jedes <li> wird ein 'on'- und ein 'off'-Bild
 * eingefügt, die beim mouseover/mousout überblendet werden.
 * 
 * Die Struktur des Menüs ist wie folgt:
 * 
 * <ul class="navigation">
 * 
 * </ul 
 */
var AnimatedMenu = Class
        .create( {
            REQUIRED_PROTOTYPE_VERSION :'1.6.0',

            initialize : function(cssSelector) {
                this.checkPrototype();
                this.cssSelector = cssSelector;
                this.effectDuration = 0.7;
                this.effect;                
                this.insertImages();
                this.registerHandler();
            },

            registerHandler : function() {
                var that = this;

                $$(this.cssSelector).each( function(item) {
                    
                    // nur Links highlighten (nicht das aktive Element)
                    if(item.childElements()[0].tagName == "A") {
                        item.observe("mouseover", that.mouseover.bind(that, item))
                        item.observe("mouseout", that.mouseout.bind(that, item))
                        //item.observe("click", that.mouseout.bind(that, item))
                    }
                });

            },

            insertImages : function() {
                $$(this.cssSelector).each( function(item) {
                    
                    var img1 = Builder.node('img', {
                        src :'/images/navigation-background.jpg'
                    });
                    var img2 = Builder.node('img', {
                        src :'/images/navigation-background-active.jpg',
                        style :'display:none;'
                    });

                    item.appendChild(img1);
                    item.appendChild(img2);
                });
            },

            mouseover : function(item, event) {
                // bei Einschachtelung nicht bubblen, nur ein li bearbeiten
                event.stop();                                
                
                var textNode = this._getTextNode(item);
                
                var imgOff = this._getImageOff(item);
                var imgOn = this._getImageOn(item);

                this.effect = new Effect.Parallel( [

                new Effect.Fade(imgOff, {
                    sync :true
                }),

                new Effect.Appear(imgOn, {
                    sync :true
                }),

                new Effect.Morph(textNode, {
                    style : {
                        color :'#F2F2F2'
                    },
                    sync :true
                })
                ]
                , {
                    duration : this.effectDuration
                });
                this.effectItem = null;
                
            },

            mouseout : function(item, event) {
                // bei Einschachtelung nicht bubblen, nur ein li bearbeiten
                event.stop();
                
                this.cancelEffects();
                
                var imgOff = this._getImageOff(item);
                var imgOn = this._getImageOn(item);
                var textNode = this._getTextNode(item);
                var newColor = '#868788';
                
                // bei <strong> rot
                if(textNode.tagName.toLowerCase() == "strong") {                    
                    newColor = "#9A1C2E";
                }
                
                imgOff.setStyle( {
                    opacity :1.0
                });
                
                imgOff.show();
                imgOn.hide();
                textNode.setStyle( {
                    color : newColor
                });
            },

            cancelEffects : function() {
                if (this.effect != null) {
                    this.effect.cancel();
                }
            },
            
            _getImageOff : function(liItem) {
                var numChildren = liItem.childElements().length;
                return liItem.childElements()[numChildren - 2];
            },
            
            _getImageOn : function(liItem) {
                var numChildren = liItem.childElements().length;
                return liItem.childElements()[numChildren - 1];
            },
            
            _getTextNode : function(liItem) {               
                // entweder ein <a> oder <a><strong>
                var textNode = liItem.childElements()[0];
                if(textNode.childElements()[0] != null) {
                    textNode = textNode.childElements()[0];
                }
                return textNode;
            },

            checkPrototype : function() {
                function convertVersionString(versionString) {
                    var r = versionString.split('.');
                    return parseInt(r[0]) * 100000 + parseInt(r[1]) * 1000
                            + parseInt(r[2]);
                }
                if (typeof Prototype == 'undefined'
                        || convertVersionString(Prototype.Version) < convertVersionString(this.REQUIRED_PROTOTYPE_VERSION)) {
                    alert('Layout requires Prototype JavaScript Framework version ' + this.REQUIRED_PROTOTYPE_VERSION + ' or greater');
                }
            }
        });
        
    $(document).observe('dom:loaded', animateMenu);

    function animateMenu() {
        var myMenu = new AnimatedMenu(".navigation li");
    }
    
    
// google maps
    function initializeMap(id, adress, map, geocoder) {
      if (GBrowserIsCompatible()) {
        map = new GMap2(document.getElementById(id));
        map.addControl(new GSmallMapControl());
        map.addControl(new GMapTypeControl());
        geocoder = new GClientGeocoder();
        
          geocoder.getLatLng(
          adress,
          function(point) {            
              map.setCenter(point, 15);
              var marker = new GMarker(point);
              map.addOverlay(marker);
            }          
        );
      }
    }