function cmp(a, b) {
    if (a<b) return -1;
    if (a>b) return 1;
    return 0;
  }

  function jq(t) {
    $(t)
      .bind("drag", function(event) {
        $(event.dragProxy).css({
          left: event.offsetX,
          top: event.offsetY
        });
      })
      
      .bind("dragstart", function(event) {
        $(this).css("cursor", "move");
        return $(this)
        	.clone()
        	.css({'z-index':100, 'position': 'absolute', 'opacity':.5})
        	.appendTo(document.body);
        	// .attr("id", "proxy");
      })
      
      .bind("dragend", function(event) {
        $(this).css("cursor", "default");
        $(event.dragProxy).fadeOut("fast", function() {
          $(this).remove();
        });

        var id = $(this).attr("id").match(/[0-9]+(_[0-9]+)*/)[0];        
        if ($(this).attr("rel")) var remove_id = $(this).attr("rel").match(/[0-9]+(_[0-9]+)*/)[0];
        else var remove_id=id;

        var count = parseInt($("#" + id + " > p > .l > i").html().match(/[0-9]+/)[0]) - 1;
        var send = {
          'ukey':'cart',
          'remove': remove_id,
          'count': count,
          'id': id
        }
        if(!event.dropTarget) {
          var req = new JsHttpRequest();
          req.onreadystatechange = function() {
            if (req.readyState == 4) {
              var content = req.responseJS.content;
              var count = req.responseJS.cnt;
              var total = " " + req.responseJS.total;
              var cart = $(".cart_top");
              if(count <= 0) {
                cart.children(".cart_tov").remove();
              } else {
                var count = $("#" + id + " > p > .l");
                var cost = $("#" + id + " > p > .r");
                if(content == "") {
                  $("#" + id).remove();
                } else {
                  count.html("<b style='color:#9ba0a4'>" + content.product_code + "</b>" +  "<br>" + "<i>" + content.quantity + " шт." + "</i>"); 
                  cost.html(" " + content.cost);
                }
              }
              $(".cart_sum > .chena").html(total);
            }
          }
          req.open(null, 'index.php', true);
          req.send(send);
        }
      })
  }
  
  $(function() {
    jq($(".cart_tov img"));

    $($(".img_thumbnail"))
      .bind("drag", function(event) {
        $(event.dragProxy).css({
          left: event.offsetX,
          top: event.offsetY
        });
      })
      .bind("dragstart", function(event) {
        $(this).css("cursor", "move");
        return $(this)
        	.clone() 
        	.css({'z-index':100, 'position': 'absolute', 'opacity':.5})
        	.appendTo(document.body);
      })
      .bind("dragend", function(event) {
        $(this).css("cursor", "default");
        $(event.dragProxy).fadeOut("fast", function() {
          $(this).remove();
        });
      })
    $($(".img_thumbnail_small"))
      .bind("drag", function(event) {
        $(event.dragProxy).css({
          left: event.offsetX,
          top: event.offsetY
        });
      })
      .bind("dragstart", function(event) {
        $(this).css("cursor", "move");
        return $(this)
        	.clone() 
        	.css({'z-index':100, 'position': 'absolute', 'opacity':.5})
        	.appendTo(document.body);
      })
      .bind("dragend", function(event) {
        $(this).css("cursor", "default");
        $(event.dragProxy).fadeOut("fast", function() {
          $(this).remove();
        });
      })

    $(".cart")
      .bind("drop", function(event) {
        if(event.dragTarget.className == "img_thumbnail") {
          var req = new JsHttpRequest();
          req.onreadystatechange = function() {
            if (req.readyState == 4) {
              var content = req.responseJS.content;
              var count = req.responseJS.cnt;
              var total = " " + req.responseJS.total;
              var cart = $('.cart_top');
              cart.css("background","none");
              var tov = $("#" + content.id);

              if(!tov[0]) {
                var tov = $("<div id='" + content.id + "' class='cart_tov'></div>");
                if (content.remove_id)
                  var img = $("<img id='thumb" + content.id + "' rel='"+content.remove_id+"' src='" + content.thumbnail_url + "' />");
                else 
                  var img = $("<img id='thumb" + content.id + "' src='" + content.thumbnail_url + "' />");
                var info = $("<p></p>");
                var name = $("<span class='l'>" + "<b style='color:#9ba0a4'>" + content["product_code"] + "</b>" + "<br>" + "<i>" + content.quantity + " шт." + "</i>" + "</span>");
                var br = $("<br />");
                var cost = $("<span class='r'>" + content.cost + "</span>");
                    info.append(name);
                    info.append(br);
                    info.append(cost);
                  tov.append(img);
                  tov.append(info);
                cart.append(tov);
                jq(img);
              } else {
                $("#" + content.id + " p .l").html("<b style='color:#9ba0a4'>" + content.product_code + "</b>" +  "<br>" + "<i>" + content.quantity + " шт." + "</i>");
                var coststring = " " + content.cost;
                $("#" + content.id + " p .r").html(coststring);
              }
              $(".chena").html(total);
              $(".knr").css("display","block");
            }
          }
          req.caching = false;
          req.open(null, 'index.php', true);
          var q = {
            'action':'add_product',
            'productID':event.dragTarget.getAttribute("id").match(/[0-9]+/)[0],
            'ukey':'cart'
          }
          var id = q.productID;
          var j = 1;
          var sel = "#" + id + "option_" + j;
          var newid = id;

          var tarr_str="";

          while($(sel).length != 0) {
            if((v = $(sel).attr("value")) != "") {
              q["option_" + j] = v;
              tarr_str = tarr_str+v+",";
            }
            ++j;
            var sel = "#" + id + "option_" + j;
          }

          eval('var tarr=['+tarr_str+'];');
          tarr.sort(cmp);
          for (var key in tarr)
            newid=newid + "_" + tarr[key];

          q["id"] = newid;
          req.send( q );
        }

        //small_images
        if(event.dragTarget.className == "img_thumbnail_small") {
          var req = new JsHttpRequest();
          req.onreadystatechange = function() {
            if (req.readyState == 4) {
              var content = req.responseJS.content;
              var count = req.responseJS.cnt;
              var total = " " + req.responseJS.total;
              var cart = $('.cart_top');
              cart.css("background","none");
              var tov = $("#" + content.id);

              if(!tov[0]) {
                var tov = $("<div id='" + content.id + "' class='cart_tov'></div>");
                if (content.remove_id)
                  var img = $("<img id='thumb" + content.id + "' rel='"+content.remove_id+"' src='" + content.thumbnail_url + "' />");
                else 
                  var img = $("<img id='thumb" + content.id + "' src='" + content.thumbnail_url + "' />");
                var info = $("<p></p>");
                var name = $("<span class='l'>" + "<b style='color:#9ba0a4'>" + content["product_code"] + "</b>" + "<br>" + "<i>" + content.quantity + " шт." + "</i>" + "</span>");
                var br = $("<br />");
                var cost = $("<span class='r'>" + content.cost + "</span>");
                    info.append(name);
                    info.append(br);
                    info.append(cost);
                  tov.append(img);
                  tov.append(info);
                cart.append(tov);
                jq(img);
              } else {
                $("#" + content.id + " p .l").html("<b style='color:#9ba0a4'>" + content.product_code + "</b>" +  "<br>" + "<i>" + content.quantity + " шт." + "</i>");
                var coststring = " " + content.cost;
                $("#" + content.id + " p .r").html(coststring);
              }
              $(".chena").html(total);
              $(".knr").css("display","block");
            }
          }
          req.caching = false;
          req.open(null, 'index.php', true);
          var q = {
            'action':'add_product',
            'productID':event.dragTarget.getAttribute("rel"),
            'ukey':'cart'
          }
          var id = q.productID;
          var j = 1;
          var sel = "#" + id + "option_" + j;
          var newid = id;

          var tarr_str="";

          while($(sel).length != 0) {
            if((v = $(sel).attr("value")) != "") {
              q["option_" + j] = v;
              tarr_str = tarr_str+v+",";
            }
            ++j;
            var sel = "#" + id + "option_" + j;
          }

          eval('var tarr=['+tarr_str+'];');
          tarr.sort(cmp);
          for (var key in tarr)
            newid=newid + "_" + tarr[key];

          q["id"] = newid;
          req.send( q );
        }
      })
      
      .bind("dropstart", function(event) {
        if(event.dragTarget.className == "img_thumbnail") {
          $("#cart_tip").css('color','#F00');
        }
        if(event.dragTarget.className == "img_thumbnail_small") {
          $("#cart_tip").css('color','#F00');
        }
      })
      
      .bind("dropend", function(event) {
        if(event.dragTarget.className == "img_thumbnail") {
          $("#cart_tip").css('color','#000');
        }
        if(event.dragTarget.className == "img_thumbnail_small") {
          $("#cart_tip").css('color','#000');
        }
      })
  });