<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>All of them</title>
    <script src="js/Point.js"></script>
    <script src="js/extract-colors.js"></script>
    <script src="js/data.js"></script>
    <script src="js/DOM.js"></script>
    <script src="js/Observer.js"></script>
    <script src="js/Store.js"></script>
    <style>
        label {
            display: block;
        }
        input.field__input {
            position: absolute;
            left: 128px;
            width: 4em;
            border: 0;
            border-bottom: 1px solid #999;
            text-align: center;
        }
        body {
            margin: 16px;
            padding: 0;
            font-family: Verdana;
            font-size:16px;
        }
        .cp {
            width:16px;
            height: 16px;
            border: 2px solid #fff;
            transition: all 0.3s ease;
            position: relative;

        }
        .cp:hover {
            width: 32px;
            height: 32px;
            margin: -8px;
            z-index: 2;
        }
        .row.other .cp {
            border-radius: 50%;
        }
        .row.active .cp {
            width: 24px;
            height: 24px;
            margin: -4px;
            z-index: 1;
        }
        .title {
            font-size:32px;
            padding: 16px 0 8px 0
        }
        .row {
            display: inline-block;
            /* float: left; */
        }
        .left {
            position: absolute;
            left: 0;
            width: 50%;
            top: 0;
            height: 100%;
            padding:16px;
            box-sizing: border-box;
        }
        .right {
            position: absolute;
            right: 0;
            width: 50%;
            top: 0;
            height: 100%;
            padding:16px;
            box-sizing: border-box;
        }
        .preview-img {
            float: right;
            width: 128px;
        }
        .preview-color {
            width: 92px;
            height: 92px;
            float: left;
            margin: 0 16px 0 0;
            border-radius: 5px;
        }
    </style>
</head>
<body>
    <script>
        var store = window.store = new Store({
          h: 50,
          s: 35,
          v: 0
        });

      var list = ['brows','lips','blush','eyes'];
      var lastEl;

        var Input = function(cfg){
          var dom = D.h('input', {cls:"field__input", attr: {type: 'number'}});
          if(cfg.bind){
            cfg.bind.sub(function (val) {
              dom.value = val;
            });
            dom.addEventListener('input', function () {
              cfg.bind.set(dom.value);
            })
          }
          return dom;
        };

      var preview = function(item, el) {
        lastEl && lastEl.classList.remove('active');
        lastEl && (lastEl.childNodes[0].style.borderColor = '#fff');
        (lastEl = el).classList.add('active');
        var clr = item.hsv.slice();
        clr[2]*=2;
        lastEl.childNodes[0].style.borderColor = 'rgb('+hsvToRgb.apply(null,clr)+')';
        [].slice.call(document.querySelectorAll('.other')).forEach(function(el) {
          el.classList.remove('other');
        });

        [].slice.call(document.querySelectorAll('[data-id="'+item.pid+'"]')).forEach(function(el) {
          el.classList.add('other');
        });

        var desc;
        updateRight(
          D.div({cls: 'title'}, item.title),
          D.h('img', {cls: 'preview-img', src: item.img}),
          D.div({cls: 'preview-color', style: {background: item.color}}),
          D.div({cls: 'info'}, 'Product ID: '+ item.pid),
          D.div({cls: 'info'}, 'Variant ID: '+ item.vid),
          D.div({cls: 'info'}, 'SKU ID: '+ item.sku),
          D.div({cls: 'info'}, 'Color name: '+ item.colorName),
          D.div({cls: 'info'}, 'Color: '+ item.color),
          desc = D.div({cls: 'description'})
        );
        desc.innerHTML = item.description;
      }, updateRight;
      D.div({cls: 'viewport', renderTo: document.body},
        D.div({cls: 'left'},
          D.div({cls: 'block'},
            D.div({cls: 'title'},'Color sort:'),
            D.h('label', {},
              'Hue: ', D.h(Input, {bind: store.bind('h')})
            ),
            D.h('label', {},
              'Saturation: ', D.h(Input, {bind: store.bind('s')})
            ),
            D.h('label', {},
              'Value: ', D.h(Input, {bind: store.bind('v')})
            )

          ),

          list.map(function(name) {
            return D.div({cls: 'block'},
              D.div({cls: 'title'}, name[0].toUpperCase()+name.substr(1)),
              (draw)=>{
                getData(name, function(res) {

                  store.sub(['h','s','v'], function(h,s,v){


                    var list = [];
                    res.products.forEach( function( product ){
                      product.variants.forEach( function( variant ){
                        var color = variant.option2.substr( 1 ),
                          r = parseInt( color[ 0 ] + color[ 1 ], 16 ),
                          g = parseInt( color[ 2 ] + color[ 3 ], 16 ),
                          b = parseInt( color[ 4 ] + color[ 4 ], 16 );

                        list.push( {
                          pid: product.id,
                          vid: variant.id,
                          description: product.body_html,
                          title: product.title,
                          color: variant.option2,
                          colorName: variant.option1,
                          img: variant.featured_image && variant.featured_image.src || ( product.images[ 0 ] || {} ).src,
                          sku: variant.option3,
                          hsv: rgbToHsv( r, g, b )
                        } );
                      } );
                    } );
                    list.sort( function( a, b ){
                      return ( a.hsv[ 0 ] - b.hsv[ 0 ] ) * h + ( b.hsv[ 2 ] - a.hsv[ 2 ] ) * s + ( a.hsv[ 1 ] - b.hsv[ 1 ] ) * v;
                    } );
                    draw( list.map( function( item ){
                      return D.div( {
                          attr: { 'data-id': item.pid }, cls: 'row', onClick: function(){
                            preview( item, this )
                          }
                        },
                        D.div( { cls: 'cp', style: { background: item.color } } )
                      )
                    } ) )
                  });
                });
              }
            )


          })
        ),
        D.div({cls: 'right'},
          function(_) {
            updateRight = _;
          }
        )
      );
      setTimeout(function() {
        document.querySelector('.row').click();
      }, 300);

    </script>
</body>
</html>