function popup(url, width, height) {
	window.open(url, 'thePopupUp', 'width='+width+',height='+height);
}
function img_over(img_name) {
	current_src = document[img_name].src
	window.over_tmp_src = current_src
	file_ext = current_src.substring(current_src.lastIndexOf("."))
	new_src = current_src.substring(0, current_src.indexOf(file_ext))+"-on"+file_ext
	document[img_name].src = new_src
}
function img_out(img_name) {
	if (window.over_tmp_src) {
		document[img_name].src = window.over_tmp_src
	}
}



/* --------------- 
create an element, e.g. DIV/IMG, apply styles & attributes from 2D arrays, return reference to element.
arguments: type of element, 2D Array of style properties/values, 2D Array of attributes/values 
----------------*/
function makeElement(kind,s,a){
  var elem = document.createElement(kind);
  // i don't think is really matters, but i'm applying attributes first 
  if(a != null){
    for(var i=0; i< a.length; i++){
    	elem.setAttribute(a[i][0], a[i][1]);
    }
  }
  if(s != null){
    for(var i=0; i< s.length; i++){
    	elem.style[s[i][0]]= s[i][1];
    }
  }
  return elem;
}

/* --------------- color functions ----------------*/
function parseRGB(colorString) {
	rgbString = colorString;
	if (colorString.indexOf('#') == 0) {
		return hexToRGB(colorString);
	}
	rgbStr = rgbString.substring(4, rgbString.length - 1).split(',');
	rgb = new Array();
	rgb[0] = parseInt(rgbStr[0]);
	rgb[1] = parseInt(rgbStr[1]);
	rgb[2] = parseInt(rgbStr[2]);
	return rgb;
}
function hexToRGB(hexNum){
	var rgb = new Array();
	if(hexNum.substring(0,1) == "#") hexNum = hexNum.substring(1);
	rgb[0] = parseInt( hexNum.substring(0,2), 16 );
	rgb[1] = parseInt( hexNum.substring(2,4), 16 );
	rgb[2] = parseInt( hexNum.substring(4,6), 16 );
	return rgb;
}
function rgbToString(rgb){	/// expects "rgb" in the form [255,0,153]
	return "rgb(" + rgb[0] + ", " + rgb[1] + ", " + rgb[2] + ")";
}

function darkenRGB(rgb,fraction){
  var rgbDark = new Array();
	rgbDark[0] = Math.round(rgb[0]*fraction);
	rgbDark[1] = Math.round(rgb[1]*fraction);
	rgbDark[2] = Math.round(rgb[2]*fraction);
	if(rgbDark[0] >255) rgbDark[0]=255;
	if(rgbDark[1] >255) rgbDark[1]=255;
	if(rgbDark[2] >255) rgbDark[2]=255;
	
  return rgbDark;
}

function lightenRGB(rgb,fraction){
  var rgbLight = new Array();
	rgbLight[0] = Math.round(rgb[0] + rgb[0]*fraction);
	rgbLight[1] = Math.round(rgb[1] + rgb[1]*fraction);
	rgbLight[2] = Math.round(rgb[2] + rgb[2]*fraction);
	if(rgbLight[0] >255) rgbLight[0]=255;
	if(rgbLight[1] >255) rgbLight[1]=255;
	if(rgbLight[2] >255) rgbLight[2]=255;
	
  return rgbLight;
}

function getRGBdark(rgb){
	////////!!!!!!!!!!! VOILA!!! the scondary/dark color can be generated from my two existing filters !!!!!
	//// i.e., first, apply screenFilter with 50% white, then, apply my Darken filter at 33% !!!!!!!!!!!!!!!
	//// i wish i knew how these colors were made originally, they seemed to have been made with HSB color ...
	var firstRGB = screenFilterRAW([255,255,255],0.5,rgb);
	var secondRGB = darkenRGB(firstRGB, 0.33);
	return secondRGB;	
}
function screenFilter(fore,alpha,bg){ // returns a string for the style property
  return rgbToString(screenFilterRAW(fore,alpha,bg));
}
function screenFilterRAW(fore,alpha,bg){ ///  returns a raw rgb triplet array
	var rgb = new Array();
	rgb[0] = screenCalc(fore[0],alpha,bg[0]);
	rgb[1] = screenCalc(fore[1],alpha,bg[1]);
	rgb[2] = screenCalc(fore[2],alpha,bg[2]);
	return rgb;//"rgb(" + rgb[0] + ", " + rgb[1] + ", " + rgb[2] + ")";
}
function screenCalc(fore,alpha,back){
  /// this does the math of a Screen filter with foreground alpha,
	/// see: http://www.w3.org/TR/SVG12/rendering.html#alpha-compositing || i inferred that you can just multiply by alpha
	/// foreground*foreground_alpha + background - (foreground/foreground_alpha) * background
	var a = (fore/255)*alpha;
	var b = (back/255);
	return Math.round((a + b - ( a * b))*255);
}

/* --------------- determining element positions ----------------*/
function getElementPosition(elemID) {
    var offsetTrail = document.getElementById(elemID);
    var offsetLeft = 0;
    var offsetTop = 0;
    while (offsetTrail) {
        offsetLeft += offsetTrail.offsetLeft;
        offsetTop += offsetTrail.offsetTop;
        offsetTrail = offsetTrail.offsetParent;
    }
    if (navigator.userAgent.indexOf("Mac") != -1 && 
        typeof document.body.leftMargin != "undefined") {
        offsetLeft += document.body.leftMargin;
        offsetTop += document.body.topMargin;
    }
    return {left:offsetLeft, top:offsetTop};
}

function getEStyle(id,IEprop,CSSprop){
	var elem = document.getElementById(id);
	if(elem.offsetHeight){
		return "offsetHeight = "+elem.offsetHeight;
		//return elem.currentStyle[IEprop]
	} else if(window.getComputedStyle){
		var compStyle = window.getComputedStyle(elem, "");
		return compStyle.getPropertyValue(CSSprop);
	}
}