function getOffsetElement(elem) {
   /*  
  
   This is used to get the absolute position of an item in the page
  
   Nothing to change here
  
   */
   var osL = 0;
   var osT = 0;
   while (elem.offsetParent) {
      osL += + elem.offsetLeft;
      osT += + elem.offsetTop;
      elem = elem.offsetParent;
      }
   return {
      y : osT, x : osL};
   }
function skinCombo(el_id) {
	if(!document.getElementById(el_id)) return false;
   //if you do not use this, the browser will not know the dimmensions of the pictures until you refresh the page, so first time you load the page they will not be well aligned.
   // to solve this, we specify the dimmensions of the pictures
   if (document.images) {
      //this is for the round corner in the left of the selectbox
      pic_left_preload = new Image(17, 32);
      pic_left_preload.src = "../images/left.png";
      //this is for the drown arrow
      pic_arrow_preload = new Image(39, 32);
      pic_arrow_preload.src = "../images/arrow2.png";
      }
   /*  
  
      This function will be called for every selectbox that you want to change the skin.
  
      It needs one parameter : [el_id] ; it represents the id for the selectbox that will be skinned
  
     
  
      You may change several things here:
  
     
  
   [*] the arrow is an jpg image. you can change this whith whatever you want. the name of the picture should be "arrow.jpg" .
  
      If you plan to change this, make sure to change the .src of [down_arrow] var. Just search in this file [down_arrow.src] and change it to whatever you need.
  
   [*]   The [down_arrow] also has a "mouse over" status. In this demo it uses the image "images/arow_on.jpg". To change this, follow the same stap from described before. If you do not want an "mouse over" effect, replace "images/arrow_on.jpg" with "images/arrow.jpg"
  
   [*]   The font color is stored in [font_color] var. If you want to change this, just give it a new hexa value.
  
   [*]   The select bar color is stored in [hover_color] var. If you want to change this, just give it a new hexa value.  
  
   [*]   The options background color is stored in [option_background] var. If you want to change this, just give it a new hexa value.  
  
   [*]   The select list height is stored in [options_height] var. If you want to change this, just give it a new height. Do not forget to add the "px"; if the list is longer then this value, a scroll bar will be displayed  
  
     
  
   */
   var font_color = "#000000";
   var hover_color = "#ffffff";
   var option_background = "#FFFFFF";
   var options_height = "";
   var keep_alive = 1000;
   //how long it takes to hide the list;
   var font_size = "11px";
   var font_family = "Verdana";
   var font_weight = "normal";
   var countdown = null;
   //keeps the timer to hide the list
   var combo_container = document.createElement("div");
   combo_container.style.backgroundImage = "url('../images/pattern.png')";
   combo_container.id = "combo_container_" + el_id;
   combo_container.style.position = "absolute";
   combo_container.style.top = getOffsetElement(document.getElementById(el_id)).y - 2 + "px";
   combo_container.style.width = document.getElementById(el_id).style.width;
   combo_container.style.height = "32px";
   combo_container.style.overflow = "hidden";
   combo_container.style.whiteSpace = "nowrap";
   combo_container.style.color = font_color;
   combo_container.style.cursor = "pointer";
   combo_container.style.fontWeight = font_weight;
   combo_container.style.fontFamily = font_family;
   combo_container.style.fontSize = font_size;
   combo_container.style.lineHeight = "29px";
   // combo_container.id=el_id+"combo_container";
   combo_container.style.zIndex = 5000;
   var selected_text = document.getElementById(el_id).options[document.getElementById(el_id).selectedIndex].text;
   combo_container.innerHTML = selected_text;
   var down_arrow = pic_arrow_preload;
   down_arrow.style.position = "absolute";
   down_arrow.height = combo_container.style.height.replace("px", "");
   down_arrow.id = "down_arrow_" + el_id;
   down_arrow.style.top = combo_container.style.top;
   down_arrow.style.zIndex = combo_container.style.zIndex + 1;
   down_arrow.style.cursor = "pointer";
   // down_arrow.id=el_id+"down_arrow";
   down_arrow.onmouseover = function() {
      this.src = "../images/arrow2_on.png" }
   down_arrow.onmouseout = function() {
      this.src = "../images/arrow2.png" }
   var left_image = pic_left_preload;
   left_image.style.position = "absolute";
   left_image.height = combo_container.style.height.replace("px", "");
   left_image.id = "left_image_" + el_id;
   left_image.style.left = getOffsetElement(document.getElementById(el_id)).x + "px";
   left_image.style.top = combo_container.style.top;
   left_image.style.zIndex = 5000;
   // left_image.id=el_id+"left_image";
   combo_container.style.left = getOffsetElement(document.getElementById(el_id)).x + left_image.width + "px";
   // down_arrow.style.left=parseInt(getOffsetElement(document.getElementById(el_id)).x)+parseInt(combo_container.style.width.replace("px",""))-parseInt(down_arrow.width)+left_image.width+"px"
   down_arrow.style.left = parseInt(getOffsetElement(document.getElementById(el_id)).x) + parseInt(combo_container.style.width.replace("px", "")) + left_image.width + "px";
   combo_container.onclick = down_arrow.onclick = function() {
      if(document.getElementById("options_container_" + el_id).style.display != "none") {
         document.getElementById("options_container_" + el_id).style.display = "none";
         document.getElementById("options_container_" + el_id).style.zIndex = document.getElementById("options_container_" + el_id).style.zIndex - 2;
         }
      else {
         clearTimeout(countdown);
		 document.getElementById("options_container_" + el_id).style.display = "";
         document.getElementById("options_container_" + el_id).style.zIndex = document.getElementById("options_container_" + el_id).style.zIndex + 2;
         for(var i = 0; i < document.getElementById(el_id).options.length; i++) {
            if(document.getElementById("option_" + i + "_" + el_id).innerHTML != combo_container.innerHTML) {
               document.getElementById("option_" + i + "_" + el_id).style.backgroundColor = option_background;
               }
            else {
               document.getElementById("option_" + i + "_" + el_id).style.backgroundColor = hover_color;
               }
            }
         }
      }
   var options_container = document.createElement("div");
   options_container.style.position = "absolute";
   options_container.style.top = getOffsetElement(document.getElementById(el_id)).y + parseInt(combo_container.style.height) - 1 + "px";
   options_container.style.left = getOffsetElement(document.getElementById(el_id)).x + left_image.width + "px";
   options_container.style.display = "none";
   options_container.id = "options_container_" + el_id;
   options_container.style.whiteSpace = "nowrap";
   options_container.style.height = options_height;
   options_container.style.overflow = "auto";
   options_container.style.overflowX = "hidden";
   options_container.style.backgroundColor = option_background;
   options_container.style.zIndex = 5000;
   options_container.onmouseout = function() {
      countdown = setTimeout("hideList('" + el_id + "')", keep_alive);
      }
   options_container.onmouseover = function() {
      clearTimeout(countdown);
      }
   options_container.style.border = "1px solid #D1D1D1";
   var ales = "";
   for(var x = 0; x < document.getElementById(el_id).options.length; x++) {
      var option = document.createElement("div");
	  option.id = "option_" + x + "_" + el_id;
      option.innerHTML = document.getElementById(el_id).options[x].text;
      option.style.cursor = "pointer";
      option.style.overflow = "hidden";
      option.style.whiteSpace = "nowrap";
      option.style.color = font_color;
      option.style.width = "100%";
	  option.style.fontWeight = font_weight;
      option.style.fontFamily = font_family;
      option.style.fontSize = font_size;
      option.onclick = function() {
         var get_option = this.id.split("_")[1];
		 document.getElementById(el_id).value = document.getElementById(el_id).options[get_option].value;
         // aici
         if (document.getElementById(el_id).name == "artist_order") {
            if (ales != document.getElementById(el_id).options[get_option].value) document.forms['artist_order'].submit();
            }
         if (document.getElementById(el_id).name == "artists") {
            if (ales != document.getElementById(el_id).options[get_option].value) document.forms['display_criteria'].submit();
            }
         ales = document.getElementById(el_id).options[get_option].value;
         document.getElementById("combo_container_" + el_id).innerHTML = this.innerHTML;
         document.getElementById("options_container_" + el_id).style.display = "none";
         ;
         }
      option.onmouseover = function() {
         clearInterval(countdown);
		 for(var i = 0; i < document.getElementById(el_id).options.length; i++) {
            document.getElementById("option_" + i + "_" + el_id).style.backgroundColor = option_background;
            document.getElementById("option_" + i + "_" + el_id).style.color = font_color;
            }
         this.style.backgroundColor = hover_color;
         this.style.color = "#000000";
         }
      options_container.appendChild(option);
      }
   if(options_container.clientWidth < document.getElementById(el_id).clientWidth) {
      options_container.style.width = document.getElementById(el_id).clientWidth + 10 + "px" }
   document.body.appendChild(left_image);
   document.body.appendChild(down_arrow);
   document.body.appendChild(combo_container);
   document.body.appendChild(options_container);
   document.getElementById(el_id).style.visibility = "hidden";
   setInterval("reposition('" + el_id + "','" + combo_container.id + "','" + left_image.id + "','" + down_arrow.id + "','" + options_container.id + "')", 1);
   }
function reposition(el_id, combo_container, left_image, down_arrow, options_container) {
   combo_container = document.getElementById(combo_container);
   left_image = document.getElementById(left_image);
   down_arrow = document.getElementById(down_arrow);
   options_container = document.getElementById(options_container);
   left_image.style.left = getOffsetElement(document.getElementById(el_id)).x + "px";
   left_image.style.top = combo_container.style.top;
   combo_container.style.left = getOffsetElement(document.getElementById(el_id)).x + left_image.width + "px";
   down_arrow.style.left = parseInt(getOffsetElement(document.getElementById(el_id)).x) + parseInt(combo_container.style.width.replace("px", "")) + left_image.width + "px";
   options_container.style.top = getOffsetElement(document.getElementById(el_id)).y + parseInt(combo_container.style.height) - 1 + "px";
   options_container.style.left = getOffsetElement(document.getElementById(el_id)).x + left_image.width + "px"}
function hideList(el_id) {
   document.getElementById("options_container_" + el_id).style.display = "none"}