/* Navigation scripts all scripts that handle the navigation and navigation status on the site Menu ID configuration: ID 0 is the home menu item. ID 1 to 999 is main menu items. ID 1000 to 1999 is sub menu items. ID 2000 to 2999 is external main menu link items. ID 3000 to 3999 is external sub menu link items. */ /* ============================================================ Function: initiatePage Last Modified: Feb/15/2008 This function is called during page load time i.e. when the shop URL is first visited. It is the best time for us to do various intializations. In this function, all the div elements are obtained and stored away in the application variables. Then all the DIV elements except the ones that are needed for the initial page are hidden. After that, the div elements in other screens are removed from the main or the super div element. In the end, an Ajax asynchronous call is made to the server to fetch all the data for the site. ============================================================ */ function InitiateSite() { InitMenu(); addToCart( "", "", "", "" ); // Get all the Div elements in our program and store them in local variables. mainPageDivElement = document.getElementById(DIV_MAIN_PAGE); startPageDivElement = document.getElementById(DIV_START_PAGE); itemListPageDivElement = document.getElementById(DIV_ITEMLIST_PAGE); //itemPageDivElement = document.getElementById(DIV_ITEM_PAGE); //pageFooterDivElement = document.getElementById(DIV_PAGE_FOOTER); pictureDivElement = document.getElementById(DIV_PAGE_PICTURE); cartListPageDivElement = document.getElementById(DIV_CARTLIST_PAGE); calendarPageDivElement = document.getElementById(DIV_CALENDAR_PAGE); // Record the current DIV element being shown to the user. // i.e. The shop wellcome page. currentlyShownElement = startPageDivElement; // Get offers offers(); // Set all the DivElements as Hidden except the MainPage, teller options and // Footer Div elements. calendarPageDivElement.style.visibility = CSS_STYLE_HIDDEN; itemListPageDivElement.style.visibility = CSS_STYLE_HIDDEN; //itemPageDivElement.style.visibility = CSS_STYLE_HIDDEN; cartListPageDivElement.style.visibility = CSS_STYLE_HIDDEN; pictureDivElement.style.visibility = CSS_STYLE_HIDDEN; // Remove all the Div elements except the MainPage, teller options and the // Footer Div Elements. Since we have a local copy of them in our variables, // whenever we need them later, we will add them as needed. // (This will avoid the vertical scroll bar appearing // on the browser screen due to too many hidden but dormant div elements). mainPageDivElement.removeChild(calendarPageDivElement); mainPageDivElement.removeChild(itemListPageDivElement); //mainPageDivElement.removeChild(itemPageDivElement); mainPageDivElement.removeChild(pictureDivElement); mainPageDivElement.removeChild(cartListPageDivElement); } /* ============================================================ Function: changeMenuItemStyleForSelection Last Modified: Feb/15/2008 This function simulates the menuitem highlighting for the menu items. All the menu items are DIV elements with menu text inside of them. When the user moves his mouse over this element, this event handler will be called. It simply applies a different style to that DIV element. That makes a visual cue for the user by highlighting the text in a different color. This function gets the menu item number where the mouse is at now. Refer to the HTML file from where this parameter is passed. ============================================================ */ function changeMenuItemStyleForSelection(currentMenuItem) { // Get the current DIV element that is being moused over. // Caller gives us the DIV element number (deposit, debit or portfolio). // From that number, get the HTML id and get the element object. var menuItemElement = document.getElementById(MENU_ITEM + currentMenuItem); // Simply assign the CSS rule for that classname. // That is all you have to do to simulate the menu highlighting. if (menuItemElement.className == MENU_ITEM_DEFAULT){ menuItemElement.className = MENU_ITEM_SELECTION; } else if (menuItemElement.className == MENU_ITEM_SUBDEFAULT){ menuItemElement.className = MENU_ITEM_SUBSELECTION; } } // End of function changeMenuItemStyleForSelection /* ============================================================ Function: changeMenuItemStyleToDefault Last Modified: Feb/15/2008 This function simulates the menuitem unhighlighting for the menu items. All the menu items are DIV elements with menu text inside of them. When the user moves his mouse out of this element, this event handler will be called. It simply applies a different style to that DIV element. That makes a visual cue for the user by removing the hightlighted text into a normal text with no background color. This function gets the menu item number where the mouse is at now. Refer to the HTML file from where this parameter is passed. ============================================================ */ function changeMenuItemStyleToDefault(currentMenuItem) { // Get the current DIV element from where the mouse is moving out. // Caller gives us the DIV element number (deposit, debit or portfolio). // From that number, get the HTML id and get the element object. var menuItemElement = document.getElementById(MENU_ITEM + currentMenuItem); if (menuItemElement.className == MENU_ITEM_SELECTION){ menuItemElement.className = MENU_ITEM_DEFAULT; } else if (menuItemElement.className == MENU_ITEM_SUBSELECTION){ menuItemElement.className = MENU_ITEM_SUBDEFAULT; } } // End of function changeMenuItemStyleToDefault /* ============================================================ Function: processMenuItem Last Modified: Feb/15/2008 This function processes the menu operation for the given menu item. This is an event handler for the DIV elements that include the menu items text a.k.a menu text. Depending on which option the visitor select, it brings up the screen corresponding to that operation. ============================================================ */ function processMenuItem(currentMenuItem, currentMenuItemName ) { // Let us change the style of this menuitem text in the list to // default text and background colors. changeMenuItemStyleToDefault(currentMenuItem); // Set the active menu to curren Menu Item currentActiveMenuItemName = currentMenuItemName; currentActiveMenuSubItemName = ""; // Depending on the visitor's selection, bring the correct screen. switch(currentMenuItem) { case 0: // Go home!!! // Hide whatever is shown now and show the home screen. hideShowAndInsertAsTopElement(currentlyShownElement, startPageDivElement, null, null, null, null); break; case 9002: // Calander // Hide whatever is shown now and show the home screen. hideShowAndInsertAsTopElement(currentlyShownElement, calendarPageDivElement, null, null, null, null); if (document.getElementById("cframe")){ currentlyShownElement.removeChild( document.getElementById("cframe") ); } node = document.createElement( "iframe" ); node.id = "cframe"; node.src = "http://www.google.com/calendar/embed?title=Detta%20h%C3%A4nder&src=86e9s6ki6bqavseb6r515ffefc@group.calendar.google.com&color=%23528800&src=9larhdql792ckdmt2u2h0vqe04@group.calendar.google.com&color=%23BE6D00&src=ifiace2olfrgkb0v5amvsh1sms@group.calendar.google.com&color=%2388880E&ctz=Europe/Stockholm"; //node.setAttribute("style", "border-width:0"); node.width = "100%";//"765"; node.height = "470"; node.frameBorder = "0"; node.scrolling = "no"; //"); currentlyShownElement.appendChild( node ); break; case 9003: // Picture gallery // Hide whatever is shown now and show the home screen. hideShowAndInsertAsTopElement(currentlyShownElement, calendarPageDivElement, null, null, null, null); if (document.getElementById("cframe")){ currentlyShownElement.removeChild( document.getElementById("cframe") ); } node = document.createElement( "iframe" ); node.id = "cframe"; node.src = "zenphoto/"; node.width = "100%";//"765"; node.height = "1000"; node.frameBorder = "0"; node.scrolling = "auto"; currentlyShownElement.appendChild( node ); break; case 9004: // About // Hide whatever is shown now and show the home screen. hideShowAndInsertAsTopElement(currentlyShownElement, calendarPageDivElement, null, null, null, null); if (document.getElementById("cframe")){ currentlyShownElement.removeChild( document.getElementById("cframe") ); } node = document.createElement( "iframe" ); node.id = "cframe"; node.src = "about.php"; node.width = "100%";//"765"; node.height = "470"; node.frameBorder = "0"; node.scrolling = "auto"; currentlyShownElement.appendChild( node ); break; case 9005: // Karta // Hide whatever is shown now and show the home screen. hideShowAndInsertAsTopElement(currentlyShownElement, calendarPageDivElement, null, null, null, null); if (document.getElementById("cframe")){ currentlyShownElement.removeChild( document.getElementById("cframe") ); } node = document.createElement( "iframe" ); node.id = "cframe"; node.src = "map.html"; node.width = "100%";//"765"; node.height = "470"; node.frameBorder = "0"; node.scrolling = "no"; currentlyShownElement.appendChild( node ); break; case 9006: // Kšpvilkor // Hide whatever is shown now and show the home screen. hideShowAndInsertAsTopElement(currentlyShownElement, calendarPageDivElement, null, null, null, null); if (document.getElementById("cframe")){ currentlyShownElement.removeChild( document.getElementById("cframe") ); } node = document.createElement( "iframe" ); node.id = "cframe"; node.src = "vilkor.php"; node.width = "100%";//"765"; node.height = "600"; node.frameBorder = "0"; node.scrolling = "auto"; currentlyShownElement.appendChild( node ); break; default: // Get submenu. reqSubMenu( currentMenuItem ); // Hide whatever is shown now and show the list screen. hideShowAndInsertAsTopElement(currentlyShownElement, itemListPageDivElement, null, null, null, null); // Get default content for the menu item. reqProdList( currentMenuItem ); // Set the header text. setHeader( "listHeader", currentActiveMenuItemName ); } } // End of function processMenuItem /* ============================================================ Function: hideShowAndInsertAsTopElement Last Modified: Feb/15/2008 This function hides an element and shows another element by inserting the newly shown element as the top element in the browser DOM tree hierarchy. This function is central to achieving the goal of making a true single page based Ajax application. This function takes several parameters as input as shown below: 1) Element that needs to be hidden 2) Element that needs to be shown 3) Any specific UI control to receive focus in the newly shown (DIV) element. 4) Any text that need to be customized on a UI control. 5) If there is an edit control, where the cursor should be set? 6) End position of the cursor region (Read comments below) 7) Do we need to display page footer menu? ============================================================ */ function hideShowAndInsertAsTopElement(elementToHide, elementToShow, childElementIdToFocus, childElementIdText, childElementTextCursorStartPos, childElementTextCursorEndPos) { // Check so that it's not the same menu item to show and hide. if (elementToShow.id != elementToHide.id){ // Hide and show as per the caller's wish. elementToHide.style.visibility = CSS_STYLE_HIDDEN; elementToShow.style.visibility = CSS_STYLE_VISIBLE; // Store the element id that is being currently shown to the user. currentlyShownElement = elementToShow; // Now insert the newly shown element as the first child of the // root div element of this document. mainPageDivElement.insertBefore(elementToShow, elementToHide); // Remove the elementToHide temporarily until there is a need to show it later. // (This will avoid the vertical scroll bar appearing on the browser screen due // to too many hidden but dormant div elements). mainPageDivElement.removeChild(elementToHide); // Any special request to set focus on a particular child element? if (childElementIdToFocus != null) { // If we were asked to do that, set the child element id focus, // text, cursor position etc. setElementFocusAndTextAndCursorPosition(childElementIdToFocus, childElementIdText, childElementTextCursorStartPos, childElementTextCursorEndPos); } // End of if (childElementIdToFocus != null) } } // End of function hideShowAndInsertAsTopElement /* ============================================================ Function: setElementFocusAndTextAndCursorPosition Last Modified: May/16/2007 This function sets focus on a particular element. Optionally, it also sets text for an input field. In addition, it can also set the cursor position of the input field. This function is useful, when a particular input field needs to be initialized with default values so that the user can either accept or modify only a portion of the default text. ============================================================ */ function setElementFocusAndTextAndCursorPosition(elementIdToFocus, elementIdText, elementTextCursorStartPos, elementTextCursorEndPos) { // Do it only if the element id is valid. if (elementIdToFocus != null) { // If we were asked to do that, set the element id focus, text, // cursor position etc. if (elementIdText != null) { // Change the text. document.getElementById(elementIdToFocus).value=elementIdText; } // Set the cursor to specific position inside the input field. if ((elementTextCursorStartPos != null) && (elementTextCursorEndPos != null)) { // IE specific cursor positioning inside a text field. if (document.selection) { var range = document.getElementById(elementIdToFocus).createTextRange(); range.collapse(true); range.moveStart("character", elementTextCursorStartPos); range.moveEnd("character", elementTextCursorEndPos); range.select(); } else { // Mozilla and Firefox specific cursor position inside a text field. document.getElementById(elementIdToFocus).selectionStart = elementTextCursorStartPos; document.getElementById(elementIdToFocus).selectionEnd = elementTextCursorEndPos; } // End of else - if (document.selection) } // End of if ((elementTextCursorStartPos != null) // Set the focus to the required element. document.getElementById(elementIdToFocus).focus(); } // End of if (elementIdToFocus != null) } // End of function setElementFocusAndTextAndCursorPosition. /* ============================================================ Function: processSubMenuItem Last Modified: Jun/16/2008 This function processes the menu operation for the given menu item. This is an event handler for the DIV elements that include the menu items text a.k.a menu text. Depending on which option the visitor select, it brings up the screen corresponding to that operation. ============================================================ */ function processSubMenuItem(currentSubMenuItem, currentSubMenuItemName) { // Let us change the style of this menuitem text in the list to // default text and background colors. changeMenuItemStyleToDefault(currentSubMenuItem); // Set the active menu to curren Menu Item currentActiveMenuSubItemName = currentSubMenuItemName; // Set the page query here. reqProdList( currentSubMenuItem ); // Hide whatever is shown now and show the list screen. hideShowAndInsertAsTopElement(currentlyShownElement, itemListPageDivElement, null, null, null, null); // Set the header text. setHeader( "listHeader", currentActiveMenuItemName + "/" + currentActiveMenuSubItemName ); } // End of function processSubMenuItem /* ============================================================ Function: createSubMenu Last Modified: Feb/17/2008 This function takes JSON formated data and convert it to a DOM menu object. ============================================================ */ function createSubMenu( objJSON, parentID ) { var ChildNode; // Get the parent object from the document. var insertParent = document.getElementById( parentID ); // Remove any active sub menu. var oldSubMenu = document.getElementById("activeSubMenu"); if (oldSubMenu != null){ insertParent.removeChild(oldSubMenu); } // Get Menu item to expand var sibling = document.getElementById( MENU_ITEM + objJSON.sibling ); // Create the menu DIV var newSubMenu = document.createElement("div"); // Set id to Active newSubMenu.id = "activeSubMenu"; // Creating all the menu items eccept the default one, and inserting them // in to the menu. if (BrowserDetect.browser == "Explorer"){k=1} else{k=0}; for(var i=0; i < objJSON.item.length-k; i++){ if (objJSON.item[i].name != "default"){ //objJSON.item[i].name = objJSON.item[i].name.replace("+"," "); ChildNode = document.createElement( "div" ); ChildNode.pid = objJSON.item[i].id; ChildNode.pname = unescape(objJSON.item[i].name); ChildNode.className = MENU_ITEM_SUBDEFAULT; ChildNode.id = MENU_ITEM + ChildNode.pid; ChildNode.onmouseover = function(){ changeMenuItemStyleForSelection( this.pid )}; ChildNode.onmouseout = function(){ changeMenuItemStyleToDefault( this.pid )}; ChildNode.onclick = function(){ processSubMenuItem( this.pid, this.pname )}; textNode = document.createTextNode( "-" + ChildNode.pname ); ChildNode.appendChild( textNode ); newSubMenu.appendChild( ChildNode ); } }; // Insert the menu in to the document. insertParent.insertBefore( newSubMenu, sibling.nextSibling ); } //End function createSubMenu() /* ============================================================ Function: getSubMenu Last Modified: Feb/17/2008 This function is the callback function for the sub menu request it gets the sub menu from the server in JSON formated text. ============================================================ */ function getSubMenu() { // Do something only when the HTTP readystate is LOADED. if (Server_request.readyState == HTTP_READYSTATE_LOADED) { // You have nothing to do until it is 200 OK. if (Server_request.status == HTTP_STATUS_OK) { // We will get the response data in JSON format as plain text. var textResult = Server_request.responseText; //alert(textResult); //textResult = '{"sibling":"2","item":[{"id":"1021","name":"Brazil-canvas"},{"id":"1008","name":"default"}],}'; //alert(textResult); // Convert the JSON formatted text into a JSON object. var obj = textResult.parseJSON(); // Insert the menu in to the menu DIV. createSubMenu(obj, DIV_MENU); } // End if (Server_request.status == HTTP_STATUS_OK) } // End if (Server_request.readyState == HTTP_READYSTATE_LOADED) } // End function getSubMenu() /* ============================================================ Function: reqSubMenu Last Modified: Feb/17/2008 This function initiate a Http request to get the sub menu items for a specific menu item. ============================================================ */ function reqSubMenu( menuItemID ) { var url = "./php/submenu.php?post_data=" + menuItemID; var callbackFunction = getSubMenu; Server_request = createRequest(); // Send this XHR request now. sendHttpRequest(Server_request, callbackFunction, url, ""); } // End reqSubMenu() /* ============================================================ Function: createMenu Last Modified: Feb/17/2008 This function takes JSON formated data and convert it to a DOM menu object. ============================================================ */ function createMenu( objJSON, parentID ) { var ChildNode, textNode; // Get the parent object from the document. var insertParent = document.getElementById( parentID ); // Create the menu DIV var newMenu = document.createElement( "div" ); newMenu.id = DIV_MENU; newMenu.className = "menus"; // Creating all the other menu items and inserting them in to the // menu. if (BrowserDetect.browser == "Explorer"){k=1} else{k=0}; for(var i=0; i < objJSON.result.length - k; i++){ ChildNode = document.createElement( "div" ); ChildNode.pid = objJSON.result[i].id; ChildNode.pname = unescape(objJSON.result[i].name); ChildNode.className = MENU_ITEM_DEFAULT; ChildNode.id = MENU_ITEM + ChildNode.pid; ChildNode.onmouseover = function(){ changeMenuItemStyleForSelection( this.pid )}; ChildNode.onmouseout = function(){ changeMenuItemStyleToDefault( this.pid )}; ChildNode.onclick = function(){ processMenuItem( this.pid, this.pname )}; textNode = document.createTextNode( ChildNode.pname ); ChildNode.appendChild( textNode ); newMenu.appendChild( ChildNode ); }; // Insert the menu in to the document. insertParent.appendChild(newMenu); // Return the menu object to the application for later use. return(newMenu); } //End function createMenu() /* ============================================================ Function: getMenu Last Modified: Feb/17/2008 This function is the callback function for the site menu request it gets the site menu from the server in JSON formated text. ============================================================ */ function getMenu() { // Do something only when the HTTP readystate is LOADED. if (Server_request.readyState == HTTP_READYSTATE_LOADED) { // You have nothing to do until it is 200 OK. if (Server_request.status == HTTP_STATUS_OK) { // We will get the response data in JSON format as plain text. var textResult = Server_request.responseText; // Convert the JSON formatted text into a JSON object. var obj = textResult.parseJSON(); // Insert the menu in to the menu DIV. // and save the default menu menuDivElement = createMenu(obj, DIV_MAIN_PAGE); } // End if (Server_request.status == HTTP_STATUS_OK) } // End if (Server_request.readyState == HTTP_READYSTATE_LOADED) } // End function getMenu() /* ============================================================ Function: InitMenu Last Modified: Feb/17/2008 This function initiate a Http request to get the site menu. ============================================================ */ function InitMenu() { var url = "./php/menu.php"; var callbackFunction = getMenu; Server_request = createRequest(); // Send this XHR request now. sendHttpRequest(Server_request, callbackFunction, url, ""); } /* ============================================================ Function: setHeader Last Modified: Jun/19/2008 This function changes the header on the page to show the input text. ============================================================ */ function setHeader( id, headerString ) { // Set the header text. var head = document.getElementById( id ); head.firstChild.firstChild.nodeValue = headerString; } /* ============================================================ Function: getSerchResult Last Modified: Jun/30/2008 This function is the callback function for the site menu request it gets the cart info from the server in JSON formated text. ============================================================ */ function getSerchResult(){ // Do something only when the HTTP readystate is LOADED. if (Prod_request.readyState == HTTP_READYSTATE_LOADED) { // You have nothing to do until it is 200 OK. if (Prod_request.status == HTTP_STATUS_OK) { // We will get the response data in JSON format as plain text. var textResult = Prod_request.responseText; // Convert the JSON formatted text into a JSON object. var obj = textResult.parseJSON(); createProdList( obj, "ItemListPage" ); } // End if (Tabel_request.status == HTTP_STATUS_OK) } // End if (Tabel_request.readyState == HTTP_READYSTATE_LOADED) } // End function getSerchResult /* ============================================================ Function: serch Last Modified: Jun/30/2008 This function initiate a Http request to get the serch result. ============================================================ */ function serch( action ){ // Hide whatever is shown now and show the list screen. hideShowAndInsertAsTopElement(currentlyShownElement, itemListPageDivElement, null, null, null, null); // Set the header text. setHeader( "listHeader", "Sök resultat för " + action + ":" ); var callbackFunction = getSerchResult; url = "./php/serch.php?action=" + action; Prod_request = createRequest(); // Send this XHR request now. sendHttpRequest(Prod_request, callbackFunction, url, ""); } /* ============================================================ Function: seek Last Modified: Jun/30/2008 This function initiate a Http request to get the search result. ============================================================ */ function seek( inputString ){ // Initialize seatch only if the string is longer then // two characters and the last character is'nt a space. // inputString.length >= 2 && if ( inputString.length >= 1 && inputString.charAt( inputString.length -1 ) != ' '){ serch( inputString ); } } // End function seek /* ============================================================ Function: getOffers Last Modified: Aug/14/2008 This function is the callback function for the offers request it gets the special offers from the server in JSON formated text. ============================================================ */ function getOffers(){ // Do something only when the HTTP readystate is LOADED. if (Offer_request.readyState == HTTP_READYSTATE_LOADED) { // You have nothing to do until it is 200 OK. if (Offer_request.status == HTTP_STATUS_OK) { // We will get the response data in JSON format as plain text. var textResult = Offer_request.responseText; // Convert the JSON formatted text into a JSON object. var obj = textResult.parseJSON(); createProdList( obj, "ads" ); } // End if (Tabel_request.status == HTTP_STATUS_OK) } // End if (Tabel_request.readyState == HTTP_READYSTATE_LOADED) } // End function getOffers /* ============================================================ Function: offers Last Modified: Aug/14/2008 This function initiate a Http request to get the serch result. ============================================================ */ function offers( ){ var callbackFunction = getOffers; url = "./php/offers.php"; Offer_request = createRequest(); // Send this XHR request now. sendHttpRequest(Offer_request, callbackFunction, url, ""); }