// Download the Free scene from https://www.mockupcloud.com/free/isometric-branding-mockup-free-scene
.scene-bg(style='background: linear-gradient(to bottom left, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0) 15%, rgba(0, 0, 0, 0.25) 65%, rgba(0, 0, 0, 0.4) 100%), url(https://i.ibb.co/C2YmXR2/background.jpg) no-repeat center center fixed;')
  // Paper Holder
  #paper-holder.drag.paper-holder-cont.obj-cont
    img.scene-shadow.obj.paper-holder(src='https://i.ibb.co/WHN5fP9/paper-holder.png')
    img.no-shadow.obj.paper-holder(src='https://i.ibb.co/2KQQQmw/paper-holder.png')
  // Clock
  #clock.clock-cont.obj-cont
    img.scene-shadow.obj.clock(src='https://i.ibb.co/RTg2jXX/clock.png')
    img.no-shadow.obj.clock(src='https://i.ibb.co/3NPcMq3/clock.png')
  // Glass Box
  #glass-box.glass-box-cont.obj-cont
    img.scene-shadow.obj.glass-box(src='https://i.ibb.co/87VW4bc/glass-box.png')
    img.no-shadow.obj.glass-box(src='https://i.ibb.co/dpKSJhw/glass-box.png')
  // Tin Box
  #tin-box.tin-box-cont.obj-cont
    img.scene-shadow.obj.tin-box(src='https://i.ibb.co/cJBsrFY/tin-box.png')
    img.no-shadow.obj.tin-box(src='https://i.ibb.co/LQz688G/tin-box.png')

  // Candle
  #candle.candle-cont.obj-cont
    img.scene-shadow.obj.candle(src='https://i.ibb.co/PYW8qvM/candle.png')
    img.no-shadow.obj.candle(src='https://i.ibb.co/C6HC4mt/candle.pngg')
    
    




   

    

.scene-bg
  position: absolute
  overflow: hidden
  width: 100%
  height: auto
  display: block
  min-height: 100%
  -webkit-background-size: contain !important
  -moz-background-size: contain !important
  -o-background-size: contain !important
  background-size: contain !important

  width: 100%
  height: auto

  top: 0
  left: 0

.obj-cont
  position: relative

.scene-shadow
  mix-blend-mode: multiply

.obj
  position: absolute

.drag:hover
  cursor: pointer

.paper-holder-cont
  left: 34%
  top: 11em

.paper-holder
  width: 30%

.clock-cont
  left: 54%
  top: 6em

.clock
  width: 9%

.glass-box-cont
  left: 23%
  top: 14em

.glass-box
  width: 15%

.candle-cont
  left: 60%
  top: 17em

.candle
  width: 10%

.tin-box-cont
  left: 31%
  top: 34em

.tin-box
  width: 10%

#mydiv
  position: absolute

// Drag for the scene

(function () {
  var dragElement, things;

  things = '#glass-box, #tin-box, #paper-holder, #candle, #clock';

  /*
                                                                   Draggable.create(things, {
                                                                   		edgeResistance:0.65,
                                                                   		type:"x,y",
                                                                   		throwProps:true,
                                                                       autoScroll:true
                                                                   });
                                                                   */
  // Make the DIV element draggable:
  dragElement = function (elmnt) {
    var closeDragElement, dragMouseDown, elementDrag, pos1, pos2, pos3, pos4;
    pos1 = 0;
    pos2 = 0;
    pos3 = 0;
    pos4 = 0;
    dragMouseDown = function (e) {
      e = e || window.event;
      e.preventDefault();
      // get the mouse cursor position at startup:
      pos3 = e.clientX;
      pos4 = e.clientY;
      document.onmouseup = closeDragElement;
      // call a function whenever the cursor moves:
      document.onmousemove = elementDrag;
    };
    elementDrag = function (e) {
      e = e || window.event;
      e.preventDefault();
      // calculate the new cursor position:
      pos1 = pos3 - e.clientX;
      pos2 = pos4 - e.clientY;
      pos3 = e.clientX;
      pos4 = e.clientY;
      // set the element's new position:
      elmnt.style.top = elmnt.offsetTop - pos2 + 'px';
      elmnt.style.left = elmnt.offsetLeft - pos1 + 'px';
    };
    closeDragElement = function () {
      // stop moving when mouse button is released:
      document.onmouseup = null;
      document.onmousemove = null;
    };
    if (document.getElementById(elmnt.id + 'header')) {
      // if present, the header is where you move the DIV from:
      document.getElementById(elmnt.id + 'header').onmousedown = dragMouseDown;
    } else {
      // otherwise, move the DIV from anywhere inside the DIV:
      elmnt.onmousedown = dragMouseDown;
    }
  };

  dragElement(document.getElementById('paper-holder'));

  dragElement(document.getElementById('clock'));

  dragElement(document.getElementById('glass-box'));

  dragElement(document.getElementById('tin-box'));

  dragElement(document.getElementById('candle'));

  // Resize button
  (function ($) {
    $.fn.imageResize = function (options) {
      var settings;
      settings = {
        width: 150,
        height: 150 };

      options = $.extend(settings, options);
      return this.each(function () {
        var $element, height, maxHeight, maxWidth, ratio, width;
        $element = $(this);
        maxWidth = options.width;
        maxHeight = options.height;
        ratio = 0;
        width = $element.width();
        height = $element.height();
        if (width > maxWidth) {
          ratio = maxWidth / width;
          $element.css('width', maxWidth);
          $element.css('height', height * ratio);
        }
        if (height > maxHeight) {
          ratio = maxHeight / height;
          $element.css('height', maxHeight);
          $element.css('width', width * ratio);
        }
      });
    };
  })(jQuery);

  $(function () {
    $('#resize').click(function () {
      $('.obj').imageResize();
    });
  });

  // ---
  // generated by js2coffee 2.2.0

}).call(this);


//# sourceURL=coffeescript