jQuery.TileView = function(container, imagerule, info, price, options){
  var $container = $(container);
  var images = jQuery.fn.get_image_rule(imagerule);
  var info_name = info;
  var price_name = price;
  var opts = options;
  var state;
  var lines = 4;
  var mode = 'tiles';
  var page = 0;
  var pages;
  var products;
  var selected_products = {};
  var $filter_input = jQuery(opts.filter_input);
  var $filter_button = jQuery(opts.filter_button);
  var $tab_details = jQuery('#iselect-tab-details');
  var $tab_compare = jQuery('#iselect-tab-compare');

  function setup_events(){
    jQuery(document).bind('iselect', function(event, data){
      state = data.state;
      load_products(false, true);
      render();
    });
    jQuery('#iselect-tileview-size').change(function(){
      lines = parseInt(jQuery('#iselect-tileview-size').val());
      page = 0;
      render();
    });
    jQuery('#iselect-tileview-mode-tiles').click(function(){
      set_mode('tiles');
    });
    jQuery('#iselect-tileview-mode-lines').click(function(){
      set_mode('lines');
    });
    jQuery('.pagination-text a').live('click', function(){
      page = parseInt($(this).text())-1;
      render();
    });
    jQuery('.tab-toolbox-pagination-area .MoveLeft').click(function(){
      if(page>0){
        page--;
        render();
      }
    });
    jQuery('.tab-toolbox-pagination-area .MoveRight').click(function(){
      if(page<pages-1){
        page++;
        render();
      }
    });
    jQuery('#iselect-tileview :checkbox').live('change', function(){
      select_product(this);
    });
    $filter_input.focus(function(){
      if($filter_input.val()==opts.filter_message) $filter_input.val('');
    });
    $filter_input.blur(function(){
      if($filter_input.val()=='') $filter_input.val(opts.filter_message);
    });
    $filter_input.keypress(function(e){
      if(e.which == 13) {
        load_products(true, true);
        render();
      }
    });
    jQuery($container).bind('details', function(){
      jQuery('#iselect-pane-details .productThumbnail-area').html('');
      var ids = selected_products_ids();
      if(ids.length==1){
        render_details(ids[0]);
      } else {
        render_details_choose(ids);
      }
    });
    jQuery('#popupLayer_choose :checkbox').live('change', function(){
      var id = this.id.replace('iselect-product-details_','');
      jQuery.closePopupLayer('choose');
      render_details(id);
    });
    jQuery($container).bind('compare', function(){
      render_compare();
    });
    jQuery('.cart').live('click', function(){
      var id = parseInt(this.id.replace('iselect-cart_', ''));
      jQuery(document).trigger('cart-add', {id:id});
    });
    jQuery('.thumbnail-product-image img').live('click', function(){
      var id = this.id.replace('iselect-details_', '');
      jQuery(document).trigger('iselect-details');
      render_details(id);
    });
    $filter_input.val(opts.filter_message);
  }

  function set_mode(m){
    mode = m;
    page = 0;
    if(mode=='tiles'){
      jQuery('#iselect-tileview-mode-tiles').attr('class','view-thumb-on');
      jQuery('#iselect-tileview-mode-lines').attr('class','view-thumbInfo');
    } else {
      jQuery('#iselect-tileview-mode-tiles').attr('class','view-thumb');
      jQuery('#iselect-tileview-mode-lines').attr('class','view-thumbInfo-on');
    }
    render();
  }

  function render(){
    (mode=='tiles') ? render_tiles() : render_lines();
    render_pagination();
    update_tabs();
  }

  function render_tiles(){
    var i;
    var product;
    var data = new Array(lines);
    for(var l=0;l<(lines);l++){
      data[l] = { product:[] };
      for(var p=0;p<4;p++){
        i = products[page*lines*4+l*4+p];
        if(i!=undefined){
          product = mindsteps.iSelect.getObject(state.name, i);
          if(selected_products[i]){
            data[l].product.push({ img:images[i], info:product[info_name], price:product[price_name], id:i, selected:'checked="true"', style:'thumbnail-product-on' });
          } else {
            data[l].product.push({ img:images[i], info:product[info_name], price:product[price_name], id:i, selected:'', style:'thumbnail-product-off' });
          }
        }
      }
    }
    var node = jQuery('.templates .iselect-tileview-tiles').bindTo(data);
    jQuery('#iselect-tileview').html(node);
    pages = Math.ceil(products.length/(lines*4));
  }

  function render_lines(){
    var i;
    var product;
    var data = new Array(lines);
    for(var l=0;l<lines;l++){
      i = products[page*lines+l];
      if(i!=undefined){
        product = mindsteps.iSelect.getObject(state.name, i);
        if(selected_products[i]){
          data[l] = { img:images[i], info:product[info_name], price:product[price_name], id:i, selected:'checked="true"', style:'list-product-on' };
        } else {
          data[l] = { img:images[i], info:product[info_name], price:product[price_name], id:i, selected:'', style:'list-product-off' };
        }
      }
    }
    var node = jQuery('.templates .iselect-tileview-lines').bindTo(data);
    jQuery('#iselect-tileview').html(node);
    pages = Math.ceil(products.length/lines);
  }

  function render_pagination(){
    var pp;
    var html = '';
    for(var p=0;p<pages;p++){
      pp = p+1;
      html += (p == page) ? '<span class="on">'+pp+'</span>' : '<a href="#" class="link">'+pp+'</a>';
      if (pp!=pages) html += ' | ';
    }
    jQuery('.pagination-text').html(html);
    jQuery('.resultsContainer .info').text(products.length);
  }

  function render_details(id){
    var data = new Array();
    var product = mindsteps.iSelect.getObject(state.name, id);
    data.push({ label:' ', value:'<img src="'+images[id]+'" />' });
    for(var l in product){
      data.push({ label:l, value:product[l] });
    }
    var node = jQuery('.templates .iselect-details').bindTo(data);
    jQuery('#iselect-pane-details .productThumbnail-area').html(node);
  }

  function render_details_choose(ids){
    var data = new Array();
    for(var i=0;i<ids.length;i++){
      var id = ids[i];
      var product = mindsteps.iSelect.getObject(state.name, id);
      data.push({ img:images[id], info:product[info_name], price:product[price_name], id:id });
    }
    var node = jQuery('.templates .iselect-details-choose').bindTo(data);
    jQuery('#iselect-details-choose').html(node);
    jQuery.openPopupLayer({ name:'choose', /* width:520, height:305, */ target:'iselect-details-choose' });
    $('#iselect-details-choose :checkbox').focus();
    jQuery('#iselect-details-choose').html('');
  }

  function render_compare(){
    var data = new Array();
    var row = { label:' ', product:[] };
    for(var p in selected_products){
      if(selected_products[p]){
        row.product.push({ value:'<img src="'+images[p]+'" />' });
      }
    }
    data.push({ row:row });
    for(var l in mindsteps.iSelect.getObject(state.name, 0)){
      row = { label:l, product:[] };
      for(var p in selected_products){
        if(selected_products[p]){
          var product = mindsteps.iSelect.getObject(state.name, p);
          row.product.push({ value:product[l] });
        }
      }
      data.push({ row:row });
    }
    var node = jQuery('.templates .iselect-compare').bindTo(data);
    jQuery('#iselect-pane-compare .productThumbnail-area').html(node);
  }

  function sort(){
    // needs new template options
  }

  function filter(){
    var text = $filter_input.val();
    var filtered = [];
    var str;
    if (text==opts.filter_message){
      return;
    }
    text = text.toLowerCase().replace(/^\s+|\s+$/g, '').split(/[\W]+/);
    if ((text.length==1) && (text[0]=="")) {
      return;
    }
    var tile_text;
    for(var p=0;p<products.length;p++){
      var pp = products[p];
      tile_text = "";
      var product = mindsteps.iSelect.getObject(state.name, pp);
      for(t in product) { tile_text += ' ' + product[t] }
      tile_text = tile_text.toLowerCase();
      if(tile_text.indexOf(text) != -1){ filtered.push(pp) }
    }
    products = filtered;
  }

  function load_products(do_filter, do_sort){
    products = state.selected;
    if(do_filter) filter();
    //if(do_sort) sort();
    page = 0;
  }

  function select_product(tile){
    var id = tile.id.replace('iselect-product_','');
    selected_products[id] = $(tile).attr('checked');
    render();
  }

  function count_selected_products(){
    var c = 0;
    for(var i in selected_products){
      if(selected_products[i]) c++;
    }
    return c;
  }

  function selected_products_ids(){
    var ids = [];
    for(var i in selected_products){
      if(selected_products[i]) ids.push(i);
    }
    return ids;
  }

  function update_tabs(){
    var count = count_selected_products();
    html = 'Details'; if(count>0) html = '<a href="#">'+html+'</a>'; jQuery('div > div', $tab_details).html(html);
    html = 'Compare'; if(count>1) html = '<a href="#">'+html+'</a>'; jQuery('div > div', $tab_compare).html(html);
  }

  setup_events();
}

jQuery.fn.tileview = function(imagerule_name, info_name, price_name, options){
  this.each(function(){
    var container = this;
    options = jQuery.extend({}, jQuery.fn.tileview.defaults, options);
    new jQuery.TileView(container, imagerule_name, info_name, price_name, options);
  });
  return this;
}

jQuery.fn.tileview.defaults = {
  filter_input: '.searchArea .search',
  filter_message: 'Enter text here...'
}