// JavaScript Document


var Layout = new Class({
    initialize: function() {
        this._container = $('cos-body');

        this.addEvents();
        
        this.willkommenLaden();

        var btn1 = $$('#kopfzeile .menubar .willkommen')[0];
        btn1.addEvent('click', function() {
            karteninhalt.dialogSchliessen();
            suche.dialogSchliessen();
            this.willkommenLaden()
        } .bind(this));
    },

    addEvents: function() {
        // Aktionen für Menüleiste über dem Kartenfenster festlegen
        var menuLi = $$('#karte .menubar .links a');
        menuLi[0].addEvent('click', function() { ZoomAufStartansicht() } .bind(this));
        menuLi[1].addEvent('click', function() { ZoomAufStrasse() } .bind(this));
        menuLi[2].addEvent('click', function() { ZoomAufOrt() } .bind(this));
        menuLi[3].addEvent('click', function() { GibMittelpunkt() } .bind(this));

        // Seitenfenster ein-/ ausblenden
        var link = $$('#inhalt .menubar')[0].getChildren('a')[0];
        link.addEvent('click', function() { this.seitenfensterSchliessen() } .bind(this))
        
        var icon = $$('#inhalt .btn')[0];
        icon.addEvent('click', function() { this.seitenfensterSchliessen() } .bind(this))


    },

    create: function() {
    },

    willkommenLaden: function() {

        var req = new Request({
            url: 'requests/willkommen.aspx',
            onSuccess: function(str) {
                var seite = $$('#inhalt .seite')[0];
                seite.set('html', str);

            } .bind(this),
            onFailure: function() {
                alert('Konnte Inhalt << Willkommen >> nicht laden!');
            }
        });
        req.send();

    },

    seitenfensterSchliessen: function() {

        var karte = $('karte');

        if (karte.getStyle('left').toInt() == 0) {
            this.seitenfensterAnzeigen();
            return;
        }

        karte.setStyles({
            'left': 0,
            'width': this._container.getWidth()
        });

        var karteContainer = karte.getChildren('div.container')[0];
        karteContainer.setStyles({
            'left': 0,
            'width': this._container.getWidth()
        });

        map.checkResize();

        var icon = $$('#inhalt .btn')[0];
        $('inhalt').tween('left', '-380');
        icon.removeClass('offen');
        icon.addClass('geschlossen');

    },

    seitenfensterAnzeigen: function() {


        var fx = new Fx.Tween($('inhalt'), {
            onComplete: function() {
                var icon = $$('#inhalt .btn')[0];
                icon.removeClass('geschlossen');
                icon.addClass('offen');

                var karte = $('karte');
                karte.setStyles({
                    'left': 380,
                    'width': this._container.getWidth().toInt() - 380
                });

                var karteContainer = karte.getChildren('div.container')[0];
                karteContainer.setStyles({
                    'left': 0,
                    'width': this._container.getWidth().toInt() - 380
                });

                map.checkResize();
            } .bind(this)
        });

        fx.start('left', '0');

    },


    render: function() {
        var height = this._container.getHeight();
        var width = this._container.getWidth();

        var inhalt = $('inhalt');
        var inhaltSchatten = inhalt.getChildren('div.schatten')[0];
        var seite = inhalt.getChildren('div.seite')[0];

        var karte = $('karte');
        var karteContainer = $('karte').getChildren('div.container')[0]; ;


        var posTop = $('inhalt').getStyle('top').toInt();
        var posBottom = $('fusszeile').getHeight().toInt();

        inhalt.setStyle('height', height - posTop - posBottom);

        seite.setStyles({
            'height': height - posTop - posBottom - 30,
            'top': '30px'
        });

        inhaltSchatten.setStyles({
            'height': height - posTop - posBottom - 30,
            'top': '30px'
        });



        karte.setStyle('height', height - posTop - posBottom);
        karte.setStyle('width', width - karte.getStyle('left').toInt());

        karteContainer.setStyle('height', height - posTop - posBottom - 30);
        karteContainer.setStyle('width', width - karte.getStyle('left').toInt());
        //alert(width - karte.getStyle('left').toInt());



    }

});



var Region = new Class({
    
    initialize: function(name){
        this._name = name;
        this._items = new Hash();
        this._currentItem = "";
        //this._currentItem = null;
        this._nextItem = null;
        this._height = 0;
        this._width = 0;
        this._outerHeight = 0;
        this._outerWidth = 0;
        this._isVisible = true;
        this._isResizable = false;
        this._isCollapsed= false;
    },
    
    add:function(){
        this.create();
    },
    
    name: function(){
        return this._name;
    }, 
    
    create: function(){
    
        this._region = new Element('div', {'class': this._name});
		this._body = new Element('div', {'class': 'body'}); 
		
		if (this._name == 'north' || this._name=='south')
		    this._splitter = new Element('div', {'class': 'splitter-horizontal'}); 
		
		if (this._name=='west'){
		    this._splitter = new Element('div', {'class': 'splitter-vertical'}); 
		    this._schatten = new Element('div', {'class': 'schatten'});
		    this._region.adopt(this._body, this._schatten); 
		}    
		
		if (this._name == 'east'){
		    this._splitter = new Element('div', {'class': 'splitter-vertical'}); 
		    this._schatten = new Element('div', {'class': 'schatten'}); 
		    this._region.adopt(this._body, this._schatten); 
		}
		
		if (this._name == 'center')// || !this._isResizable)
		    this._region.grab(this._body); 
		else
		    this._region.adopt(this._body, this._schatten); 
		    //this._region.adopt(this._body, this._splitter); 
		
		$('cos-body').grab(this._region)

        if (this._isResizable){
            var splitterHeight = this._splitter.getHeight();
            var splitterWidth = this._splitter.getWidth();
        }
        else{
            var splitterHeight = 0;
            var splitterWidth = 0;
        }
        
        if (this._name == 'north' || this._name=='south'){
            this._height = this._size;
            this._outerHeight = this._size + splitterHeight;
        }
        else if (this._name == 'east' || this._name=='west'){
            this._width = this._size;
            this._outerWidth = this._size + 5;//splitterWidth;
        }
    },
    
    region: function (){
        return this._region;
    },
    
    height: function(){
        return this._outerHeight;
    },

    width: function(){
        return this._outerWidth;
    },
    
    render: function(value){
        if (this._isResizable){
            var splitterHeight = this._splitter.getHeight();
            var splitterWidth = this._splitter.getWidth();
        }
        else{
            var splitterHeight = 0;
            var splitterWidth = 0;
        }
    
        if (this._name == 'north'){
            this._body.setStyles({top: 0, left: 0, height: this._height, width: value});
            this._splitter.setStyles({top: this._height, left: 0, height: splitterHeight, width: value});
        }
        else if (this._name == 'south'){
            
            this._body.setStyles({top: splitterHeight, left: 0, height: this._height, width: value});
            this._splitter.setStyles({top: 0, left: 0, height: splitterHeight, width: value});
        }

        else if (this._name == 'east'){
            this._body.setStyles({top: 0, left: 5, height: value , width: this._width});
            this._schatten.setStyles({top: 0, left: 0, height: value, width: 5});
            this._splitter.setStyles({top: 0, left: 0, height: value, width: splitterWidth});
        }

        else if (this._name == 'west'){
            this._body.setStyles({top: 0, left: 0, height: value , width: this._width});
            this._schatten.setStyles({top: 0, left: this._width, height: value, width: 5});
            this._splitter.setStyles({top: 0, left: this._width, height: value, width: splitterWidth});
        }
        
         else if (this._name == 'center'){  
			var height = this._region.getHeight();
			var width = this._region.getWidth();
            this._body.setStyles({top: 0, left: 0, height: height , width: width});       
        }
        
        
        if (this._currentItem!="" && this.isVisible())
            this.getItem(this._currentItem).setHeight();
        /*
        if (this._currentItem!=null && this.isVisible())
            this._currentItem.setHeight();            
        */    
    },   
   
    size: function(value){
        this._size = value;
    },
    getSize: function(){
        return this._size;
    },
    
    addItem: function(key, obj){     

        this._currentItem = key;
        this._body.grab(obj._panel);
        obj.setHeight();
        this.hideItems();
        this._items.set(key,obj);
        //this.alertBox();       
    },

    addItem1: function(key, obj){     
        this._currentItem = obj;
        this._body.grab(this._currentItem._panel);
        this._currentItem.setHeight();
        this.hideItems();
        this._items.set(key,obj);
        
    },
    
    alertBox: function(){
        alert(this._items.getLength());
        this._items.each(function(obj, key){
            var el = obj;
            alert(key);
        }); 
    
    },
    
    getItem: function(key){
        return this._items.get(key);
    },

    getCurrentItem: function(){
        //return this.getItem(this._currentItem);
        return this._currentItem;
    },
        
    showItem: function(key){
        this.hideItems();
        var el = this._items.get(key)._panel;
        el.setStyle('display', 'block');
        this._currentItem = key;
        this.getItem(this._currentItem).setHeight();
    },
    
    showItem1: function(key){
        this.hideItems();
        var el = this._items.get(key)._panel;
        el.setStyle('display', 'block');
        this._currentItem = this._items.get(key);
        this._currentItem.setHeight();
    },
    
    hideItems: function(){
        this._items.each(function(obj, key){
            var el = obj._panel;
            el.setStyle('display', 'none');
            });
    },
     
 
    resizeable: function(bool){
        this._isResizable = bool;
    },
    
    setVisible: function(bool){
        this._isVisible = bool;
        if (!bool)
            this._body.setStyle('display', 'none');
        else
            this._body.setStyle('display', 'block');
    },

    isVisible: function(){
        return this._isVisible; 
    },
    
    collapsed: function(bool){
        this._isCollapsed = bool;
    },
    
    isCollapsed: function(){
        return this._isCollapsed;
    }

});



var LayoutX = new Class({
        
        initialize: function(parent){
            this._parent = $(parent);
            this._items = new Hash();
            this._northHeight = 0;
		    this._southHeight = 0;
		    this._westWidth = 0;
		    this._eastWidth = 0;
		    this._margin = 0;	
		    this._collapsedWidth = 0;
		    /*
		    this._fx = = new Fx.Tween(el,{
                duration: 'short'
                
            }); 		    
            */
        },
		
		render: function(){
		    this.create();
            //this.setSize();
            this.setSize1();
            this.addEvents();
            //this._items.get('center').alertBox();
		},
		
		create: function(){
            this._layout = new Element('div', {'class': 'cos-layout-wrapper'});
            this._north = this._items.get('north'); 
            this._south = this._items.get('south');
            this._west = this._items.get('west');
            this._east = this._items.get('east');
            this._center = this._items.get('center');
            
            var div = new Element ('div', {'id': 'region-north-schatten'});
            this._layout.grab(div);
            
            if (this._north != null) 
                this._layout.grab(this._north.region());

            if (this._south != null) 
                this._layout.grab(this._south.region());

            if (this._east != null) 
                this._layout.grab(this._east.region());

            if (this._west != null) 
                this._layout.grab(this._west.region());
		    
		    this._layout.grab(this._center.region());
		    
		    this._parent.grab(this._layout);
		},
	
		addEvents: function(){
		    window.addEvent('resize', this.resize.bind(this));
		},
		
		addItem: function(obj){
            this._items.set(obj.name(),obj);
        },
        
        toggle: function(key){
            this._items.get(key).setVisible(!this._items.get(key).isVisible());
            this.setSize1();
        },
        
        hide: function(key){
            /*
            var el = this._items.get(key).element();
            var fx = new Fx.Tween(el)//, {duration:600, wait:true, transition: Fx.Transitions.Expo.easeInOut, oncomplete: function(){alert('enden')}});	
			if (key=='east')
			    fx.start('right', -300, 50);
			else if (key=='west')
			    fx.start('left', -300, 20);
            */
            this._items.get(key).setVisible(false);
            this.setSize1();
        },
        
        hideFX: function(key){
            //var el = this._items.get(key).element();
            var el = this._items.get(key).region();
            var elWidth = el.getWidth();
            var pWidth = this._parent.getWidth();
            var pos = el.getPosition()
           
            var fx = new Fx.Tween(el,{
                duration: 'short',
                onComplete: function(){
                    //alert('complete');
                    this._items.get(key).setVisible(false);
                }.bind(this)    
            });//, {duration:600, wait:true, transition: Fx.Transitions.Expo.easeInOut, oncomplete: function(){alert('enden')}});	
					
			if (key=='east')
			    fx.start('left', pos.x, pWidth+10);
			else if (key=='west'){
			    //alert((elWidth+10)*(-1));
			    fx.start('left', pos.x, (elWidth+10)*(-1));
			}
			    
			//this._items.get(key).setVisible(false);
            
            
        },
        
        showFX: function(key){
            this.show(key);
            var el = this._items.get(key).region();
            var elWidth = el.getWidth();
            var pWidth = this._parent.getWidth();
            var pos = el.getPosition()
            //alert(elWidth);
            var fx = new Fx.Tween(el,{
                duration: 'short',
                start: function(){
                    alert('start');
                    //this._items.get(key).setVisible(false);
                }.bind(this)    
            }); //, {duration:600, wait:true, transition: Fx.Transitions.Expo.easeInOut, oncomplete: function(){alert('enden')}});	
		   
			if (key=='east'){
			    //fx.start('left', pWidth+10, pWidth-elWidth);
			    var currentPanel = region.getCurrentItem();
			    
			    fx.start('left', pos.x, pWidth+10).chain(
			      function(){
			        //alert(pWidth+10);
			        this.start('left', pWidth+100, pWidth-elWidth)
			      });
			    
			}
			else if (key=='west')
			    fx.start('left', (elWidth+10)*(-1), 0);
			 
            
            
        },
        
        showFX2: function(key, panel){
            
            var region = this._items.get(key);
            var el = region.region();
            var elWidth = el.getWidth();
            if (elWidth==0)
                elWidth = region.getSize();

            var pWidth = this._parent.getWidth();
            var pos = el.getPosition()
            
            var fx = new Fx.Tween(el,{
                duration: 'normal'
                
            }); //, {duration:600, wait:true, transition: Fx.Transitions.Expo.easeInOut, oncomplete: function(){alert('enden')}});	
		    
			var currentPanel = region.getCurrentItem();
			
			if (panel == currentPanel && region.isVisible())
			    return;
			
			else if (panel == currentPanel && !region.isVisible()){
			    if (key == 'east'){
			        
			        this.show(key);
			        //fx.set('left', pWidth+10);
			        fx.start('left', pWidth+10, pWidth-elWidth);
			    }
			    
			    if (key=='west'){
			        this.show(key);
			        fx.start('left', (elWidth+10)*(-1), 0);
			    }
			}
			
			else if (panel !== currentPanel && region.isVisible()){
			    if (key == 'east'){
			        fx.start('left', pos.x, pWidth+10).chain(
			          function(){
			            region.showItem(panel);
			            this.start('left', pWidth+10, pWidth-elWidth);
			        });
			    }
			}
			
			else if (panel !== currentPanel && !region.isVisible()){
			    if (key == 'east'){
			        this.show(key);
			        fx.set('left', pWidth+10);
			        region.showItem(panel);
			        fx.start('left', pWidth+10, pWidth-elWidth);
			    }
			}	            
			
        },

        show: function(key){
            this._items.get(key).setVisible(true);
            this.setSize1();
        },       
        
		resize: function(){
		    //this.setSize();
		    this.setSize1();
		    //this.showFX('east');
		},
		
		setSize: function(){
		    var pHeight = this._parent.getHeight();
		    var pWidth = this._parent.getWidth();
		    
            if (this._north!=null){
                this._northHeight = this._north.height();  
                if (!this._north.isVisible())
                    this._northHeight = this._collapsedWidth;
                this._north.region().setStyles({
			        top: 0,
			        left: 0,
			        width: pWidth,
			        height: this._northHeight
		        });
                this._north.render(pWidth);
            }
            
            if (this._south!=null){
                this._southHeight = this._south.height();        
                this._south.region().setStyles({
		            bottom: 0,
		            left: 0,
		            width: pWidth,
		            height: this._southHeight
	            });
	            this._south.render(pWidth);
            }
            
            if (this._east!=null){
                this._eastWidth = this._east.width();  
                if (!this._east.isVisible())
                    this._eastWidth = this._collapsedWidth;
                var eastHeight = pHeight - this._margin - this._northHeight - this._margin - this._southHeight 
		        this._east.region().setStyles({
			        top: this._northHeight + this._margin,
			        right: 0,
			        width: this._eastWidth,
			        height: eastHeight
		        });
		        this._east.render(eastHeight);
            }
            
            if (this._west!=null){
            
                this._westWidth = this._west.width();
                if (!this._west.isVisible())
                    this._westWidth = this._collapsedWidth;
                var westHeight = pHeight - this._margin - this._northHeight - this._margin - this._southHeight;
		        this._west.region().setStyles({
			        top: this._northHeight + this._margin,
			        left: 0,
			        width: this._westWidth,
			        height: westHeight 
		        });
		        this._west.render(westHeight);                 
		    }
		    
   		    this._center.region().setStyles({
			    top: this._northHeight + this._margin,
			    left: this._westWidth + this._margin,
			    width: pWidth - this._westWidth - this._margin - this._margin - this._eastWidth,
			    height: pHeight - this._margin - this._northHeight - this._margin - this._southHeight
		    });
		    this._center.render();
		},

		setSize1: function(){
		    var pHeight = this._parent.getHeight();
		    var pWidth = this._parent.getWidth();
		    
            if (this._north!=null){
                this._northHeight = this._north.height();  
                if (!this._north.isVisible())
                    this._northHeight = this._collapsedWidth;
                this._north.region().setStyles({
			        top: 0,
			        left: 0,
			        width: pWidth,
			        height: this._northHeight
		        });
                this._north.render(pWidth);
            }
            
            if (this._south!=null){
                this._southHeight = this._south.height();        
                this._south.region().setStyles({
		            bottom: 0,
		            left: 0,
		            width: pWidth,
		            height: this._southHeight
	            });
	            this._south.render(pWidth);
            }
            
            if (this._east!=null){
                this._margin = 0;
                this._eastWidth = this._east.width();  
                if (!this._east.isVisible())
                    this._eastWidth = this._collapsedWidth;
                var eastHeight = pHeight - this._margin - this._northHeight - this._margin - this._southHeight 
		        this._east.region().setStyles({
			        top: this._northHeight + 31,// + this._margin,
			        left: pWidth-this._eastWidth,
			        width: this._eastWidth,
			        height: eastHeight -31 -25
		        });
		        this._east.render(eastHeight-31-25);
		        this._margin = 0;
            }
            
            if (this._west!=null){
                this._margin = 0;
                this._westWidth = this._west.width();
                if (!this._west.isVisible())
                    this._westWidth = this._collapsedWidth;
                var westHeight = pHeight - this._margin - this._northHeight - this._margin - this._southHeight;
		        this._west.region().setStyles({
			        top: this._northHeight + 31,// + this._margin,
			        left: 0,
			        width: this._westWidth,
			        height: westHeight - 31 - 25 
		        });
		        this._west.render(westHeight-31-25);                 
		        this._margin = 0;
		    }
		    
   		    this._center.region().setStyles({
			    top: this._northHeight + this._margin,
			    left: 0, //this._westWidth + this._margin,
			    width: pWidth, // - this._westWidth - this._margin - this._margin - this._eastWidth,
			    height: pHeight - this._margin - this._northHeight - this._margin - this._southHeight
		    });
		    this._center.render(pHeight - this._margin - this._northHeight - this._margin - this._southHeight);
		}		
					
});