function TurnOn() {
  document.getElementById("on_button").style.display = 'none';
  document.getElementById("slider").style.display = 'block';

  var s = new Slider(document.getElementById("slider"),
                     document.getElementById("slider-input"));
  s.onchange = function () {
    fila_slider = 6 - s.getValue();
    ReList();
  }
  s.setMinimum(1);
  s.setMaximum(5);
  s.setValue(2); 
}

function BuildBox(NUMBER) {
  // put the image url together
  IMG_URL = SCENE7_part1 + list_items[NUMBER][1] + SCENE7_part2 + '&wid=' + WIDTH[fila_slider] + '&hei=' + HEIGHT[fila_slider] + SCENE7_part3;
  // outer container
  BOX  = '<div class="' + product_container[fila_slider] + '">';
  BOX += '<div class="product_grip"><a class="blueLink" href="' + list_items[NUMBER][0] + '" ><img src="' + IMG_URL + '" width="' + WIDTH[fila_slider] + '" height="' + HEIGHT[fila_slider] + '" border="0" alt="' + list_items[NUMBER][4] + '" />';
  BOX += '</a><br /><a class="blueLink" href="' + list_items[NUMBER][0] + '" >';
  BOX += '<div class="product_name_link"><span class="product_name">' + list_items[NUMBER][4] + '</span> <br />';
  BOX += '<span class="product_price">' + list_items[NUMBER][6] + '</span></a></div></div>';
  BOX += '</div>';
  BOX += "\n";
  return BOX;
}

var separator = new Array();

function AddSeparatorBox() {
  cur_num = list_items.length;
  // create a separator box
  BOX  = '<div class="separator" id="container_' + cur_num + '">';
  BOX += '  <div class="separator_content">';
  BOX += '<input type="text" class="separator_textbox" name="separator_' + separator.length + '" />';
  BOX += '<br />';
  BOX += '<input type="checkbox" name="remove_' + separator.length + '" value="Y" /> remove separator';
  BOX += '  </div>';
  BOX += '</div>';

  order_list[cur_num] = 'separator_' + separator.length;
  list_items[cur_num] = new Array('separator','separator','','','','','','');
  separator[separator.length] = list_items.length;

  $('product_list_container').innerHTML += BOX;
  Sortable.create('product_list_container',{tag:'div',overlap:'horizontal',constraint:false});
}

function ReList() {
  LIST_HTML = '';
  for (k=0;k<list_items.length;k++) {
    LIST_HTML += BuildBox(k);
  }
  // end for k

  document.getElementById("product_list_container").innerHTML = LIST_HTML;
  Sortable.create('product_list_container',{tag:'div',overlap:'horizontal',constraint:false});
  
}


/**
* change alternate color preview
*/
function ShowOtherColor(IMG_ID,IMG_URL) {
  // hard code width and height for now
  DIM_URL = '&wid=130&hei=130';
  FULL_URL = SCENE7_part1 + IMG_URL + SCENE7_part2 + DIM_URL + SCENE7_part3;
  $(IMG_ID).src = FULL_URL;
}

function CommitSort() {
  reg_replace = /product_list_container\[\]=/;
  var order_sequence = '';
  var separator_sequence = '';
  var items = Sortable.serialize('product_list_container');
  var items2 = items.split("&");
  for (k=0;k<list_items.length;k++) {
    var item_num = items2[k].replace(reg_replace, '');
    order_sequence += '&' + k + '=' + order_list[item_num] + '';
  } // end for k

  for (j=0;j<separator.length;j++) {
    separator_sequence += '&' + j + '=' + separator[j] + '';
  } // end for j

  $('final_sort').value = order_sequence;
  $('final_separator').value = separator_sequence;

  return true;
}