(function($) {

  $.fn.subcatgrid = function(options)
  {
    var opts = $.extend({}, $.fn.subcatgrid.defaults, options);

    return this.each(function()
    {
      var $grid = $(this);
      var _grid = this;

      _grid.data = new Array();
      _grid.hideBuffer = 1;

      if($grid.parent('div.subcategory-grid').length > 0)
      {
        var $container = $grid.parent('div.subcategory-grid:first');
        _grid.currentProduct = null;

        $container.append('<span class="at-a-glance">'+$container.find('ul.product-details:first').attr('title')+'</span>');
        $('span.at-a-glance').button();

        $('body').append('<div class="product-details-container"><span class="top"></span><div class="details"><div class="product-details"><div class="reviews"></div><div class="features"></div></div></div><span class="close"></span><span class="bottom"></span></div>');

        $('span.at-a-glance').css({left:-2000,top:0}).click(function()
        {
          var _button = $(this);
          var _container = $('.product-details-container');

          $('div#learning-center-content').hide();

          _container.find('p').remove();
          _container.find('> div').prepend('<p class="description">'+_grid.currentProduct.find('li.description').text()+'</p>');
          _container.find('> div').prepend('<p class="model">'+_grid.currentProduct.find('li.model').text()+'</p>');
          _container.find('div.reviews,div.features').empty();

          if(_grid.currentProduct.find('li.mobile').length > 0)
          {
            _container.addClass('mobile-details');
            _container.find('div.reviews').append(_grid.currentProduct.find('li.reviews').children().clone());
            _container.find('div.features').append(_grid.currentProduct.find('li.mobile').children().clone());
            _container.find('div.features').find('img:first').css({position:'relative',top:-15});
          }
          else
          {
            _container.removeClass('mobile-details');
            _container.find('div.reviews').append(_grid.currentProduct.find('li.reviews').children().clone());
            _container.find('div.features').append(_grid.currentProduct.find('li.features').children().clone());
          }

          _container.find('> div > a').remove();

          var _link = _grid.currentProduct.find('li.learn-more a').clone().click(function(e)
          {
            PageManager.onLinkClick(this,e);
          });

          _container.find('> div').append(_link);

          var _left = _button.position().left+$('div.subcategory-grid').offset().left+120;

          if(_button.position().left > 300)
          {
            _left = _left-150-352;
          }

          _container.css({left:_left,top:_button.position().top+$('div.subcategory-grid').offset().top-(_container.height()/2)});

          _button.css({left:-2000});
        });

        $('div.product-details-container span.close').click(function()
        {
          $('div.product-details-container').css({left:-2000});
          _grid.currentProduct = null;
        });

        $container.find('> ul > li > a > img').attr('alt','').mouseover(function()
        {
          if($('.product-details-container').css('left') == "-2000px")
          {
            var _pImg = $(this).offset();
            var _pDiv = $(this).parents('div:eq(0)').offset();

            $('span.at-a-glance').css({top:_pImg.top-_pDiv.top+73,left:_pImg.left-_pDiv.left+40,position:'absolute'});
            _grid.currentProduct = $(this).parent('a').parent('li');
          }
        });

        $container.hover(function() {},function()
        {
          $('span.at-a-glance').css({left:-2000,top:0});
        });
      }

      var _maxGridHeight = 0;

      $grid.find('> li').each(function(i)
      {
        var _id = 'grid-item-'+i;
        var _data = {id:_id};

        $(this).attr('id',_id);

        ($(this).height() > _maxGridHeight) ? _maxGridHeight = $(this).height() : null;

        $(this).find('> ul.hidden,> ul:lt(2)').find('> li').each(function()
        {
          if(this.title != "")
          {
            _data[this.className] = this.title;
          }
          else
          {
            _data[this.className] = $.trim($(this).text());
          }
        });

        _grid.data.push(_data);
      });

      $grid.find('> li').css({height:_maxGridHeight});

      // facet: type
      $('div.filter-type input:checkbox').filterType();

      // facet: features, text checkboxes
      $('div.filter-features input:checkbox,div.filter-facet ul.text input:checkbox').filterFeatures();

      // facet: color checkboxes
      $('div.filter-facet ul.colors input:checkbox').filterColor();

      // facet: number checkboxes
      $('div.filter-facet ul.numbers input:checkbox').filterNumbers();

      // facet: sliders
      $('div.filter-facet select').slider();



      // facet: screen size
      $('div.screen-size').each(function()
      {
        var _span = $('<span class="screen-size-facet"></span>');
        var _min = $(this).children('select:first').find('option:first').attr('value');
        var _max = $(this).children('select:first').find('option:last').attr('value');

        var _upscale = 150/_max;

        _span.css({width:(_max*_upscale)*.87,height:(_max*_upscale)*.49});

        $(this).children('select:first').find('option').each(function()
        {
          _span.prepend('<span class="tick" style="width:'+(($(this).attr('value')*_upscale)*.87)+'px;height:'+(($(this).attr('value')*_upscale)*.49)+'px;"></span>');
        });

        _span.append('<span class="min" style="width:'+(_min*_upscale)*.87+'px;height:'+(_min*_upscale)*.49+'px;"></span>');

        _span.append('<span class="mark" upscale="'+_upscale+'" style="width:'+(_min*_upscale)*.87+'px;height:'+(_min*_upscale)*.49+'px;"></span>');
        _span.append('<span class="mark" upscale="'+_upscale+'" style="width:'+(_max*_upscale)*.87+'px;height:'+(_max*_upscale)*.49+'px;"></span>');

        $(this).find('h6').after(_span);
      });

      // facet: toggle
      $('div.filter-facet h6').not('[isinited=true]').attr('isinited','true').each(function()
      {
        var _facet = $(this);

        _facet.append('<span class="check"></span>');

        _facet.hover(
          function()
          {
            if(_facet.parent('div').height() == 25)
            {
              _facet.css({color:'#000000',backgroundPosition:'0px -30px'}).parent('div').css({background:'url(/images/bg-nav-facet-over.png) center top repeat-x'});
            }
          },
          function()
          {
            if(_facet.parent('div').height() == 25)
            {
              _facet.css({color:'#5d5c5c',backgroundPosition:'0px 0px'}).parent('div').css({background:'url(/images/bg-nav-facet.png) center bottom repeat-x'});
            }
          }
        );

        _facet.click(function()
        {
          if(_facet.parent('div').height() == 25)
          {
            _facet.css({color:'#5d5c5c',backgroundPosition:'0px -15px'}).parent('div').css({background:'url(/images/bg-nav-facet.png) center bottom repeat-x'});

            if(_facet.siblings('ul.text').length == 0)
            {
              var _height = (_facet.parent('div').children('ul.colors').find('li').length > 0 && _facet.parent('div').children('ul.colors').find('li').length < 5) ? 55 : 75;

              if(_facet.siblings('span.screen-size-facet').length > 0)
              {
                _height = parseInt(_facet.siblings('span.screen-size-facet:first').css('height').replace('px',''))+85;
              }

              _facet.parent('div').stop().animate({height:_height},500,"linear",function()
              {
                _facet.siblings('.slider,ul.colors,ul.numbers').show();
                _facet.siblings('span.screen-size-facet').css({display:'block'});
              });
            }
            else
            {
              _facet.parent('div').stop().animate({height:_facet.siblings('ul.text').find('li').length*30},500,"linear",function()
              {
                _facet.siblings('ul.text').show();
              });
            }
          }
          else
          {
            _facet.siblings('.slider,ul.colors,ul.numbers,ul.text').hide();
            _facet.siblings('span.screen-size-facet').css({display:'none'});
            _facet.css({color:'#5d5c5c',backgroundPosition:'0px 0px'}).parent('div').stop().animate({height:25},500,"linear");
          }
        });
      });

      // facet: toggle all
      $('div.menu-left div h5').not('[isinited=true]').attr('isinited','true').each(function()
      {
        var _toggle = $(this).clone();
        $(this).remove();

        $('div.filter-status').after(_toggle);

        _toggle.attr('showtext',$.trim(_toggle.text().replace(_toggle.find('span').text(),""))).attr('hidetext',$.trim(_toggle.find('span').text())).attr('state','showall');
        _toggle.next('div.filter-facet').css({borderTop:'none'});

        _toggle.hover(
          function()
          {
            _toggle.css({color:'#000000'});
          },
          function()
          {
            _toggle.css({color:'#5d5c5c'});
          }
        );

        _toggle.click(function()
        {
          if(_toggle.attr('state') == 'showall')
          {
            $('div.filter-facet h6').each(function()
            {
              if($(this).parent('div').height() == 25)
              {
                $(this).click();
              }
            });
            _toggle.text(_toggle.attr('hidetext'));
            _toggle.attr('state','hideall');
          }
          else
          {
            $('div.filter-facet h6').each(function()
            {
              if($(this).parent('div').height() != 25)
              {
                $(this).click();
              }
            });
            _toggle.text(_toggle.attr('showtext'));
            _toggle.attr('state','showall');
          }
        });

        _toggle.click();
      });

      $('.filter-status span span').not('[isinited=true]').attr('isinited','true').css({textDecoration:'underline',cursor:'pointer'}).click(function()
      {
        $grid.trigger('subcatgrid:reset');
      });

      $grid.bind('subcatgrid:reset',function()
      {
        $('div.filter-type input:checkbox,div.filter-features input:checked,div.filter-facet input:checkbox').attr('checked','');
        $('div.filter-type label').css({backgroundPosition:'0px 0px',color:'#5d5c5c'});

        $('div.filter-type ul.link li:first input:checkbox').attr('checked','checked');
        $('div.filter-type ul.link li:first label').css({color:'#ac0648'});

        $('div.filter-facet ul.colors label').css({border:"1px solid #c5c5c5",width:13,height:13});
        $('div.filter-facet ul.numbers label').css({backgroundPosition:'0px 0px',color:'#5d5c5c'});

        $('div.filter-facet .slider').trigger('slider:reset');

        $('div.filter-type input:checkbox[preselected=true]').each(function()
        {
          $(this).attr('checked','checked');
          $(this).triggerHandler('click',['nofilter'])
          $(this).attr('preselected','');
        });

        $grid.trigger('subcatgrid:filter');
      });

      $grid.bind('subcatgrid:filter',function()
      {
        if(_grid.hideBuffer <= 0)
        {
          var _div = $('div.subcategory-header');

          if(_div.find('div').length > 0)
          {
            if(_div.css('display') != "none")
            {
              _div.css({display:'none'}).next('span.toggle').css({backgroundPosition:'0px -30px'});
            }
          }
        }
        _grid.hideBuffer--;

        for(var i=0; i < _grid.data.length; i++)
        {
          _grid.data[i].show = true;
        }

        var _facets = {};
        var _ranges = {};


        $('div.filter-facet,div.filter-type').each(function()
        {
          if($(this).find('input:checkbox').length > 0)
          {
            var _filter = new Array();
            if($(this).find('input:checked').length == 0)
            {
              $(this).find('input:checkbox').each(function()
              {
                _filter.push($(this).val());
              });
            }
            else
            {
              $(this).find('input:checked').each(function()
              {
                _filter.push($(this).val());
              });
            }
            _facets[this.id] = _filter;

            if($(this).find('input:checked').length == 0)
            {
              $(this).find('span.check').hide();
            }
            else
            {
              $(this).find('span.check').show();
            }

            _filter2 = _filter;
          }

          if($(this).find('select').length > 0)
          {
            _ranges[this.id] = {};
            _ranges[this.id].min = $(this).find('.left').attr('slidervalue');
            _ranges[this.id].max = $(this).find('.right').attr('slidervalue');

            var _first = $(this).find('select').get(0).ticks[0].value;
            var _last = $(this).find('select').get(0).ticks[$(this).find('select').get(0).ticks.length-1].value;

            if($(this).find('.screen-size-facet').length > 0)
            {
              var _upscale = $(this).find('.screen-size-facet .mark:first').attr('upscale');

              $(this).find('.screen-size-facet .mark:first').css({width:(_ranges[this.id].min*_upscale)*.87,height:(_ranges[this.id].min*_upscale)*.49});
              $(this).find('.screen-size-facet .mark:last').css({width:(_ranges[this.id].max*_upscale)*.87,height:(_ranges[this.id].max*_upscale)*.49});
            }

            if(_ranges[this.id].min == _first && _ranges[this.id].max == _last)
            {
              $(this).find('span.check').hide();
            }
            else
            {
              $(this).find('span.check').show();
            }
          }
        });

        for(var i=0; i < _grid.data.length; i++)
        {
          _grid.data[i].restrictors = new Array();

          $('div.filter-features input:checked').each(function()
          {
            if(_grid.data[i][this.id] != $(this).val())
            {
              _grid.data[i].show = false;
              _grid.data[i].restrictors.push(this.id);

            }
          });

          for(var j in _facets)
          {
            if(_facets[j][0] != '*')
            {
              // Split the carrier data
              var dataArr = _grid.data[i][j].split(" ");
              var found = 0;

              if (dataArr != null)
              {
                for(var k=0; k < dataArr.length; k++)
                {
                  if($.inArray(dataArr[k],_facets[j]) != -1)
                  {
                    found++;
                  }
                }

                if(found == 0)
                {
                  _grid.data[i].show = false;
                  _grid.data[i].restrictors.push(j);
                }
                }
                else
                {
                if($.inArray(dataArr[k],_facets[j]) != -1)
                {
                  _grid.data[i].show = false;
                  _grid.data[i].restrictors.push(j);
                }
                }
            }
          }

          for(var j in _ranges)
          {
            if(parseFloat(_grid.data[i][j]) > parseFloat(_ranges[j].max) || parseFloat(_grid.data[i][j]) < parseFloat(_ranges[j].min))
            {
              _grid.data[i].show = false;
              _grid.data[i].restrictors.push(j);
            }
          }
        }

        // apply filter to page
        var _shown = 0;
        for(var i=0; i < _grid.data.length; i++)
        {
          if(_grid.data[i].show)
          {
            $("#"+_grid.data[i].id).show();
            _shown++;
          }
          else
          {
            $("#"+_grid.data[i].id).css({display:'none'});
          }
        }

        var _status = $('.filter-status');
        _status.find('span:eq(0)').text(_shown);
        _status.find('span:eq(1)').text(_grid.data.length);

        if(_shown != _grid.data.length)
        {
          _status.find('span:eq(2)').show();
        }
        else
        {
          _status.find('span:eq(2)').hide();
        }

        $('div  qq input:checkbox,div.filter-features input:checkbox,div.filter-facet ul.text input:checkbox,div.filter-facet ul.colors input:checkbox,div.filter-facet ul.numbers input:checkbox,div.filter-facet select').trigger('subcatgrid:restrict',[_grid.data]);
      });

      $grid.bind('subcatgrid:sort',function()
      {
        var _sort = $('.sort-by select:first').val().split(",");
        var _data = this.data;

        if(_sort.length == 3)
        {
          var attribute = _sort[0];
          var type = _sort[1];
          var order = _sort[2];

          // sort the data array
          $.fn.subcatgrid.sortAttribute = attribute;

          if(type == "int")
          {
            this.data.sort(compareInt);
          }
          else
          {
            this.data.sort(compareString);
          }
          if(order == "desc")
          {
            this.data.reverse();
          }

          // rebuild the list
          var  _newList = $('<ul></ul>');

          for(var i=0; i < this.data.length; i++)
          {
            $("#"+this.data[i].id).appendTo(_newList);
          }

          $grid.empty().append(_newList.find('> li'));
        }
      });
    });
  };

  function compareInt(a,b)
  {
    var _a = parseInt(a[$.fn.subcatgrid.sortAttribute]);
    var _b = parseInt(b[$.fn.subcatgrid.sortAttribute]);

    if(_a < _b)
    {
      return -1;
    }
    if(_a > _b)
    {
      return 1;
    }
    return 0;
  };

  function compareString(a,b)
  {
    var _a = a[$.fn.subcatgrid.sortAttribute].toLowerCase();
    var _b = b[$.fn.subcatgrid.sortAttribute].toLowerCase();

    if(_a < _b)
    {
      return -1;
    }
    if(_a > _b)
    {
      return 1;
    }
    return 0;
  };

  $.fn.subcatgrid.defaults =
  {

  };

  $.fn.filterType = function()
  {
    return this.each(function()
    {
      var $checkbox = $(this);
      var $label = $checkbox.next('label');

      this.enabled = true;

      var _isText = $checkbox.parents('ul.text').length;
      var _isLink = $checkbox.parents('ul.link').length;

      $label.hover(
        function()
        {
          if(this.enabled && _isLink)
          {
            (!$checkbox.get(0).checked) ? $label.css({color:'#000000'}) : null;
          }
        },
        function()
        {
          if(this.enabled && _isLink)
          {
            (!$checkbox.get(0).checked) ? $label.css({color:'#5d5c5c'}) : null;
          }
        }
      );

      $checkbox.click(function(event,data)
      {
        if(this.enabled)
        {
          if(_isLink)
          {
            if(!$checkbox.get(0).checked)
            {
              $checkbox.attr('checked','checked');
            }

            $checkbox.parent('li').siblings('li').children('input:checked').attr('checked','').siblings('label').css({color:'#5d5c5c'});
            $label.css({color:'#ac0648'});

            (data != 'nofilter') ? $grid.trigger('subcatgrid:filter') : null;
          }
          else
          {
            if($checkbox.get(0).checked)
            {
              (_isText) ? $label.css({backgroundPosition:'0px -21px',color:'#ac0648'}) : $label.css({backgroundPosition:'-'+$label.width()+'px 0px',color:'#ac0648'});
            }
            else
            {
              $label.css({backgroundPosition:'0px 0px',color:'#5d5c5c'});
            }

            (data != 'nofilter') ? $('div.subcategory-grid > ul').trigger('subcatgrid:filter') : null;
          }
        }
      });

      $checkbox.bind('subcatgrid:restrict',function(event,data)
      {
        this.enabled = false;

        var _id = $checkbox.parents('.filter-type').get(0).id;

        for(var i=0; i < data.length; i++)
        {
          if((data[i][_id] == this.value) && data[i].show == true)
          {
            this.enabled = true;
            break;
          }

          if(data[i].show == false && data[i].restrictors.length == 1 && data[i].restrictors[0] == _id && data[i][_id] == this.value)
          {
            this.enabled = true;
            break;
          }
        }

        if(this.enabled)
        {
          ($label.height() == 2) ? $label.css({opacity:1}) : $label.css({cursor:'pointer',color:'#5d5c5c'});
        }
        else
        {
          ($label.height() == 2) ? $label.css({opacity:0.4}) : $label.css({cursor:'pointer',color:'#cccccc'});
        }
      });
    });
  };

  $.fn.filterFeatures = function()
  {
    return this.each(function()
    {
      var $checkbox = $(this);
      var $label = $checkbox.next('label');

      this.enabled = true;

      if(navigator.platform.toLowerCase().indexOf("mac") != -1)
      {
        $checkbox.css({position:'relative',top:2});
      }

      $checkbox.click(function()
      {
        if(this.enabled)
        {
          $('div.subcategory-grid > ul').trigger('subcatgrid:filter');
        }
      });

      $checkbox.bind('subcatgrid:restrict',function(event,data)
      {
        this.enabled = false;

        var _id = this.id;

        if($checkbox.parents('.filter-facet').length > 0)
        {
          _id = $checkbox.parents('.filter-facet').get(0).id;
        }

        for(var i=0; i < data.length; i++)
        {
          if((data[i][_id] == this.value) && data[i].show == true)
          {
            this.enabled = true;
            break;
          }
        }

        if(this.enabled)
        {
          $label.css({color:'#5d5c5c'});
          this.disabled = false;
        }
        else
        {
          $label.css({color:'#cccccc'});
          this.disabled = true;
        }
      });
    });
  };

  $.fn.filterColor = function()
  {
    return this.each(function()
    {
      var $checkbox = $(this);
      var $label = $checkbox.siblings('label');

      this.enabled = true;

      $label.text("");

      $checkbox.click(function()
      {
        if(this.enabled)
        {
          if($checkbox.get(0).checked)
          {
            $label.css({border:"2px solid #b01351",width:12,height:12});
          }
          else
          {
            $label.css({border:"1px solid #c5c5c5",width:13,height:13});
          }

          $('div.subcategory-grid > ul').trigger('subcatgrid:filter');
        }
      });

      $checkbox.bind('subcatgrid:restrict',function(event,data)
      {
        this.enabled = false;

        var _id = this.id;

        if($checkbox.parents('.filter-facet').length > 0)
        {
          _id = $checkbox.parents('.filter-facet').get(0).id;
        }

        for(var i=0; i < data.length; i++)
        {
          if((data[i][_id] == this.value) && data[i].show == true)
          {
            this.enabled = true;
            break;
          }

          if(data[i].show == false && data[i].restrictors.length == 1 && data[i].restrictors[0] == _id && data[i][_id] == this.value)
          {
            this.enabled = true;
            break;
          }
        }

        if(this.enabled)
        {
          $label.css({cursor:'pointer',opacity:1});
        }
        else
        {
          $label.css({cursor:'default',opacity:0.4});
        }
      });
    });
  }

  $.fn.filterNumbers = function()
  {
    return this.each(function()
    {
      var $checkbox = $(this);
      var $label = $checkbox.siblings('label');

      this.enabled = true;

      $checkbox.click(function()
      {
        if(this.enabled)
        {
          if($checkbox.get(0).checked)
          {
            $checkbox.siblings('label').css({backgroundPosition:'0px -28px',color:'#ac0648'});
          }
          else
          {
            $checkbox.siblings('label').css({backgroundPosition:'0px 0px',color:'#5d5c5c'});
          }

          $('div.subcategory-grid > ul').trigger('subcatgrid:filter');
        }
      });

      $checkbox.bind('subcatgrid:restrict',function(event,data)
      {
        this.enabled = false;

        var _id = this.id;

        if($checkbox.parents('.filter-facet').length > 0)
        {
          _id = $checkbox.parents('.filter-facet').get(0).id;
        }

        for(var i=0; i < data.length; i++)
        {
          if((data[i][_id] == this.value) && data[i].show == true)
          {
            this.enabled = true;
            break;
          }

          if(data[i].show == false && data[i].restrictors.length == 1 && data[i].restrictors[0] == _id && data[i][_id] == this.value)
          {
            this.enabled = true;
            break;
          }
        }

        if(this.enabled)
        {
          $label.css({color:'#5d5c5c'});
        }
        else
        {
          $label.css({color:'#cccccc'});
        }
      });
    });
  }

})(jQuery);