Ext.namespace("Navigation");



//first: some needed overrides :(. Check this, if errors in other ExtJS-apps on same page occure.
Ext.override(Ext.Element, {
	
	/* 
	  we just need to override this because of a little IE6 bug
	  to ensure the additional code works in navi only (and in no other ext app), there is the dummy css-class "navi-list-item" in menu :)
	*/
	getWidth : function(contentWidth){
            var me = this,
                dom = me.dom,
                hidden = Ext.isIE && me.isStyle('display', 'none'),
                w = Math.max(dom.offsetWidth, hidden ? 0 : dom.clientWidth) || 0;
				if (Ext.isIE6 && this.hasClass("navi-list-item")) {
					w = (this.dom.offsetWidth > 180 ? 180 : this.dom.offsetWidth) || 0;
				}
            w = !contentWidth ? w : w - me.getBorderWidth("lr") - me.getPadding("lr");
            return w < 0 ? 0 : w;
    }
	
});

Navigation.NavigationMenuLayout = Ext.extend(Ext.layout.MenuLayout, {

   // monitorResize : true,

   getItemArgs : function(c) {
        var isMenuItem = c instanceof Navigation.NavigationItem;
        return {
            isMenuItem: isMenuItem,
            needsIcon: c.pbeState != null && c.pbeState != '',
            icon: c.pbeState || Ext.BLANK_IMAGE_URL,
            iconCls: 'img_pbe',
            itemId: 'x-menu-el-' + c.id,
            itemCls: 'x-menu-list-item navi-list-item ' + (c.material || '')
        };
    }

});

Ext.Container.LAYOUTS['navigationmenu'] = Navigation.NavigationMenuLayout;

/**
 * Klasse NavigationMenu, abgeleitet von Ext.menu.Menu
 * zusaetzliche Properties
 * - layerId: id des Layers, welcher erzeugt wird (fuer CSS-Styling)
 */
Navigation.NavigationMenu = Ext.extend(Ext.menu.Menu, {

	layout: 'navigationmenu',
    id: this.id || Ext.id(),
	shadow:false, //wir wollen definitiv keinen schatten
	minWidth:180, //wichtig fuer IE, sonst wird breite aus listeninhalt berechnet bzw. minWidth 120 aus Ext.menu.Menu verwendet
	enableScrolling: false,
	defaultType: 'navigationitem',
	cls :  'navi-menu',
	
	initComponent : function() {
		//floating fuer Initialisierung auf false, da im IE das erste Nachladen des ersten Submenues beim ResizeEvent-Registrieren bereits das "hide" des Submenues ausl\u00F6st. (Bug). Ein Window Resize-Event-Listener brauchen wir eigentlich nicht, insofern sollte dieser Weg ok sein.
		var tmpFloating = this.floating;
		if (this.floating) this.floating = false;
		Navigation.NavigationMenu.superclass.initComponent.call(this);
		this.floating = tmpFloating;
		delete tmpFloating;
	}
	
});

Ext.reg('navigationmenu', Navigation.NavigationMenu);

/**
 * NavigationItem, abgeleitet von Ext.menu.Item
 * zusaetzliche Properties: 
 * - hasVisibleChildren -> bedingung fuer Anzeige eines Pfeils
 * - material -> zusaetzliche css-klasse
 * - pbeState -> ImageUrl zum PBE-Status-Icon
 */
Navigation.NavigationItem = Ext.extend(Ext.menu.Item, {
	id: this.id || Ext.id(),
    text: '',
    href: '',
    hasVisibleChildren: false,
    material: 'neutral',
    pbeState:null,
    didAjaxRequest:false,
    activeLevel : 0,
	activeClass : 'navi-menu-item-actve',
	
	getTemplateArgs : function() {
		return {
			id: this.id,
			cls: this.itemCls + ((this.hasVisibleChildren || this.menu) ?  " navi-menu-item-arrow" : "") + (this.cls ?  " " + this.cls : "") + ((window.location.pathname.indexOf(this.href) != -1 ) ? " active"+this.activeLevel : ''),
			href : this.href || '#',
			hrefTarget: this.hrefTarget,
			icon : this.icon || Ext.BLANK_IMAGE_URL,
			iconCls: this.iconCls || '',
			text: this.itemText||this.text||'&#160;'
		};
	},
    
    activate : function(autoExpand){
        this.addMenuItemsByAjax();
        return Navigation.NavigationItem.superclass.activate.apply(this, arguments);
    },
    
    doAddItemsToMenu: function(subMenuNaviItems) {
    	this.menu = new Navigation.NavigationMenu({
    		layerId: 'layer'+this.plainId(),
    		id: 'menu'+this.plainId(),
			width:180
    	});
  	    this.menu.add(subMenuNaviItems);
  	    if (this.parentMenu.activeItem == this) {
  	      this.activate(true);
  	    }
    },
    
    /* nachladen von Menueunterpunkten mittels Ajax. erfolgt pro Menue einmalig */
    addMenuItemsByAjax: function() {
    	if (this.hasVisibleChildren && !this.menu && this.plainId() && !this.didAjaxRequest) {
    	    uri = g_schcmsnavigationAjaxUrlPrefix + this.plainId(); 
    	    elemId = this.id;
    	    parentMenuId = this.parentMenu.id;
    	    this.el.mask();
    	    /* ajax request */
    	    this.didAjaxRequest=true;
    	    Ext.Ajax.request({
    	    	url: uri + '?json=true',
    	    	scope:this,
    	    	/* success: dekodieren von JSON, hinzufuegen der Eintraege zur Properties Menu des ausfuehrenden NavigationItems */
    	    	success: function(response) {
    	    	  var subMenuItems = Ext.util.JSON.decode(response.responseText);
    	    	  var subMenuNaviItems = new Array();
    	    	  for (var i=0; i < subMenuItems.length;i++) {
    	    		  if (subMenuItems[i].hasPagePreview) {
    	    		      subMenuNaviItems[subMenuNaviItems.length] = new Navigation.NavigationItem({
    	    			      id: 'navi' + subMenuItems[i].id,
    	    		          text: subMenuItems[i].text,
    	    	              href: subMenuItems[i].url,
    	    	              hasVisibleChildren: subMenuItems[i].hasVisibleChildren,
    	    	              material: subMenuItems[i].material ? subMenuItems[i].material : 'neutral',
    	    	              pbeState: subMenuItems[i].pbeState ? subMenuItems[i].pbeState : null,
    	    	              activeLevel: this.activeLevel+1,
    	    	              menu: new Navigation.NavigationMenu({
    	    	            	  id: 'menu'+subMenuItems[i].id,
    	    	            	  layerId: 'layer'+subMenuItems[i].id,
    	    	            	  items: [
    	    	            	          new Navigation.NavigationPreviewItem({
    	    	            	        	id: ''+subMenuItems[i].pagePreview.id,
    	    	            	        	previewHeadline: (subMenuItems[i].pagePreview.headline ? subMenuItems[i].pagePreview.headline : ''),
    	    	            	        	previewText: ((subMenuItems[i].pagePreview.textList && subMenuItems[i].pagePreview.textList.length > 0) ? subMenuItems[i].pagePreview.textList : new Array()),
    	    	            	        	previewImage: (subMenuItems[i].pagePreview.imageUrl ? subMenuItems[i].pagePreview.imageUrl : '')
    	    	            	          })
    	    	            	          ],
    	    	            	  cls: 'navi-menu popupNavigationPreview'
    	    	              })
    	    		      });
    	    		  } else {
    	    			  subMenuNaviItems[subMenuNaviItems.length] = new Navigation.NavigationItem({
    	    	    			 id: 'navi' + subMenuItems[i].id,
    	    	    		     text: subMenuItems[i].text,
    	    	    	         href: subMenuItems[i].url,
    	    	    	         activeLevel: this.activeLevel+1,
    	    	    	         material: subMenuItems[i].material ? subMenuItems[i].material : 'neutral',
    	       	    	         pbeState: subMenuItems[i].pbeState ? subMenuItems[i].pbeState : null,
    	    	    	         hasVisibleChildren: subMenuItems[i].hasVisibleChildren
    	    	    	  });
    	    		  }
    	    	  }
    	    	  this.el.unmask();
    	    	  if (subMenuNaviItems.length > 0) {
    	    	      //Ext.menu.MenuMgr.get(parentMenuId).items.get(elemId).doAddItemsToMenu(subMenuNaviItems);
    	    		  this.doAddItemsToMenu(subMenuNaviItems);
    	    	  }
    	        },
    	        /* failure: ignore, aber Maskierung entfernen! */
    	        failure: function(response) {
    	        	this.el.unmask();
    	        }
    	    
    	    });
    	}
    },
    
    plainId: function() {
      if (this.id && this.id.indexOf('navi') >= 0) {
        return this.id.substr('navi'.length);
      }
      return null;
    },
	
	afterRender : function() {
		Navigation.NavigationItem.superclass.afterRender.call(this);
		this.trimText();
	},

	trimText : function () {
    	//use max 144 px for formatted text. (results from of navi-width, paddings, borders etc)
        var MAX_LINK_TEXT_WIDTH=144;
		/* //eventually comment out this part, if you want ca. 2 sings more for active parts (bold letters). current state is: warmwasserpumpe -> warmwasserpum for 144px and bold signs
		   //evtl. also up to 159 px possible... depends on letters. IE6 will break word in nav2 when there are more than 144px, so for li in nav2 (rendered directly without ajax) don't have it a higher width...  In Ajax-Levels IE6  doesn't break words, i think.
		   if (this.el.className.indexOf(active) != -1 && this.el.parentNode.parentNode.parentNode.id != "nav2") {
			//hey... active and not in first navi column!... bold... just allow 152 pixel?
			MAX_LINK_TEXT_WIDTH=152;
		}*/
        var elem = this.el.dom;
        var text = this.itemText || this.text;
        //first... text in a single line
        var x = Ext.util.TextMetrics.createInstance(this.id);
        x.bind(elem);//bind for real formatted text measurement
        var singleLineSize = x.getSize(text);
        //text multilined, with is fixed by 144. this second metric must be there for differ a very long single word from long text with auto breaks in browser (by space...) 
        var z = Ext.util.TextMetrics.createInstance(this.id,MAX_LINK_TEXT_WIDTH);
        z.bind(elem);
        var multiLineSize = z.getSize(text);

        if (multiLineSize.height > singleLineSize.height) {
            var split = text.split(" ");
            for (var i = 0; i < split.length; i++) {
                var xy = split[i];
                //truncate the word which is too long for a single row. yes, it could also be the word in the middle line after line braking... how to do better?
                while (x.getSize(xy).width > MAX_LINK_TEXT_WIDTH && xy.length > 0) {
                    xy = xy.substr(0,xy.length-1);
                }
                split[i] = xy;
            }
            this.setText(split.join(" "));
        } else {
        	//truncate very long single words...
            while(multiLineSize.height == singleLineSize.height && singleLineSize.width > MAX_LINK_TEXT_WIDTH && text.length > 0) {
                text = text.substr(0,text.length-1);
                singleLineSize = x.getSize(text);
                multiLineSize = z.getSize(text);
            }
            this.setText(text);
        }
    }

	
    
});

Ext.reg('navigationitem',Navigation.NavigationItem);

/**
 * NavigationPreviewItem: erzeugt die Vorschau einer Serienunterseite 
 */
Navigation.NavigationPreviewItem = Ext.extend(Ext.menu.BaseItem, {
	id: this.id || Ext.id(),
	previewHeadline:'',
	previewImage:'',
	previewText: new Array(),
	width:250,
	activeClass : 'navi-menu-item-actve',

	
	onClick : function(e) {
		if (this.parentMenu.parentMenu && this.parentMenu.parentMenu.activeItem && this.parentMenu.parentMenu.activeItem.href) {
			location.href = this.parentMenu.parentMenu.activeItem.href;
		}
		
    	Navigation.NavigationPreviewItem.superclass.onClick.apply(this,arguments);
    },
    
    onRender : function(container, position){
        var el = document.createElement("div");
        el.className="previewContainer";
        el.hideFocus = true;
        el.unselectable = "on";
        
        var headl = document.createElement("h2");
        headl.className = "previewHeadline";
        if (this.previewHeadline && this.previewHeadline.length > 0) {
          headl.innerHTML = this.previewHeadline;
        }
        el.appendChild(headl);
        if (this.previewImage.length > 0) {
           var imgl = document.createElement("img");
           imgl.src = this.previewImage;
           el.appendChild(imgl);
        }
        if (this.previewText.length > 0) {
          var ul = document.createElement("ul");
          ul.className = "previewList"
          for (var j = 0; j<this.previewText.length;j++) {
            var li = document.createElement("li");
            li.className = "previewListItem"
            li.innerHTML = this.previewText[j];
            ul.appendChild(li);
          }
          el.appendChild(ul);
        }
        this.el = el;
        
        Navigation.NavigationPreviewItem.superclass.onRender.call(this, container, position);
    }
	
});

Ext.reg('navigationpreviewitem',Navigation.NavigationPreviewItem);

/* initialisierungsobjekt, fuer hauptmenue wird das "autohide bei klick in seite" abgeschaltet (methode hide ueberschrieben), um es immer anzuzeigen */
Navigation.navi = function() {
    var menu = new Navigation.NavigationMenu({
	  id: 'nav2',
	  floating: false,
	  width:180,
	  hide: function(deep) {}
    });

    return {
      afterLoad: function() {
	    menu.add(firstMenuArray);
		menu.autoRender = Ext.get('col1_content');
	    menu.show(Ext.get('col1_content'),'tl-tl');
	  }
	};

}();