var selected_product = 0;
var sel_page = 0;
var per_page = 18;
var offset = 0;

function changeCollection(select, url) {
  location.href =  "/" + url + "?id=" + select.options[select.selectedIndex].value;
}

function thumbnail_html(no, sel, icon, full, price, style) {
  var sel_html = '';
  if (sel) {
    sel_html += ' sel';
  }  
  return '<div class="thumb"><div class="inner' + sel_html + '" style="background-image: url(' + icon + ');"><a href="#" onclick="select_product(' + no + '); return false;">Thumbnail</a></div></div>';
}

function show_thumbnails(data) {
  var data = collection_data;
  var html = '';
    
  for (var i = offset; i < (offset + per_page); i++) {
    if ((data.length - 1) >= i) {
      if (selected_product == i) {
        html += thumbnail_html(i, true, data[i][0], data[i][1], data[i][2], data[i][3]);      
      }
      else {
        html += thumbnail_html(i, false, data[i][0], data[i][1], data[i][2], data[i][3]);
      }
    }
  }
  document.getElementById("collection_thumbnails").innerHTML = html;
  show_paging();
}

function show_product() {
  var data = collection_data;
  if ((data.length - 1) >= selected_product) {
    document.getElementById("product").style.backgroundImage = 'url(' + data[selected_product][1] + ')';
        
    var list_items = '';
    if (data[selected_product][2] != '') {
      list_items += '<li>Price: ' + data[selected_product][2] + '</li>';
    }
    if (data[selected_product][3] != '') {
      list_items += '<li>Style: ' + data[selected_product][3] + '</li>';
    }
    document.getElementById("product_info_list").innerHTML = list_items;
  }
}

function select_product(no) {
  selected_product = no;
  show_thumbnails();
  show_product();
}

function show_paging() {
  var data = collection_data;
  var no_pages = Math.ceil(data.length / per_page);
  var html = '<ul>';
  for (var i = 0; i < no_pages; i++) {
    if (sel_page == i) {
      html += '<li class="sel"><a href="#" onclick="select_page(' + i + '); return false;">' + (i + 1) + '</a></li>';
    }
    else {
      html += '<li><a href="#" onclick="select_page(' + i + '); return false;">' + (i + 1) + '</a></li>';      
    }
  }
  html += '</ul>';
  document.getElementById("paging").innerHTML = html;
}

function select_page(no) {
  sel_page = no;
  offset = (sel_page * per_page);
  select_product(offset);
}

/* Press */

var press_selected_product = -1;
var press_sel_page = 0;
var press_per_page = 18;
var press_offset = 0;

function press_thumbnail_html(no, sel, icon, full, price, style) {
  var sel_html = '';
  if (sel) {
    sel_html += ' sel';
  }  
  return '<div class="thumb"><div class="inner' + sel_html + '" style="background-image: url(' + icon + ');"><a href="#" onclick="press_select_product(' + no + '); return false;">Thumbnail</a></div></div>';
}

function press_show_thumbnails(data) {
  var data = collection_data;
  var html = '';
    
  for (var i = press_offset; i < (press_offset + press_per_page); i++) {
    if ((data.length - 1) >= i) {
      if (press_selected_product == i) {
        html += press_thumbnail_html(i, true, data[i][0], data[i][1], data[i][2], data[i][3]);      
      }
      else {
        html += press_thumbnail_html(i, false, data[i][0], data[i][1], data[i][2], data[i][3]);
      }
    }
  }
  document.getElementById("collection_thumbnails").innerHTML = html;
  press_show_paging();
}

function press_show_product() {
  var data = collection_data;
  if ((data.length - 1) >= press_selected_product) {
    popup("/about-a-pair/press/popup?img=" + data[press_selected_product][5], 'press_popup', data[press_selected_product][2], data[press_selected_product][3]);
    //document.getElementById("product").style.backgroundImage = 'url(' + data[press_selected_product][1] + ')';
  }
}

function press_load() {
  press_show_thumbnails();
}

function press_select_product(no) {
  press_selected_product = no;
  press_show_thumbnails();
  press_show_product();
}

function press_show_paging() {
  var data = collection_data;
  var no_pages = Math.ceil(data.length / press_per_page);
  var html = '<ul>';
  for (var i = 0; i < no_pages; i++) {
    if (press_sel_page == i) {
      html += '<li class="sel"><a href="#" onclick="press_select_page(' + i + '); return false;">' + (i + 1) + '</a></li>';
    }
    else {
      html += '<li><a href="#" onclick="press_select_page(' + i + '); return false;">' + (i + 1) + '</a></li>';      
    }
  }
  html += '</ul>';
  document.getElementById("paging").innerHTML = html;
}

function press_select_page(no) {
  press_sel_page = no;
  press_offset = (press_sel_page * press_per_page);
  press_show_thumbnails();
}

function popup(url, name, width, height) {
	str = 'height=' + height + ', width=' + width + ', scrollbars=0, status=0, resizable=1';
	str += ', left=' + (screen.width - width)/2 + ', top=' + (screen.height - height)/3;
	win = window.open(url, name, str);
}