var T2H = {};
T2H.selectedColor = 0;

var T2Hfilter = function(root) {
	var self = this, $self = $(this);
	var rootClass = 't2h-shop-pi1-listview';
	var products = $('.' + rootClass + ' li');
	var colorSelector =  $(root).find('.tx_t2hshop_pi1_colorfilter');
	var sizeSelector =  $(root).find('.tx_t2hshop_pi1_sizefilter');
	var categories = $('.' + rootClass + ' .category');
	var availableColors = [];
	var availableSizes  = [];

	self.init = function() {
		products.each(function() {
			var sizeString = $(this).attr('t2h:sizes');
			var colorsString = $(this).attr('t2h:colors');
			if(sizeString && colorsString) {
				var sizes = sizeString .split(",");
				var colors = colorsString.split(",");
				for(j=0; j< sizes.length; j++) {
					if($.inArray(sizes[j],availableSizes) == -1) {
						availableSizes.push(sizes[j]);
					}
				}
				for(j=0; j< colors.length; j++) {
					if($.inArray(colors[j],availableColors) == -1) {
						availableColors.push(colors[j]);
					}
				}

				//console.log(sizes);
				//console.log(colors);
			}
		});
		for(j=0;j<availableColors.length;j++) {
			colorSelector.append($("<option></option>").attr("value",availableColors[j]).text(availableColors[j]));
		}
		for(j=0;j<availableSizes.length;j++) {
			sizeSelector.append($("<option></option>").attr("value",availableSizes[j]).text(availableSizes[j]));
		}
		colorSelector.change(self.filter);
		sizeSelector.change(self.filter);

	};

	self.filter = function() {
		//alert("Filtering on " + colorSelector.val());
		var color = colorSelector.val();
		var size = sizeSelector.val();

		products.each(function() {
			var sizeString = $(this).attr('t2h:sizes');
			var colorsString = $(this).attr('t2h:colors');
			if(sizeString && colorsString) {
				var sizes = sizeString .split(",");
				var colors = colorsString.split(",");
				if( (size==0 || $.inArray(size,sizes) > -1) && (color==0 || $.inArray(color,colors) > -1)) {
					$(this).show();
					$(this).removeClass("hidden");
				} else {
					$(this).hide();
					$(this).addClass("hidden");
				}
			}
		});
		self.hideEmptyCategories();
	};

	self.hideEmptyCategories = function() {

		categories.each(function() {
			var count = 0;
			var shown = false;
			var items =$(this).find('>ul>li');
			items.each(function() {
				if( !( $(this).hasClass("hidden"))) {
					shown = true;
					$(this).removeClass("left").removeClass("right");
					if(count%4==0) {
						$(this).addClass("left");
					}
					if(count%4==3) {
						$(this).addClass("right");
					}
					count++;
				}

			});
			if(shown) {
				$(this).show();
			} else {
				$(this).hide();
			}

			/*$(this).show();
			console.log($(this).find(' li:visible').length);
			if($(this).find(' li:visible').length == 0) {
				$(this).hide();
			}
			*/

		});
	};




	self.init();


};

//Register as jQuery plugin
$.fn.T2HFilter= function() {
	var el;
	this.each(function() {
		el = new T2Hfilter($(this));
	});
}

function loadImage(normal,large){

  if($('div.image img').attr('src') == normal){
    $('div.image img').click(function(){Shadowbox.open({content: large,player: 'img'});});
    return false;
  }
  $('<img src="' + normal + '" width="300" height="300" />')
  .hide()
  .click(function(){Shadowbox.open({content: large,player: 'img'});})
  .replaceAll('div.image img')
  .fadeIn('slow');
}

function loadGallery(data){

  loadImage(data[0]['normal'],data[0]['large']);

  $('.gallery').text('');
  $.each(data,function(i,val){
      $('<img src="' + val['thumb'] + '" />')
      .click(function(){
          loadImage(val['normal'],val['large']);
          $(this).parent().children().css({border:'none'});
          $(this).css({border:'1px solid red'});

      })
      .appendTo('.gallery');
  });
  $('.gallery img').eq(0).css({border:'1px solid red'});

}



function loadColor(colorId,onlyimages){
	$('div.addtobasket').hide();
	$('div.sizecontainer').hide();
	T2H.selectedColor= colorId;
  $.ajax({
      type: "GET",
      url: ajaxurl + '&tx_t2hshop_pi1[request]=color&tx_t2hshop_pi1[colorId]='+colorId,
      dataType: 'json',
      async: false,
      success: function(data){

        loadGallery(data['images']);

        if(!onlyimages){
          //populate size selector
          var cur_val = $('#selectsize').val();
          var cur_label = $('#selectsize option[value='+cur_val+']').text();

          var options = '';
          options  += '<option value="">'+ LOCALLANG.size +'</option>';

          for (var i = 0; i < data['sizes'].length; i++) {
            var value=unescape(data['sizes'][i].value);
            var label=unescape(data['sizes'][i].label);
            //var selected = (label == cur_label ? ' selected="selected"':'');
            var selected = '';
            options += '<option value="' + value + '"' + selected + '>' + label + '</option>';
          }
          $('#selectsize').html(options);
          if(data['sizes'].length > 0) {
          	$('div.sizecontainer').show();
          	loadVariant(data['sizes'][0]['value']);
		  }
        }
	  }
  });
}


function loadVariant(ean){
  $.ajax({
      type: "GET",
      url: ajaxurl + '&tx_t2hshop_pi1[request]=variant&tx_t2hshop_pi1[ean]=' + ean,
      dataType: 'json',
      async: true,
      beforeSend: function(){
        $('body').css('cursor','wait');
      },
      complete: function(){
        $('body').css('cursor','default');
      },
      success: function(data){
        $('.add-to-basket').attr('butik:productid',ean);
        $('#price').text(data['price']);
        if(data['discount']) {
        	$(".beforeprice").text(data['beforeprice']);
        } else {
          $(".beforeprice").text("");
        }

        $('#selectsize').val(ean);
        $('div.addtobasket').show();
        $('div.sizecontainer').show();
      }
  });
}


$(document).ready(function() {
	$('.searchfilter').T2HFilter();

    if(typeof(Shadowbox)!='undefined'){
      Shadowbox.init();
    }
    if($.browser.msie && $.browser.version >= 7){
      $('div#producttabs ul li a').append('<div class="tl"></div>');
      $('div#producttabs ul li a').append('<div class="tr"></div>');
      $('div.addtobasket span').append('<div class="tl"></div>');
      $('div.addtobasket span').append('<div class="tr"></div>');
      $('div.addtobasket span').append('<div class="br"></div>');
      $('div.addtobasket span').append('<div class="bl"></div>');
    }
    $("#producttabs").tabs();
});


//var freeze_color = false;

$(function(){

    $('#tx_t2hshop_pi1_colorfilter').change(function(){
      $(this).get(0).form.submit();
    });

    $('#tx_t2hshop_pi1_sizefilter').change(function(){
      $(this).get(0).form.submit();
    });

    $('div.addtobasket').hide();
    $('div.sizecontainer').hide();

    //when a size is clicked in the overlay
    $('.product_variant').click(function(){
        var parts = $(this).attr('id').split('_',4);
        var colorId = parts[2];
        var ean = parts[3];
        loadColor(colorId);
        loadVariant(ean);
        var parent = $(this).parents("li.productcolor");
        parent.removeClass('over').removeClass("sticky");

        return false;
    });

    //when a size is selected in the dropdown
    $('#selectsize').change(function(){
       var ean = $(this).val();
       loadVariant(ean);
    });
	var actColorId = 0;
    //freeze size overlay and show
    $('img.productcolor').click(function(){
      var parts = $(this).attr('id').split('_',3);
      var colorId = parts[2];
      var parent = $(this).parent("li");
      if(parent.hasClass("sticky")) {
      	parent.removeClass("sticky");
	  } else {
	  	  $('#colortable1 li.productcolor').removeClass("sticky");
      	  parent.addClass("sticky");
	  }
      //loadColor(colorId,true);
      loadColor(colorId);
    });

    //mouseover on colored squares
    $('#colortable1 li.productcolor').hover(
      function(){
      	  if(!$('#colortable1 li.productcolor').hasClass("sticky")) {
          	$(this).addClass('over');
		  }
      },
      function(){
        $(this).removeClass('over');
        actColorId = 0;
      }
    );
});