@blue: #00c0ef;

.clearfix() {
  &:before,
  &:after {
    content: " "; // 1
    display: table; // 2
  }
  &:after {
    clear: both;
  }
}

.box {
  position: relative;
  background: #ffffff;
  margin-bottom: 20px;
  width: 100%;


  // collapsed mode
  &.collapsed-box {
    .box-body,
    .box-footer {
      display: none;
    }
  }

  .nav-stacked {
    > li {
      margin: 0;
      &:last-of-type {
        border-bottom: none;
      }
    }
  }

  // fixed height to 300px
  &.height-control {
    .box-body {
      max-height: 300px;
      overflow: auto;
    }
  }

  

  //SOLID BOX
  //---------
  //use this class to get a colored header and borders

  &.box-solid {
    border-top: 0;
    > .box-header {
      .btn.btn-default {
        background: transparent;
      }
      .btn,
      a {
        &:hover {
          background: rgba(0, 0, 0, 0.1);
        }
      }
    }

    // Box color variations
    
    > .box-header > .box-tools .btn {
      border: 0;
      box-shadow: none;
    }

    // Fix font color for tiles
    &[class*='bg'] {
      > .box-header {
        color: #fff;
      }
    }

  }

  //BOX GROUP
  .box-group {
    > .box {
      margin-bottom: 5px;
    }
  }

  // jQuery Knob in a box
  .knob-label {
    text-align: center;
    color: #333;
    font-weight: 100;
    font-size: 12px;
    margin-bottom: 0.3em;
  }
}

.box-pm {
    border: solid 1px #ccc;
    border-radius: 0;
    .box-header {
      color: #444;
      display: block;
      padding: 10px;
      position: relative;
        position: relative;
        padding-bottom: 0;
        .btn {
            border-radius: 0;
            position: absolute;
            height: 28px;
            padding: 0 10px !important;
            line-height: 25px;
            margin: auto;
            top: -1px;
            bottom: 0;
            right: 10px;
        }
        &:after {
            content: "";
            display: block;
            padding-top: 9px;
            border-bottom: solid 1px #ccc;
        }
    }
}

.hideme {
    visibility: hidden;
    position: absolute;
    width: 0;
    height: 0;
}

#promo-css-editor,#promo-html-editor,#promo-js-editor {
    position: relative;
    height: 250px;
    width: 100%;
}

.box-body {
    padding: 10px;
    border-radius: 0 0 3px 3px;
}

.preview-options-wrapper {
    display: flex;
    @media screen and (max-width:768px)
    {
        flex-direction: column;
    }
    .preview-options  {
        display: flex;
        align-items: center;
        @media screen and (min-width: 768px)
        {
            flex-grow: 1;
            margin-right: 15px;
            &:last-child {
                margin: 0;
                flex-grow: 0;
            }
        }
        @media screen and (max-width:768px)
        {
            margin-bottom: 10px;
            &:last-child {
                margin: 0;
            }
        }
        label {
            margin-right: 10px;
            margin-bottom: 0;
        }
        .preview-icon {
            width: 34px;
            height: 34px;
            line-height: 34px;
            text-align: center;
            border: solid 1px #ccc;
            margin: 0 5px;
            display: inline-block;
            cursor: pointer;
            transition: all .5s ease;
            &.active {
                background-color: @blue;
                color: #fff;
                border-color: @blue;
            }
        }
      &.device .preview-icon {
            font-size: 18px;
        }
    }
}

.preview-option-wrapper {
    width: 100%;
    position: relative;
    .clearfix();
    .preview {
      display: block;
        border: solid 0px #313039;
        border-radius: 0;
        &::after,&::before {
            content: "";
            height: 0px;
            width: 0px;
            transform: all .5s;
        }
        &.center {
            margin: auto;
        }
        &.mobile {
            overflow: auto;
            border-width: 40px 15px 70px 15px;
            border-radius: 25px;
            transition: all .5s ease;
            &::after,&::before {
                position: absolute;
                left: 0;
                right: 0;
                margin: auto;
                background-color: #fff;
            }
            &::after {
                width: 40px;
                height: 40px;
                border-radius:50%;
                bottom: 15px;
            }
            &:before {
                width: 80px;
                height: 5px;
                top:17.5px;
                border-radius:10px;
            }
        }
        &.tab {
            overflow: auto;
            border-width: 25px 15px 60px 15px;
            border-radius: 25px;
            transition: all .5s ease;
            &::before {
                position: absolute;
                left: 0;
                right: 0;
                margin: auto;
                background-color: #fff;
                width: 30px;
                height: 30px;
                border-radius:50%;
                bottom: 15px;
            }
        }
        &.laptop {
            overflow: auto;
            width: auto !important;
            margin: 0 15px 40px 15px;
            border-width: 15px;
            border-radius: 10px;
            transition: all .5s ease;
            &::after,&::before {
                position: absolute;
                left: 0;
                right: 0;
                margin: auto;
                background-color: #fff;
            }
            &::after {
                width: 100%;
                height: 40px;
                border-bottom-left-radius: 30px;
                border-bottom-right-radius: 30px;
                bottom: -5px;
                background-color: #555;
            }
            &:before {
                width: 10px;
                height: 10px;
                top:2.5px;
                border-radius:5px;
            }
        }
        &::-webkit-scrollbar
        {
          width: 3px;
          background-color: #666;
        }
        &::-webkit-scrollbar-thumb
        {
          width: 3px;
          background-color: #fff;
        }
    }
}

.form-control {
    border-radius: 0;
}

.modal-backdrop {
    background-color: rgba(0, 0, 0, 0.4);
}

.modal {
    visibility: hidden;
    background-color: transparent;
    display: block !important;
    transform: perspective(400px) scale(.9) rotateX(-15deg) translateY(100%);
    opacity: 0;
    transition: all .5s ease;
    &.in {
        transform: perspective(400px) scale(1) rotateX(0deg) translateY(0%);
        visibility: visible;
        opacity: 1;
    }
    &.style-1 {
        //display: block !important;
        .modal-header {
            background-color: @blue;
            color: #fff;
            .close {
                opacity: .8;
                color: #Fff;
            }
        }
        b {
            
        }
        .footer {
            border-top: solid 1px #ccc;
            padding-top: 15px;
        }
    }
}

.modal-content {
    border-radius: 0;
}

.dnd-file-uploader {
    .dnd-file-handler {
        width: 100%;
        border: solid 5px #ccc;
        height: 100px;
        font-size: 36px;
        text-align: center;
        line-height: 100px;
        color: #ccc;
        font-weight: bolder;
        cursor: pointer;
        margin-bottom: 15px;
    }
}

.promo-images-wrapper {
    background-image: url(../img/photo1.png);
    background-size: cover;
    background-position: center center;
    height: 250px;
    padding: 10px;
    margin-bottom: 15px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    .btn {
        border-radius: 0px;
        border: none;
    }
    .hover {
        text-align: center;
        padding: 10px 30px;
        background-color: #fff;
        transform: perspective(800px) rotateY(90deg);
        transition: all .5s ease;
        .promo-bg-options {
            min-height: 100px;
        }
    }
    &:hover {
        .hover {
            transform: perspective(800px) rotateY(0deg);
            transition: all .8s cubic-bezier(0.43, 2.11, 0.59, 0.79);
        }
    }
}

.url {
    .live-input {
      position: absolute;
        z-index: -1;
        opacity: 0;
    }
}

function editor()
    {
        if($('#promo-css-editor').length)
            {
                var targetCss = $('#promo-css-editor').data('target');
                var editorCss = ace.edit("promo-css-editor");
                editorCss.setValue($(targetCss).val());
                editorCss.setTheme("ace/theme/chrome");
                editorCss.getSession().setMode("ace/mode/css");
                editorCss.getSession().setUseWrapMode(true);
                editorCss.on('change', function(){
                    $(targetCss).val(editorCss.getValue());
                    $(targetCss).trigger('change');
                });
            }
        if($('#promo-html-editor').length)
            {
                var targetHtml = $('#promo-html-editor').data('target');
                var editorHtml = ace.edit("promo-html-editor");
                editorHtml.setValue($(targetHtml).val());
                editorHtml.setTheme("ace/theme/chrome");
                editorHtml.getSession().setMode("ace/mode/html");
                editorHtml.getSession().setUseWrapMode(true);
                editorHtml.on('change', function(){
                    $(targetHtml).val(editorHtml.getValue());
                    $(targetHtml).trigger('change');
                    
                });
            }
        if($('#promo-js-editor').length)
            {
                var targetJs = $('#promo-js-editor').data('target');
                var editorJs = ace.edit("promo-js-editor");
                editorJs.setValue($(targetJs).val());
                editorJs.setTheme("ace/theme/chrome");
                editorJs.getSession().setMode("ace/mode/javascript");
                editorJs.getSession().setUseWrapMode(true);
                editorJs.on('change', function(){
                    $(targetJs).val(editorJs.getValue());
                    $(targetJs).trigger('change');
                });
            }
        function changehtmleditor(val)
        {
            editorHtml.setValue(val);
        }
    }

function livePreview()
    {
        if($('.preview').length)
            {
                
                $('#promo-css,#promo-js,#promo-html').on('change', function() {
                    var el = $(this);
                    var target = el.data('type');
                    var val = el.val();
                    $('.preview').find(target).html(val);
                });
                
                $('.preview-options input').keyup(function() {
                    var el = $(this);
                    var root = el.parent();
                    var css = root.data('css');
                    var val = el.val();
                    if(val == 0)
                        {
                            val = '100%';
                        }
                    if(css == 'width')
                        {
                            $('.preview').animate({
                                width: val
                            });
                        }
                    if(css == 'height')
                        {
                            $('.preview').animate({
                                height: val
                            });
                        }
                    
                });
                $('.align .preview-icon').click(function() {
                    var align = $(this).data('preview-align');
                    var root = $(this).parent();
                    root.find('.preview-icon').removeClass('active');
                    $(this).addClass('active');
                    $('.preview-icon').each(function(k,el) {
                        $('.preview').removeClass($(el).data('preview-align'));
                    });
                    $('.preview').addClass(align);
                });
                $('.device .preview-icon').click(function() {
                    var device = $(this).data('preview-device');
                    var root = $(this).parent();
                    root.find('.preview-icon').removeClass('active');
                    $(this).addClass('active');
                    $('.preview-icon').each(function(k,el) {
                        $('.preview').removeClass($(el).data('preview-device'));
                    });
                    $('.preview').addClass(device);
                    switch (device)
                    {
                        case 'mobile':
                            $('[data-preview-align="center"]').click();
                            $('#preview-width').val(375);
                            $('#preview-height').val(667);
                            $('#preview-width,#preview-height').trigger('keyup');
                            break;
                        case 'tab':
                            $('[data-preview-align="center"]').click();
                            $('#preview-width').val(480);
                            $('#preview-height').val(687);
                            $('#preview-width,#preview-height').trigger('keyup');
                            break;
                        case 'laptop':
                            $('[data-preview-align="center"]').click();
                            $('#preview-height').val($('.preview').width()*0.5625);
                            $('#preview-width,#preview-height').trigger('keyup');
                            break;
                        default :
                            $('#preview-width').val(0);
                            $('#preview-height').val(0);
                            $('#preview-width,#preview-height').trigger('keyup');
                            break;
                    }
                    
                });
            }
    }

function createImgNode(src)
    {
        var node = $('<div class="col-sm-6"> <div class="promo-images-wrapper" style="background-image: url('+src+');"> <div class="hover"> <div class="form-group"> <div class="btn btn-info set-bg">Set Background</div></div><div class="promo-bg-options"> </div><div class="url"> <div class="live-input"> <input type="text" class="img-url text-center form-control" value="'+src+'"> </div><div class="btn btn-info"  data-toggle="tooltip" data-original-title="Copy">Copy URL</div></div></div></div></div>');
        
        $('.image-images-container').append(node);
        copyUrl();
        setBgOptions();
    }
    
    function copyUrl()
    {
        $('.url .btn').click(function(e) {
            e.preventDefault();
            var root = $(this).parent();
            var target = root.find('.img-url');
            $('input').blur();
            target.select();
            try {
                // copy text
                document.execCommand('copy');
                target.blur();
                $(this).attr('data-original-title','Copied').tooltip('fixTitle') .tooltip('show');
              
            }
            catch (err) {
              alert('please press Ctrl/Cmd+C to copy');
            }
        });
    }
    
    function setBgOptions()
    {
        $('.set-bg').click(function(e) {
            e.preventDefault();
            var root = $(this).parentsUntil('body','.promo-images-wrapper').last();
            var node = $('<div> <div class="row"> <div class="col-xs-6"> <div class="live-input form-group active"> <select class="form-control repeat"> <option value="">repeat Type</option> <option value="repeat">Repeat</option> <option value="repeat-x">Repeat-x</option> <option value="repeat-y">Repeat-y</option> <option value="no-repeat">No-repeat</option> </select> </div></div><div class="col-xs-6"> <div class="live-input form-group active"> <select class="form-control size"> <option value="">Backgeound Size</option> <option value="cover">Cover</option> <option value="contain">Contain</option> </select> </div></div></div></div><div class="form-group"> <div class="row"> <div class="col-xs-3"> <label>X -</label> </div><div class="col-xs-9"> <div class="live-input active"> <select class="form-control x-pos"> <option value="">Position</option> <option value="left">Left</option> <option value="center">Center</option> <option value="right">Right</option> </select> </div></div></div></div><div class="form-group"> <div class="row"> <div class="col-xs-3"> <label>Y -</label> </div><div class="col-xs-9"> <div class="live-input active"> <select class="form-control y-pos"> <option value="">Position</option> <option value="top">Top</option> <option value="center">Center</option> <option value="bottom">Bottom</option> </select> </div></div></div></div>');
            $('.promo-bg-options').html('');
            root.find('.promo-bg-options').html(node);
            $('.img-url').removeClass('bg-img-url');
            root.find('.img-url').addClass('bg-img-url');
            bgval();
        });
        
        function bgval()
        {
            $('.promo-bg-options .form-control').on('change', function() {
                $('#promo-bg').trigger('change');
            });
            
            
            $('#promo-bg').on('change', function() {
                var size = $('.promo-bg-options .size').val();
                var repeat = $('.promo-bg-options .repeat').val();
                var xPos = $('.promo-bg-options .x-pos').val();
                var yPos = $('.promo-bg-options .y-pos').val();
                var src = $('.bg-img-url').val();
                var bgVal = 'url('+src+') '+xPos+' '+yPos+' '+size;
                //$('#promo-bg').val(bgVal);
                console.log(bgVal);
                $('.preview').css({
                    backgroundImage: 'url('+src+')',
                    backgroundPosition: xPos+' '+yPos,
                    backgroundSize: size,
                    backgroundRepeat: repeat
                });
            });
        }
    }
    
    function DNDfileUploader()
    {
        if($('.dnd-file-handler').length)
            {
                var dnd = $(".dnd-file-handler");
                var fileinput = $('.dnd-file-uploader [type="file"]');
                dnd.click(function() {
                    fileinput.click();
                });
                dnd.on('dragenter', function (e) {
                    e.stopPropagation();
                    e.preventDefault();
                    $(this).css({
                        borderStyle:'dashed',
                        borderColor:'#00c0ef',
                        color: '#00c0ef'
                    });
                });
                dnd.on('dragover', function (e) {
                    e.stopPropagation();
                    e.preventDefault();
                });
                dnd.on('drop', function (e) {
                    e.preventDefault();
                    $(this).css({
                        borderStyle:'solid',
                        borderColor:'#ccc',
                        color: '#ccc'
                    });
                    var img = e.originalEvent.dataTransfer.files;
                    fileHandler(img[0]);
                });
                fileinput.on('change', function() {
                    fileHandler(this.files[0]);
                });
                function fileHandler(file)
                {
                    var fr = new FileReader();
                    fr.onload = function(e) {
                        var fileload = e.target.result;
                        createImgNode(fileload);
                    }
                    fr.readAsDataURL(file);
                }
            }
    }





editor();
livePreview();
copyUrl();
setBgOptions();
DNDfileUploader();


$(window).on('load',function() {
        if($('.preview').length)
            {
                $('#promo-css,#promo-js,#promo-html').trigger('change');
            }
    });