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
 * zus?tzliche Properties
 * - layerId: id des Layers, welcher erzeugt wird (f?r 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 f?r 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 f?r Initialisierung auf false, da im IE das erste Nachladen des ersten Submenues beim ResizeEvent-Registrieren bereits das "hide" des Submen?s ausl?st. (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
 * zus?tzliche Properties: 
 * - hasVisibleChildren -> bedingung f?r Anzeige eines Pfeils
 * - material -> zus?tzliche 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 Men?unterpunkten mittels Ajax. erfolgt pro Men? 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, hinzuf?gen der Eintr?ge zur Properties Menu des ausf?hrenden 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, f?r hauptmen? wird das "autohide bei klick in seite" abgeschaltet (methode hide ?berschrieben), 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');
	  }
	};

}();