// JavaScript Document
//PopUpMenu.js
//* This script contains functions for manipulating and creating a pop up menu used for color pickers and linking, with
//* functions for creating code for the menu using less space on the html page.
//*
//* To use this script, you need to set the Menu0, Menu1, Menu2, Menu3, Menu4, Menu5 variables to contain code you want
//* to use for your menus, such as jump menus. Use fnGetLink to add links to these menus, and any help menus you use.
//* To show the menu, call doJump.
//*
//*
//*
//* This documentation is included in this script for reference - if you need more disk space or want your site to load
//* faster, you may remove this documentation section, but the version and copyright section below must remain intact.
//* Version 2.0
//*
//* Copyright 2008 ChaseSpace Corp. All Rights Reserved.
//*
//* Some portions may be copyrighted by other sites, and are labled.
//* --Global Variables--
var hidemen = true;
var prevhidable = true;
var goBack = 1;
//var menuDv = document.getElementById('menuDiv'); //document needs this element added.
var ie; //used to check the browser version
var iframe; //done //this global variable will carry the iFrame element code, so creation of a local variable will be unnessaccary.
var iframePrev; //done //this iFrame is just for the preview div, since it will be triggered from other menus.
var menudiv; //done //this version of this program will create this in this script, the HTML element will be removed.
var colordiv; //done //seperate DIV for the color picker, speeds up the performance aspect
var helpdiv; //done //this is the mobile DIV, also supports menus, to show item-speciffic Help.
var previewdiv; //done //this pops up when an image is hovered on an image selecting div.
var imgseldiv; //done //this is a variable-width div used for displaying lists of images on this site. Also scrolls. Use more links.
var rgbdiv = {"container":null, "R":null, "G":null, "B":null}; //the variable containing the RGB selectors
var frset = false;
var divset = false;
var menutop, menuleft, menuwidth, topoffset;
//public stuff
var ErrString; //this is set internally to report browser support issues
var UseSliderPicker = false; //set to true to use the slider picker, false to use the standard color block picker
var Menus = new Array(); // menus to be used in the page. Will be set from html and used by dojump.
var UpdateFunct = ""; //set to string containing
var MenuLineHeight = 15; //int containing the line height of the menu items, used for preview positioning.
var colpickeroutfield; //didn't used to be public, but this field is used when making links for setting output values
//----------------------- Load Helpers ------------------------//
//protected
function makeIframes() { //this initalizes the iframes on load.
if(ie==true || frset!=true) {
iframe = document.createElement('iframe');
iframe.id = 'piframe';
iframe.style.position = 'absolute';
iframe.style.display = 'none';
iframe.style.border = '0';
iframe.style.zIndex = 4;
iframe.style.width = '158px';
document.body.appendChild(iframe);
iframePrev = document.createElement('iframe');
iframePrev.id = 'previframe';
iframePrev.style.position = 'absolute';
iframePrev.style.display = 'none';
iframePrev.style.border = '0';
iframePrev.style.zIndex = 4;
iframePrev.style.width = '100px';
document.body.appendChild(iframePrev);
frset = true; //the new Iframe is still in the global variable
}
}
//protected
function initalizeColorPicker() { //this initalizes the color picker and speeds up the display time of the picker.
colordiv = document.createElement('div');
colordiv.className = "menu";
colordiv.id = 'colorPicker';
colordiv.style.display = 'none';
colordiv.style.position = 'absolute';
colordiv.style.top = 0;
colordiv.style.left = 0;
colordiv.style.width = '158px';
colordiv.style.height = '17px';
colordiv.style.zIndex = 5;
colordiv.innerHTML = GenerateColorPicker();
document.body.appendChild(colordiv);
if (colordiv.addEventListener) {
colordiv.addEventListener ("blur",hideMenu,false);
} else if (colordiv.attachEvent) {
colordiv.attachEvent ("onblur",hideMenu);
} else {
colordiv.onblur = hideMenu;
}
}
function initalizeOtherDivs() { //this prepares the menu div and the help div
menudiv = document.createElement('div');
menudiv.className = "menu";
menudiv.id = 'menuDiv';
menudiv.style.display = 'none';
menudiv.style.position = 'absolute';
menudiv.style.top = 0;
menudiv.style.left = 0;
menudiv.style.width = '150px';
menudiv.style.zIndex = 5;
document.body.appendChild(menudiv);
if (menudiv.addEventListener) {
menudiv.addEventListener ("blur",hideMenu,false);
} else if (menudiv.attachEvent) {
menudiv.attachEvent ("onblur",hideMenu);
} else {
menudiv.onblur = hideMenu;
}
helpdiv = document.createElement('div');
helpdiv.className = "menu";
helpdiv.id = 'helpDiv';
helpdiv.style.display = 'none';
helpdiv.style.position = 'absolute';
helpdiv.style.top = 0;
helpdiv.style.left = 0;
helpdiv.style.width = '200px';
helpdiv.style.zIndex = 6;
document.body.appendChild(helpdiv);
if (helpdiv.addEventListener) {
helpdiv.addEventListener ("blur",hideMenu,false);
} else if (helpdiv.attachEvent) {
helpdiv.attachEvent ("onblur",hideMenu);
} else {
helpdiv.onblur = hideMenu;
}
imgseldiv = document.createElement('div');
imgseldiv.className = "menu";
imgseldiv.id = "scrollsel";
imgseldiv.style.display = "none";
imgseldiv.style.position = "absolute";
imgseldiv.style.overflow = "auto";
imgseldiv.style.top = 0;
imgseldiv.style.left = 0;
imgseldiv.style.width = "215px"; //defined in CSS file, so dont change
imgseldiv.style.height = "325px";
imgseldiv.style.maxHeight = "325px";
imgseldiv.style.zIndex = 6;
document.body.appendChild(imgseldiv);
if (imgseldiv.addEventListener) {
imgseldiv.addEventListener ("blur",hideMenu,false);
} else if (imgseldiv.attachEvent) {
imgseldiv.attachEvent ("onblur",hideMenu);
} else {
imgseldiv.onblur = hideMenu;
}
previewdiv = document.createElement('div');
previewdiv.className = "menu";
previewdiv.id = 'previewDiv';
previewdiv.style.display = 'none';
previewdiv.style.position = 'absolute';
previewdiv.style.top = 0;
previewdiv.style.left = 0;
previewdiv.style.width = '204px';
previewdiv.style.height = "204px";
previewdiv.style.zIndex = 6;
document.body.appendChild(previewdiv);
//this will only hide when the hide function is called
}
//finds browser version, private
function detect() {
var agt = navigator.userAgent.toLowerCase();
//support browsers by adding string checks to this condition
ie = (agt.indexOf("msie") != -1 || agt.indexOf("microsoft") != -1);
//private variables to check for speciffic unsupported browsers.
var moz = (agt.indexOf("firefox") != -1);
var net = (agt.indexOf("netscape") != -1);
var chr = (agt.indexOf("chrome") != -1);
//////////
var browser = (moz==true) ? 'ERROR 105: Firefox Browser does not support '
+ 'color picker or menus!
' : (chr==true) ? 'ERROR 108: Google Chrome is like Safari and Gecko: Script'
+ ' and CSS support lack! Use IE!