// ############################################################################
// ######### NUMISMATIK PRODUCT GROUP SMART BROWSER ENGINE with AJAX  #########
// ######### Copyright: SiteForce AG - 2008  Programming: fk@siteforce.de  ####
// ######### version: Backoffice 16.03.2009 18:55 Uhr  	  		  	  #########
// ############################################################################

// ############################################################################
// ######################## SMART BROWSER DEFINITIONS  ########################

var gVisibleColumns = 2; // ### define the number of visible columns
var gMaxCharsItem = 35; // ### defintion of maximal chars for browser div items, will truncated
var gColumnWidth = 230; //### define width of the columns in pixel
var gColumnHeight = 400; //### define height of the columns in pixel
var gMaxCols = 5; //### maximal Number of allowed Cols in HTML Structure
var gBorderWidth = 4; // ### border width between columns

var gMode = "online";
var gShiftX = 0; // ### gShiftX for horizontal shift scrolling
var gShiftY = 0; // ### gShiftY for vertical shift scrolling

var gBrowser = getBrowser(); // ### check Browser 

var gMaxFeedItems = 2000;

if(typeof(gBrowserColDataURL) == "undefined"){
	alert("gBrowserColDataURL undefined");
	var gBrowserColDataURL = "/proaurumStage/servlet/ShopBrowser" ; // ### relative path for smart browser col data XML Atom Feed format 
}

if(typeof(gBO_mode) == "undefined"){
	//alert("gBO_mode undefined we use default = true");
	var gBO_mode = true ; // ### Smart Browser backoffice mode default = true
}

if(typeof(gRecursiveSmartBrowserColumnRebuild) == "undefined"){
 var gRecursiveSmartBrowserColumnRebuild = 0;
}


if(typeof(gActualSelectedProduct) == "undefined"){
 var gActualSelectedProduct = null;
}


var requestBrowserColDataCount = 0; 	// ### AJAX counter of request requestProductListCount

// ##################################################################
// ################## GLOBAL VARIABLES   ############################
var gDATA = new Array(); // ## array of all BROWSER Items
var gDATA_counter = 0;

var gBROWSER_COL = new Array(""); // ## array of all BROWSER COLUMNS
var gBROWSER_COL_counter = 0; 	


var gSelectionPath = new Array();

// ########### ANIMATION GLOBALS ###########
var gANIM_Motion = new Array(0.0, 0.10, 0.15, 0.3, 0.45, 0.6, 0.7 , 0.8 , 0.9 , 0.95 , 0.98 , 1.0);
var gANIMCounter = 0;
var gANIMElement = null;
var gTimeoutAnimHandle = null;

// ##################################################################

var gScriptPath = "";

// ############ SHOP MENU FILTER GLOBAL VARIABLES ##################

var requestActivatedSinceDays = null;
var requestVirtualGroupId = null;
var requestOnlySpecials = null;

// ###############   initSmartBrowser    ###############
function initSmartBrowser() {	
		   
	var smartBrowserAreaElement = document.getElementById("SmartBrowserArea");
	if(smartBrowserAreaElement == null){ return }
	
	var clipAreaDivElement = document.getElementById("clipAreaDiv");
	if(clipAreaDivElement == null){ return }

	var smartBrowserAreaWidth = (1.0 * gColumnWidth * gVisibleColumns) + (gVisibleColumns * gBorderWidth);	
	
	//###### DEFINE smartBrowserArea   #######
	var clipHeight = (1.0 * gColumnHeight);
	var rectString = "rect(0px, " + (smartBrowserAreaWidth) + "px, " + clipHeight + "px, " + 0 + "px)";		
	
	smartBrowserAreaElement.style.clip = rectString; // ### Update smartBrowserAreaElement
	clipAreaDivElement.style.clip = rectString; // ### Update clipAreaDivElement
	
		
	 //#### DEFINE HEIGHT AND WIDTH ####
	 smartBrowserAreaElement.style.height = (1.0 * gColumnHeight)+ "px";
	   	
    
    // ##### INITIAL LOAD OF ROOT DATA FOR COLUMN 1  #####
    var requestParentId = "root";
    var requestColNum = "1";
    requestBrowserColData(requestColNum, requestParentId); 
    	
}


// ###############   requestBrowserColData    ###############
function requestBrowserColData(requestColNum, requestParentId) {	
	setProgressIndicator('loadIndicator', 'on' , '' ); // ### switch load Cycle indiciator on
	
	if(gMode == "online") {	
		//var requestedDataExisting = checkRequestedDataExisting(requestColNum, requestParentId); // ### to minimize online traffic check data existing in local gDATA DB
		var requestedDataExisting = false;
		// #### SEND AJAX REQUEST IF DATA NOT EXISTING IN LOCAL DB ####
		if(requestedDataExisting == false){
			// #### SEND AJAX REQUEST ####
			//var requestQuery = "+requestParentId=" + requestParentId + "+requestColNum=" + requestColNum;
			var requestQuery = "shopId=numismatikShop&requestParentId=" + requestParentId + "&requestColNum=" + requestColNum + "&locale=de_DE" + "&bo=" + gBO_mode;
			
			// #### add additional request parameter according to "shop menu filter"-selection
			if(requestVirtualGroupId!=null){
				requestQuery = requestQuery + "&virtualGroupId=" + requestVirtualGroupId;
			}
			if(requestActivatedSinceDays!=null){
				requestQuery = requestQuery + "&activatedSinceDays=" + requestActivatedSinceDays;
			}
			if(requestOnlySpecials){
				requestQuery = requestQuery + "&onlySpecials=" + requestOnlySpecials;
			}
			
			var requestURL = gBrowserColDataURL + "?" + requestQuery;
			var requestType = 1; // ## 0 = GET, 1 = XML, 2 = POST
			requestBrowserColDataCount ++; // ## requestIdCount of this request, will be given to registered event handler onreadystatechange
		
			//alert("requestURL: " + requestURL + " requestBrowserColDataCount: " + requestBrowserColDataCount);
			sendAJAXRequest(requestURL , requestQuery , requestType, requestBrowserColDataCount);
		}

		// ### render DATA FROM LOCAL DB #####
		if(requestedDataExisting == true){		
			drawColumn(requestParentId, requestColNum);
		}
	} 
	
}


// ###############   checkRequestedDataExisting    ###############
function checkRequestedDataExisting(requestColNum, requestParentId) {

	var dataExisting = false;
	
	return dataExisting;
		
	// ###### GATHERING DATA OBJECTS FOR RESULT LIST #####
// 	for(i=0; i< gDATA.length; i++){
// 		// ### syntax name,count,level,parentId,id
// 		var mObject = gDATA[i] ;	
// 		var parentId = mObject.parentId;
// 		var level = mObject.level;
// 		
// 		
// 		if(parentId == requestParentId && level == requestColNum) {
// 			//ShowObjectProperties(mObject);
// 			var dataExisting = true;
// 			return dataExisting;
// 			break;
// 		}
// 	}
// 	return dataExisting;
}	
	

// ###############   saveProductGroup    ###############
function saveProductGroup() {	
	
		var pathString = "";
		var linkPathArray = new Array();
		var linkNameArray = new Array();
		
		// #### Compose Path String  ####
    	for(var n=1; n< gBROWSER_COL.length; n++) {
       		var BrowserColumnObject = gBROWSER_COL[n];	
       		if (typeof BrowserColumnObject != "undefined"){
       			//alert("BrowserColumnObject.selectedName " + BrowserColumnObject.selectedName + " n: " + BrowserColumnObject.selectedName)
       			if(BrowserColumnObject != null){
       				if(BrowserColumnObject.selectedName.length > 1) {
       					
       					//### put selected id into linkPathArray ### 
       					var selectedId = BrowserColumnObject.selectedId;
       					var addID = linkPathArray.push(selectedId);
       					
       					//### put selected name into linkNameArray ### 
       					var selectedName = BrowserColumnObject.selectedName;
       					var addName = linkNameArray.push(selectedName);
       					pathString += BrowserColumnObject.selectedName + "/";
       				}
       			}
       		}
       	}	
       
       	//ShowObjectProperties(linkPathArray );	
       	if(linkPathArray.length > 0){
       		var linkProductGroupID = linkPathArray[linkPathArray.length - 1];
       	} else {
       		var linkProductGroupID = null;
       	}
       
       if(linkNameArray.length > 0){
       		var linkProductGroupName = linkNameArray[linkNameArray.length - 1];
       	} else {
       		var linkProductGroupName = "";
       	}
       	
       	
       	//alert("linkProductGroupID: " + linkProductGroupID + " linkProductGroupName: " + linkProductGroupName + " pathString: " + pathString);
       	
       	       	
       	// set variables in opener form
       	var openerProductGroupIdField = opener.document.getElementById('primaryProductGroupId');
       	var openerProductGroupPathDisplay = opener.document.getElementById('primaryProductGroupName');
       	
       	if (openerProductGroupIdField != null) {
       		openerProductGroupIdField.value = linkProductGroupID;
       	}
       	if (openerProductGroupPathDisplay != null) {
       		openerProductGroupPathDisplay.innerHTML = "" + pathString + " <span style='font-size:11px; font-weight:normal; color:#666;'> ProductGroupID: " + linkProductGroupID + "</span>";
       	}
       	
       	//### close window after storing ###
       	window.close();
}


// ###############   getVisibleStartCol    ###############
function getVisibleStartCol() {	
	var visibleStartCol = 1; // ## default value
	
	if(gBROWSER_COL.length > 0){
		if (typeof gBROWSER_COL[1] != "undefined"){
			// #### get column width ###
			var colWidth =  parseInt(gBROWSER_COL[1].elementId.offsetWidth); 
			var borderWidth = 2;
			//if(gBrowser == "Internet Explorer"){var borderWidth = 0;}
	
			var columnWidthBrutto = colWidth + borderWidth;	
			var visibleStartCol = parseInt(gShiftX / columnWidthBrutto) + 1 ;
	
			//alert("visibleStartCol: " + visibleStartCol);
		}
	}
	
	return visibleStartCol;
}


// ###############   getNumberUsedCols    ###############
function getNumberUsedCols() {	
	// #### Check how many Columns are actual used ####
	var colUsedCounter = 0; // ## default value
	for(var n=1; n< gBROWSER_COL.length; n++) {
		var colItemAreaID = "Col" + n + "ItemArea";
		var colItemAreaElement = document.getElementById(colItemAreaID);
			
		if(colItemAreaElement != null){
			var mColChildList = colItemAreaElement.childNodes;
			var mDIVList = colItemAreaElement.getElementsByTagName("div");
			//alert("Col n: " + n + " mDIVList.length: " + mDIVList.length);
			if(mDIVList.length > 0){
				colUsedCounter ++;
			}
		}
	}
	
	//alert("colUsedCounter " + colUsedCounter);
	
	// #### dont display not used Column Title and Col Areas #####
	var startInvisibleColCounter = colUsedCounter + 1 ;
	
	for(var k=startInvisibleColCounter; k<= gMaxCols; k++) {
		//#### colTitleElement Element switch display an width ####
		
		if(k > gVisibleColumns){
			var colTitleID = "Col" + k + "Title";
			var colTitleElement = document.getElementById(colTitleID);
			if(colTitleElement != null){
				colTitleElement.style.width = gColumnWidth + "px";			
				colTitleElement.style.display = "none";
			}
		
		
			//#### ColItemArea Element switch display off ####
			var colItemAreaId = "Col" + k + "ItemArea";
			var colItemArea = document.getElementById(colItemAreaId);
			if(colItemArea != null){
				//colItemArea.style.width = (1.0 * gColumnWidth - gBorderWidth) + "px";
				//colItemArea.style.height = (1.0 * gColumnHeight - 20) + "px";			
				colItemArea.style.display = "none";
			}
		}
	}
	
	//#### clipAreaDiv Element width control ####
	var clipAreaDiv = document.getElementById('clipAreaDiv');
	if(clipAreaDiv != null){
		if(colUsedCounter > gVisibleColumns){
			clipAreaDiv.style.width = (colUsedCounter * (gColumnWidth + gBorderWidth)) + "px";
		} else {
			clipAreaDiv.style.width = (gVisibleColumns * (gColumnWidth + gBorderWidth)) + "px";
		}
	}
	
	
	return colUsedCounter;
}


// ###############   updateScrollButtonStatus    ###############
function updateScrollButtonStatus() {		
	var leftBtnElement = document.getElementById('shiftProductGroupLeftBtn');
	if(leftBtnElement == null) {return;}
	
	var rightBtnElement = document.getElementById('shiftProductGroupRightBtn');
	if(rightBtnElement == null) {return;}
	
	//###### Update LEFT Button Status ####
	if(gShiftX > 0){
			leftBtnElement.className = "";
	} else {
			leftBtnElement.className = "dimmed";
	}
	
	
	//###### Update RIGHT Button Status ####
	var colUsedCounter = getNumberUsedCols();	
	var visibleStartCol = getVisibleStartCol();	
	var deltaRightScroll = colUsedCounter - visibleStartCol ;
	
	//alert("deltaRightScroll: " + deltaRightScroll + " visibleStartCol: " + visibleStartCol + " colUsedCounter: " + colUsedCounter);
	
	if(deltaRightScroll >= gVisibleColumns){
			rightBtnElement.className = "";
	} else {
			rightBtnElement.className = "dimmed";
	}

}



// ###############   shiftButtonClick    ###############
function shiftButtonClick(direction) {	
	// * check if click right shift or left shift is allowed * //
	
	var leftBtnElement = document.getElementById('shiftProductGroupLeftBtn');
	if(leftBtnElement == null) {return;}
	
	var rightBtnElement = document.getElementById('shiftProductGroupRightBtn');
	if(rightBtnElement == null) {return;}

	//#### CHECK RIGHT SHIFT BUTTONS ALLOWED ###
	var colUsedCounter = getNumberUsedCols();	
	var visibleStartCol = getVisibleStartCol();	
	var deltaRightScroll = colUsedCounter - visibleStartCol ;
	
	//##### SHIFT RIGHT #####
	if(direction == 1 && deltaRightScroll >= gVisibleColumns){ 
		rightBtnElement.className = "pressed";
		shiftProductGroupCols(direction);
	}

	//##### SHIFT LEFT #####	
	if(direction == -1 && gShiftX != 0){ 
		leftBtnElement.className = "pressed";
		shiftProductGroupCols(direction);
	}
}



// ###############   shiftProductGroupCols    ###############
function shiftProductGroupCols(direction) {	
	
	if(gMode == "online") {
		if(gTimeoutAnimHandle != null){return;} // ### dont allow click during animation in online mode
	}
	
	var objId = "SmartBrowserArea";	
	
	// #### calculate Shift value ###
	if(gBROWSER_COL.length > 0){
		if (typeof gBROWSER_COL[1] != "undefined"){
			var colWidth =  parseInt(gBROWSER_COL[1].elementId.offsetWidth);
			var borderWidth = gBorderWidth;
			//if(gBrowser == "Internet Explorer"){var borderWidth = 0;}
		
			var mShiftValue = colWidth + (borderWidth/2); // ##### value of click button shift
			
			//ShowObjectProperties(gBROWSER_COL[1].elementId );	
		
			var smartBrowserAreaElement = document.getElementById(objId);
			if(smartBrowserAreaElement == null){ return }
			
			gShiftX = gShiftX + (direction * mShiftValue);
			if(gShiftX < 0) {gShiftX = 0;}
				
			
			// #### reset actual timeout handel just in case of an actual animation ####
			window.clearTimeout(gTimeoutAnimHandle); // ### clear old timeout handle 
			gTimeoutAnimHandle = null;
		
			if(direction < 0) {var type = "left";}
			if(direction > 0) {var type = "right";}
			
			var targetValue = gShiftX; 
			
			var startValue = Math.abs(parseInt(smartBrowserAreaElement.style.left));
			if(isNaN(startValue)) {var startValue = 0;}
			//alert("startValue: " + startValue + "  targetValue " + targetValue + "  type: " + type);
			
			if(startValue != targetValue){
				shiftAnimation(objId , type , startValue , targetValue);
			}
		}
	}
}



// ###############   clickHandler    ###############
function shiftAnimation(objId , type , startValue , targetValue ) {
	var borderWidth = gBorderWidth;	
	
	if(gBrowser == "Internet Explorer"){var borderWidth = gBorderWidth / 2;}
	
	var height = gColumnHeight; // ### 300 pixel
	var width = (gVisibleColumns * (gColumnWidth + borderWidth/2) ) + borderWidth;
	
	var animElement = document.getElementById(objId);
	if(animElement == null){ return }
	
	if(gANIMCounter < gANIM_Motion.length){
		var mAnimFaktor = gANIM_Motion[gANIMCounter];
		
		if( type == "right"){
			var deltaXRange = targetValue - startValue;
			var mNewValue = parseInt(mAnimFaktor *  deltaXRange) + startValue; // #####  mNewValue
		} 
		
		if( type == "left"){
			var deltaXRange = startValue - targetValue;
			var mNewValue = startValue - parseInt(mAnimFaktor *  deltaXRange); // #####  mNewValue
		} 
		
		animElement.style.left = "-" + mNewValue + "px";
		
		var widthAndNew = (width + mNewValue) * 1.0;		
		var rectString = "rect(0px, " + widthAndNew + "px, " + height + "px, " + mNewValue + "px)";	
		animElement.style.clip = rectString;
		
		gTimeoutAnimHandle = window.setTimeout("shiftAnimation('" + objId + "', '" + type + "' , " + startValue + " , " + targetValue + ")", 50);
		gANIMCounter ++; 
	} else {
		// ##### ANIMATION FINISHED ######
		//alert("Anim fertig! " + gANIMCounter + " targetValue: " + targetValue);
		gANIMCounter = 0;
		window.clearTimeout(gTimeoutAnimHandle); // ### clear old timeout handle 
		
		gTimeoutAnimHandle = null;
		
		// ##### SET FINAL POSITION TARGET POSITION ######
		animElement.style.left = "-" + targetValue + "px";
		
		var widthAndNew = (width + targetValue) * 1.0;
		
		var rectString = "rect(0px, " + widthAndNew + "px, " + height + "px, " + targetValue + "px)";	
		animElement.style.clip = rectString;
		updateScrollButtonStatus();	
	}

}



// ################ drawCol #################
function drawColumn(drawParentID, colNum, selectedId){
	//alert("drawColumn: " + colNum + " drawParentID: " + drawParentID);
	var mColElementClass = "ColItemArea";
	var mColItemAreaID = "Col" + colNum + "ItemArea";
	
	var mColItemAreaElement = document.getElementById(mColItemAreaID);
	if(mColItemAreaElement == null){
		//alert("mColItemAreaElement " + mColItemAreaID + " NOT found!");
		return;
	}
	
	// ## BrowserColumn(parentId, colNum, selectedElementId, elementID); 
	gBROWSER_COL[colNum] = new BrowserColumn(drawParentID, colNum, selectedId, mColItemAreaElement); 
	

	var resultList = new Array();
	var resultListCounter = 0;
	
	//###### GATHERING DATA OBJECTS FOR RESULT LIST #####
	for(i=0; i< gDATA.length; i++){
		// ### syntax name,count,level,parentId,id
		var mObject = gDATA[i] ;	
		var parentId = mObject.parentId;
		
		if(parentId == drawParentID) {
			resultList[resultListCounter] = mObject;
			resultListCounter ++;
		}
	}
	
	
	var visibleStartCol = getVisibleStartCol();
	// #### AUTO SHIFT COLUMNS #####
	if(resultListCounter > 0 && colNum > gVisibleColumns){	
		if(colNum - visibleStartCol >= gVisibleColumns ) {
			var direction = 1;
			//var direction = colNum - visibleStartCol;
			//alert("AUTO SHIFT COLUMNS " + direction);			
			shiftProductGroupCols(direction);
		}
	}
	
	
	// #### Fill List with Result Data ####
    for(var i=0; i<resultListCounter; i++) {
       var mItemObject = resultList[i];
       var divElementId = "col_" + colNum + "_item_" + i;
       var spanCountElementId = "span_" + colNum + "_item_" + i; 	
		var mStyleClass = "ColItem";
		
  		// ### create new DOM element ####
  		
  		
  		var nameStr = mItemObject.shortname;
  		// #### automatic length limitation ####
  		// if(nameStr.length > gMaxCharsItem){ var nameStr = nameStr.replace(/und/g, "u."); }
  		// if(nameStr.length > gMaxCharsItem){ var nameStr = nameStr.replace(/^Deutsche/, "Dt."); }
  		
  		if(nameStr.length > gMaxCharsItem){
  			var mMiddleLength = (gMaxCharsItem / 2) - 2;
  			var longString = nameStr;
  			var longStringLength = longString.length;
  			var nameStr = longString.substr(0, mMiddleLength) + "..." + longString.substr(longStringLength - mMiddleLength, longStringLength);
  			//var nameStr = nameStr.substr(0, gMaxCharsItem - 2) + "...";
  		}
  		
     	var listDivElement = createDOMElement("div" , mColItemAreaElement , nameStr , mStyleClass, divElementId);
     	listDivElement.setAttribute("name", mItemObject.name);
     	listDivElement.setAttribute("shortname", mItemObject.shortname);
    	listDivElement.setAttribute("drawParentID", drawParentID);
		listDivElement.setAttribute("colNum", colNum);
		listDivElement.setAttribute("divElementId", divElementId);
		listDivElement.setAttribute("id", mItemObject.id);
		listDivElement.setAttribute("title", mItemObject.name);
		listDivElement.setAttribute("link", mItemObject.link);
				
    	attachEventListener(listDivElement, "click", clickListItem, false); // ### attach Event Listener 
    	
    	listDivElement.style.width = ( 1.0 * gColumnWidth ) + "px";
    	
    	//alert("divElementId " + divElementId);
    	
    	//##### ColItemCountSpan Object for count numbers of coins ######
    	var countString = "" + mItemObject.count;
    	
    	var countStringDigits = countString.length;
    	var ColItemCountSpanClass = "ColItemCountSpanDigit" + countStringDigits;
    	
    	var listSpanCountElement = createDOMElement("span" , listDivElement , countString , ColItemCountSpanClass, spanCountElementId); 
    	
    	listSpanCountElement.setAttribute("name", mItemObject.name);
     	listSpanCountElement.setAttribute("shortname", mItemObject.shortname);
    	listSpanCountElement.setAttribute("drawParentID", drawParentID);
		listSpanCountElement.setAttribute("colNum", colNum);
		listSpanCountElement.setAttribute("divElementId", divElementId);
		listSpanCountElement.setAttribute("id", mItemObject.id);
		listSpanCountElement.setAttribute("title", mItemObject.name);
		listSpanCountElement.setAttribute("link", mItemObject.link);
		
	}

	//### Finaly decativate the progress indicator ###
	setProgressIndicator('loadIndicator', "off"); // ### activate load indiciator at the col	
	
	
	UpdatePathAndHilteStructure();
}


// ###########   clickListItem #############
function clickListItem() {	
	if (typeof this.event != "undefined"){
		var name = this.event.srcElement.name;
		var shortname = this.event.srcElement.shortname;
		var drawParentID = this.event.srcElement.drawParentID;
		var colNum = this.event.srcElement.colNum;
		var divElementId = this.event.srcElement.divElementId;
		var id = this.event.srcElement.id;
		var link = this.event.srcElement.link;
	} else {
		var name = this.getAttribute('name');
		var shortname = this.getAttribute('shortname');
		var drawParentID = this.getAttribute('drawParentID');
		var colNum = this.getAttribute('colNum');
		var divElementId = this.getAttribute('divElementId');
		var id = this.getAttribute('id');
		var link = this.getAttribute('link');
	}
	
	
	var colNum = Math.abs(colNum);
	if(colNum == null){return;}
	
	var nextColNum = colNum + 1;
	var nextColRootID = id;
	updateColumn(drawParentID , colNum, id);	// ### update clicked column like hilite item
	
	
	gBROWSER_COL[colNum].selectedName = shortname;
	gBROWSER_COL[colNum].selectedId = "" + id;
	

	// #### Reset Columns  ####
	for(var n=0; n< gBROWSER_COL.length; n++) {
		var BrowserColumnObject = gBROWSER_COL[n];
		if (typeof BrowserColumnObject != "undefined"){
			if(BrowserColumnObject != null){
				if(BrowserColumnObject.colNum > colNum) {
					resetColumn(BrowserColumnObject.colNum);
					//gBROWSER_COL[colNum].selectedName = "";
					//gBROWSER_COL[colNum].selectedId = null;
					gBROWSER_COL[n] = null;
				}
			}
		}
	}
	
	if (typeof resetProductList != "undefined"){
		resetProductList();
		
		if (typeof gSelectedPage != "undefined"){
			if(gSelectedPage > 1){gSelectedPage = 1;} // ## reset selected Page
		}
	}

	displayPath(); // ### update and display Path 
	updateHilite(nextColNum);
	updateScrollButtonStatus();
	
	//alert("clickListItem nextColNum: " + nextColNum + " nextColRootID " + nextColRootID);
	requestBrowserColData(nextColNum, nextColRootID);		
}
	
	

// ###############   updateHilite    ###############
function updateHilite(nextColNum) {	
	
	//### switch blue hilite to gray ###
	for(var n=1; n< gBROWSER_COL.length; n++) {
		var columnObj = gBROWSER_COL[n];
		if (typeof columnObj != "undefined"){  
			if(columnObj != null){
				var checkSelectedId = columnObj.selectedId;
				var checkColNum = Math.abs(columnObj.colNum);
				if(checkColNum < nextColNum - 1) {
				
					var mColItemAreaElement = columnObj.elementId;	
					if(mColItemAreaElement != null){	
						var mColChildList = mColItemAreaElement.childNodes;
						var mDIVList = mColItemAreaElement.getElementsByTagName("div");

						// #### DIV List Data ####
						for(var i=0; i< mDIVList.length; i++) {
							var divObject = mDIVList[i];
						
							if(divObject.id == columnObj.selectedId ) {
								//ShowObjectProperties(divObject);
								divObject.className = "ColItemDefault";
							}
						}
					}
				}
			}		
			
		}
	}
}


// ###############   updateColumn    ###############
function updateColumn(drawParentID , colNum, selectedId) {	
	//alert("updateColumn " + drawParentID + "\n colNum: " + colNum + "\n selectedId: "  + selectedId );

	var mColItemAreaID = "Col" + colNum + "ItemArea";	
	var mColItemAreaElement = document.getElementById(mColItemAreaID);
	
	if(mColItemAreaElement != null){
	
		// ## BrowserColumn(parentId, colNum, selectedId, elementID); 
		gBROWSER_COL[colNum] = new BrowserColumn(drawParentID, colNum, selectedId, mColItemAreaElement); 
	
		var mColChildList = mColItemAreaElement.childNodes;
		var mDIVList = mColItemAreaElement.getElementsByTagName("div");
		
		//ShowObjectProperties(gBROWSER_COL[colNum] );	
		
		// #### Fill List with Result Data ####
    	for(var n=0; n< mDIVList.length; n++) {
       		var divObject = mDIVList[n];
       		
       		if(divObject.id == selectedId) {
       			divObject.className = "ColItemSelected"; 
       			
				//ShowObjectProperties(divObject.lastChild);
       			       			
				//### get digits count ###
       			var countString = "" + divObject.lastChild.innerHTML;
    			var countStringDigits = countString.length;
				var ColItemCountSpanClass = "ColItemCountSpanDigit" + countStringDigits + "Selected";
    	
       			divObject.lastChild.className = ColItemCountSpanClass;
       			
       		} else {
				if (divObject.className != "ColItem") {
       				divObject.className = "ColItem";
       				
       				//### get digits count ###
       				var countString = "" + divObject.lastChild.innerHTML;
    				var countStringDigits = countString.length;
					var ColItemCountSpanClass = "ColItemCountSpanDigit" + countStringDigits + "";
				
       				divObject.lastChild.className = ColItemCountSpanClass;
       			}
       		}       		
       	}
       
	}
	
}



// ################ resetColumn #################
function resetColumn(colNum){	
	var mColItemAreaID = "Col" + colNum + "ItemArea";	
	var mColItemAreaElement = document.getElementById(mColItemAreaID);
	
	if(mColItemAreaElement != null){
		mColItemAreaElement.innerHTML = ""; // ### kill all inner HTML stuff
		var mColChildList = mColItemAreaElement.childNodes;
		var mDIVList = mColItemAreaElement.getElementsByTagName("div");
		
		// #### Fill List with Result Data ####
    	for(var n=0; n< mDIVList.length; n++) {
       		var divObject = mDIVList[n];
       		mColItemAreaElement.removeChild(divObject);
       	}
     }
}

	
// ###############   displayPath    ###############
function displayPath() {	
		var pathString = "";
		
		var productGroupPathElement = document.getElementById("productGroupPath");
		
		if(productGroupPathElement != null){
			productGroupPathElement.innerHTML = ""; // ### kill all inner HTML stuff
			//var childList = productGroupPathElement.childNodes;
			var mElementList = productGroupPathElement.getElementsByTagName("a");
			
			// #### REMOVE and EMPTY anchor objects ####
			for(var n=0; n< mElementList.length; n++) {
				var elementObject = mElementList[n];
				productGroupPathElement.removeChild(elementObject);
			}
		 }
     
		// #### Compose Path String  ####
    	for(var n=1; n< gBROWSER_COL.length; n++) {
       		var BrowserColumnObject = gBROWSER_COL[n];

       		if (typeof BrowserColumnObject != "undefined"){
       			//alert("BrowserColumnObject.selectedName " + BrowserColumnObject.selectedName + " n: " + BrowserColumnObject.selectedName)
       			if(BrowserColumnObject != null){
       				if(BrowserColumnObject.selectedName.length > 1) {
       					
       					//alert("BrowserColumnObject.selectedName " + BrowserColumnObject.selectedName);
       					if(productGroupPathElement != null){
       						var pathElementId = "pathElement_" + n;
       						var pathElementClass = "pathElementClass";
       					
       						var pathStr = BrowserColumnObject.selectedName;	
       						var pathElement = createDOMElement("a" , productGroupPathElement , pathStr , pathElementClass, pathElementId);
     						pathElement.setAttribute("name", BrowserColumnObject.selectedName);
     						pathElement.setAttribute("parentId", BrowserColumnObject.parentId);
     						pathElement.setAttribute("colNum", BrowserColumnObject.colNum);
    						pathElement.setAttribute("selectedId", BrowserColumnObject.selectedId);
    						pathElement.setAttribute("selectedName", BrowserColumnObject.selectedName);
    						pathElement.setAttribute("elementId", BrowserColumnObject.elementId);
    						pathElement.setAttribute("colTitleID", BrowserColumnObject.colTitleID);
							pathElement.setAttribute("pathElementId", pathElementId);
					
    						attachEventListener(pathElement, "click", clickPathElement, false); // ### attach Event Listener 
    					}
    					
       					pathString += BrowserColumnObject.selectedName + "&nbsp;|&nbsp;";
       				}
       			}
       		}
       	}	
       	
       	// ##### Update Path Field Browser ####
		var productGroupPathElement = document.getElementById("product.productGroupPath");
		if(productGroupPathElement != null){
			productGroupPathElement.innerHTML = "" + pathString;
		}	
		
}
	

// ###########   clickPathElement #############
function clickPathElement() {	
		if (typeof this.event != "undefined"){
			var name = this.event.srcElement.name;
			var parentId = this.event.srcElement.parentId;
			var colNum = this.event.srcElement.colNum;
			var selectedId = this.event.srcElement.selectedId;
			var selectedName = this.event.srcElement.selectedName;
			var elementId = this.event.srcElement.elementId;
			var colTitleID = this.event.srcElement.colTitleID;			
			var pathElementId = this.event.srcElement.pathElementId;
		} else {
			var name = this.getAttribute('name');
			var parentId = this.getAttribute('parentId');
			var colNum = this.getAttribute('colNum');
			var selectedId = this.getAttribute('selectedId');
			var selectedName = this.getAttribute('selectedName');
			var elementId = this.getAttribute('elementId');
			var colTitleID = this.getAttribute('colTitleID');			
			var pathElementId = this.getAttribute('pathElementId');
		}
		
		var visibleStartCol = getVisibleStartCol();
		
		var numberUsedCols = getNumberUsedCols();
		
		var targetShiftCol = colNum - visibleStartCol;
		if(targetShiftCol == 1 && numberUsedCols == 2 && colNum == 2){targetShiftCol = 0;}
		//alert("visibleStartCol: " + visibleStartCol + " numberUsedCols: " + numberUsedCols + " colNum: " + colNum + " targetShiftCol: " + targetShiftCol);
		
		switchShopStatus('browser');
		shiftProductGroupCols(targetShiftCol);
		
		//alert("clickPathElement name " + name + " pathElementId: " + pathElementId + " colNum: " + colNum + " visibleStartCol: " + visibleStartCol);
		
}




// ###########  processSmartBrowserColData  -  process data from server  ###########
function processSmartBrowserColData( xmlHttp, intID ){
   
    //alert("processSmartBrowserColData: " + xmlHttp + " intID: " + intID);
    
   	// ### AJAX XML RESPONSE DATA  ###
    //var data = xmlHttp.responseText;
    var data = xmlHttp.responseXML;
   
	if(data == null){return;} // ## strat XML parsing onyl if responseXML data is existing  
    
    //##### XML ATOM FEED ROOT DATA    #####
	var feedRoot = data.getElementsByTagName('feed').item(0);
    var requestParentId = getXMLTagValue(feedRoot,'requestParentId');
    var requestColNum = getXMLTagValue(feedRoot,'requestColNum');
    
    // ### XML FEED Entry List ##############
    var entryList = data.getElementsByTagName('entry');    
  
	// ########## PARSE entryList ITEMS  ###############
	
 	if(entryList.length > 0) {	        
        var lastItemIndex = entryList.length;
        
        for(var i=0; i<lastItemIndex; i++) {
        	var mItemObject = entryList[i];        	
        	var shorttitle = getXMLTagValue(mItemObject,'shorttitle');

        	var title = getXMLTagValue(mItemObject,'title');
        	if(shorttitle == null){var shorttitle = title;}
        	
			var count = getXMLTagValue(mItemObject,'count');
			if(count == "") {var count = 0; } // ###Math.round( 1 + (Math.random() * 300));}
			var level = getXMLTagValue(mItemObject,'level');
			var parent = getXMLTagValue(mItemObject,'parent');
			var id = getXMLTagValue(mItemObject,'id');
			var summary = getXMLTagValue(mItemObject,'summary');
			var link = getXMLTagValue(mItemObject,'link');
			
			// skip "Sonstige" in case there is only 1 group in the list and we're not in BOF mode
			if (lastItemIndex == 1 && title == "Sonstige" && !gBO_mode) {
				requestBrowserColData(requestColNum, id);
				return;
			}
			

        	//alert("requestColNum: " + requestColNum + "\n title: " + title + "\n id: " + id + "\n parent: " + parent);
        	
        	// #### CREATE Browser ITEM ######
        	var mItem=new BrowserItem(shorttitle, title, count, level, parent,id,summary,link);
        }
     }
     
    //alert("requestColNum: " + requestColNum + "\n entryList.length " + entryList.length + "\n requestParentId: " + requestParentId + "\n parent: " + parent);
     if(entryList.length > 0 ) {
    	//############ Fianaly draw received data ##########
   		drawColumn(parent, requestColNum);  
     }
     
       
    setProgressIndicator('loadIndicator', 'off' , '' ); // ### switch load Cycle indiciator off
    
    // ### XML FEED Product List ##############
    var productList = data.getElementsByTagName('product');    
    if(productList.length > 0 && gBO_mode == false) {
    	processProductListBrowserData(data); // ### process product list data js shopengine.js
    }
    
 
     
    //############## RECURSIVE SMART BROWSER COLUMN REBUILD ######
    if(gRecursiveSmartBrowserColumnRebuild > 0){
    	var requestColNum = gRecursiveSmartBrowserColumnRebuild;
    	if(requestColNum > 0){
    		gBROWSER_COL[requestColNum].colNum = requestColNum;
    		gBROWSER_COL[requestColNum].parentId = requestParentId;
    		gBROWSER_COL[requestColNum].selectedId = requestParentId;
    		
    		gBROWSER_COL[requestColNum].selectedName = "Path Item " + requestColNum;
    		
    		
    		//alert("requestColNum: " + requestColNum +  " requestParentId: " + requestParentId + "  gRecursiveSmartBrowserColumnRebuild: " + gRecursiveSmartBrowserColumnRebuild);
			requestBrowserColData(requestColNum, requestParentId); // ### call smart browser
		}
		
		gRecursiveSmartBrowserColumnRebuild --;
		
		//#############  gRecursiveSmartBrowserColumnRebuild DONE #################
		if(gRecursiveSmartBrowserColumnRebuild == 0){
			//alert("gRecursiveSmartBrowserColumnRebuild DONE" + " gBROWSER_COL.length: " + gBROWSER_COL.length);
		}
    }  
      
}



// ###############   UpdatePathAndHilteStructure    ###############
function UpdatePathAndHilteStructure() {	
			
	var numberBrowserCols = gBROWSER_COL.length;
	//alert("UpdatePathAndHilteStructure " + numberBrowserCols);
	
	// #### Compose Path String  ####
    for(var n=1; n< gBROWSER_COL.length; n++) {
		var BrowserColumnObject = gBROWSER_COL[n];
		if(BrowserColumnObject != null){
			var checkCol = BrowserColumnObject.colNum;
			var checkParentId = BrowserColumnObject.parentId;
		
			if (typeof gSelectedPrimaryPathElements != "undefined"){
				if(gSelectedPrimaryPathElements.length > 0){
					var selectedPrimaryPathString = gSelectedPrimaryPathElements[n-1];
				}
			}
			
			if (typeof selectedPrimaryPathString == "undefined"){
				selectedPrimaryPathString = "";
			}
		
			var checkPathElementString = selectedPrimaryPathString.replace(/ /g, "");
       	
       		//###### GATHERING DATA OBJECTS FOR RESULT LIST #####
			for(i=0; i< gDATA.length; i++){
				// ### syntax name,count,level,parentId,id
				var mObject = gDATA[i] ;	
				var checkObjectString = mObject.name;
				checkObjectString = checkObjectString.replace(/ /g, "");
			
				//alert("\n checkObjectString " + checkObjectString + "\n checkPathElementString : " + checkPathElementString);
				var parentId = mObject.parentId;
			
				if(checkPathElementString == checkObjectString) {
					//alert("######### checkPathElementString " + checkPathElementString + " checkObjectString: " + checkObjectString);
					var selectedId = mObject.id;
					mObject.selected = selectedId;
					gBROWSER_COL[n].selectedId = selectedId; 
					gBROWSER_COL[n].selectedName = mObject.shortname;
				
					//ShowObjectProperties(gBROWSER_COL[n]);
					break;
				}
			}
		
		
			var colNum = n;
			updateHiliteOfColumn(colNum, selectedId);
		}
	}
		
	displayPath();
}


// ###############   updateHiliteOfColumn    ###############
function updateHiliteOfColumn(colNum,selectedId) {	
	var mColItemAreaID = "Col" + colNum + "ItemArea";	
	var mColItemAreaElement = document.getElementById(mColItemAreaID);
	
	if(mColItemAreaElement != null){
		var mColChildList = mColItemAreaElement.childNodes;
		var mDIVList = mColItemAreaElement.getElementsByTagName("div");
			
	
		// #### Fill List with Result Data ####
    	for(var n=0; n< mDIVList.length; n++) {
       		var divObject = mDIVList[n];	
       		
       		if(divObject.id == selectedId) {
       			if((gBROWSER_COL.length - 1) == colNum){
       				divObject.className = "ColItemSelected"; 
       			} else {
       				divObject.className = "ColItemDefault"; 
       			}
       		}
       	}
      }
}

// ##################################################################################

// #############  BrowserColumn ###################
BrowserColumn = function(parentId, colNum, selectedId, elementId) {

	// ### interface: number, elementID, name, parentId
	this.parentId = parentId;
	this.colNum = colNum;
	this.selectedId = selectedId;
	this.selectedName = "";
	this.elementId = elementId;	
	this.colTitleID = "Col" + colNum + "Title";
	
	
	//#### SmartBrowserArea Element width control ####
	var smartBrowserAreaElement = document.getElementById("SmartBrowserArea");	
	//#### smartBrowserAreaElement Element width control ####
	if(smartBrowserAreaElement != null){
	
		if(colNum > gVisibleColumns){
			smartBrowserAreaElement.style.width = (colNum * (gColumnWidth + gBorderWidth)) + "px";
		} else {
			//alert("gBROWSER_COL.length " + gBROWSER_COL.length);
			//smartBrowserAreaElement.style.width = (gVisibleColumns * (gColumnWidth + gBorderWidth)) + "px"; // ### force
		}
	} 
	
	
	//#### clipAreaDiv Element width control ####
	var clipAreaDiv = document.getElementById('clipAreaDiv');
	if(clipAreaDiv != null){
		if(colNum > gVisibleColumns){
			clipAreaDiv.style.width = (colNum * (gColumnWidth + gBorderWidth)) + "px";
		} else {
			clipAreaDiv.style.width = (gVisibleColumns * (gColumnWidth + gBorderWidth)) + "px"; // ### force
		}
	} 
	
	
	//##### Update Title and Col Elements to be visible for displayed gVisibleColumns ##### 
	for(i=1; i<= gVisibleColumns; i++){
		//#### colTitleElement Element switch display an width ####
		var colTitleElement = document.getElementById('Col' + i + 'Title');
		if(colTitleElement != null){
			colTitleElement.style.width = gColumnWidth + "px";			
			colTitleElement.style.display = "block";
		}
		
		//#### colItemAreaElement Element switch display an width ####
		var colItemAreaElement = document.getElementById('Col' + i + 'ItemArea');
		if(colItemAreaElement != null){
			colItemAreaElement.style.width = (1.0 * (gColumnWidth )) + "px";
			colItemAreaElement.style.display = "block";
		}
	}
	
	
	//#### colTitleElement Element switch display on and set width ####
	var colTitleElement = document.getElementById(this.colTitleID);
	if(colTitleElement != null){
		colTitleElement.style.width = (1.0 * gColumnWidth) + "px";			
		colTitleElement.style.display = "block";
	}
	
	//#### browserColumnElement Element switch display an width ####
	if(elementId != null){
		elementId.style.width = (1.0 * gColumnWidth) + "px";
		elementId.style.height = (1.0 * gColumnHeight - 20) + "px";			
		elementId.style.display = "block";
	}
	
	return this;
}


// #############  BrowserItem ###################
BrowserItem = function(shortname, name,count,level,parentId,id,summary,link) {

	// ### syntax name,count,parentId,id
	this.shortname = shortname;
	this.name = name;
	this.count = count;
	this.level = level;
	this.parentId = parentId;
	this.id = id;
	this.summary = summary;
	this.link = link;
	
	this.selected = null;
	
	// #### CHECK OBJECT EXISTING ALREADY ####
	var mObjectExistingItem = null;		
	for(var mItem in gDATA){	
		var checkEntry = gDATA[mItem];
		if(id == checkEntry.id) {
			var mObjectExistingItem = checkEntry.item;
			break;
		}
	}
	
	
	if(mObjectExistingItem == null) {
		this.item = gDATA_counter;
		gDATA[gDATA_counter] = this; // ## create news BROWSER ITEM if not exsiting in Database	
		gDATA_counter ++;  // ## Counter der Elemente
	
		return this;
	}
}