var dropzone = document.getElementById('basket'),
    basketItems = dropzone.querySelector('ul'),
    store = document.getElementById('store'),
    basket = [],
    titles = [];


function cancelEvent() { 
  return false; 
}

store.ondragstart = function (event) {
  if (event.target.nodeName == 'IMG') {
    event.dataTransfer.setData('Text', event.target.dataset.id);
  }
}

dropzone.ondragenter = cancelEvent;
dropzone.ondragover = cancelEvent;

dropzone.ondrop = function (event) {
  var id = event.dataTransfer.getData('Text');
  if (addProduct(id)) {
    if (basket.indexOf(id) === -1) {
      basket.push(id);
      history.pushState(basket, '', '?basket=' + basket.join(','));
    }

    return false;
  }
}

function addProduct(id) {
  var li = document.createElement('li');
  // console.log(event.dataTransfer.getData('Text'), event);
  var item = document.querySelector('img[data-id="' + id + '"]');

  if (item) {
    li.appendChild(item.cloneNode());
    li.innerHTML += item.dataset.title + '<br>' + item.dataset.price;
    basketItems.appendChild(li);
    return true;
  } 

  return false;
}

window.onpopstate = function (event) {
  if (event.state) {
    basket = event.state;
    basketItems.innerHTML = '';
    basket.forEach(addProduct);
  }
}