<!doctype html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>BringToTop Demo</title>
    <link rel="stylesheet" href="style.css">
    <link rel="stylesheet" href='https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css'>
</head>
<body>

<header id="header" class="header">
    <div class="text-center text-danger">
        <h4>Bring-To-Top Demo</h4>
        <hr/>
    </div>
</header><!-- /header -->

<section id="main-body">
    
    <div class="container">
        <div class="col-lg-12">
            <!-- action btns -->
            <button class="btn btn-sm btn-success add-btn">ADD NEW</button>
        </div>
    </div>
</section>

<section id="appendable-div">
    <div class="container">
        <div class="row">
            <div id="draggable-container">
                <!-- all the containers would be appended here -->
            </div>
        </div>

        <a href="https://github.com/dev-sandeep/bringToTop">@author</a> - <a href="http://www.sandeepg.co.in" target="_blank">Sandeep Gantait / 20160801</a>
    </div>

    <!-- demo container goes here -->
    <div class="demo-div" style="display:none">
        <div class="ui-widget-content drag-container">
            <p>Drag me around</p>
        </div>
    </div>
</section>

<script src="https://code.jquery.com/jquery-3.1.0.min.js"   integrity="sha256-cCueBR6CsyA4/9szpPfrX3s49M9vUU5BgtiJj06wt/s="   crossorigin="anonymous"></script>
<script  src="https://code.jquery.com/ui/1.12.0/jquery-ui.min.js"   integrity="sha256-eGE6blurk5sHj+rmkfsGYeKyZx3M4bG+ZlFyA7Kns7E="   crossorigin="anonymous"></script>
<script src="main.js"></script>
<script src="dragToFront.js"></script>
</body>
</html>


/**
 * responsible for handling all the actions of the UI
 * @author Sandeep Gantait
 * @since 2016801
 */

/**
 * all JQUERY bindings goes here
 */
(function(){
    var ctr = 1;
    /* event binding for adding a new draggable container */
    $('.add-btn').click(function(){
        $('#draggable-container').append('<div class="ui-widget-content drag-container window-container container_id_'+ctr+'"><p>Container '+ctr+' <h1>'+ctr+'</h1></p></div>');
      
        /* make it draggable */
        $( "#draggable-container .drag-container" ).draggable();

        /* assign z-index */
        dragToFront.assignZIndex('.container_id_'+ctr);

        ctr++;
    });
}());
/**
 * Responsible for managing the z-index of the containers just like the windows
 * @author Sandeep G
 * @since 20160801
 */
var dragToFront = {
    /* initial counter for the z-index */
    initialCounter : parseInt(11),

    /**
     * bring the clicked z-index to the front
     */
    bringFront : function(elem, className)
    {
        className = className || 'window-container';

        /* get the maximum z-index */
        var max = this.getMaxZIndex(className);

        /* assigning the max z-index to the clicked elem. */
        $(elem).css('z-index', ++max);

        /* traverse through each elem and making there z-index reduced by 1 */
        $(className).each(function(){
            var zIndex = $(this).css('z-index');
            if(zIndex != max)//decrement the z-index only if it is not the element at the front
            {
                $(this).css('z-index', --zIndex);
            }
        });
    },

    /**
     * assign a z-index to the div; while creating the draggable container gotta call 'em
     */
    assignZIndex : function(elem, className)
    {
        className = className || 'window-container';

        /* check if the div is existing */
        var isExisting = $('.'+className).length;
        if(!isExisting)//I am Fresher
        {
            $(elem).css('z-index', this.initialCounter);
            this.counter = this.initialCounter;
        }
        else
        {
            var max = this.getMaxZIndex(className);
            /* assign the max+1 to the new container */
            $(elem).css('z-index', ++max);
        }

        this.bindClickEvent();
    },

    /**
     * responsible for getting the max z-index
     */
    getMaxZIndex : function(className)
    {
        var max = 0, zIndex;

        /* traverse through all the classes and get the highest z-index */
        $('.'+className).each(function(){
            zIndex = $(this).css('z-index');
            if(parseInt(zIndex) > max)
            {
                max = zIndex;
            }
        });

        return max;
    },


    /**
     * responsible for handling the z-indexes on click event
     */
    bindClickEvent : function()
    {
        $('#appendable-div .window-container').on('mousedown', function(){
            console.log("binding...");
            /* get the list of classes */
            var classList = $(this).attr('class').split(' ');
            var uniqueClass = classList[3];
            console.log('uniqueClass', uniqueClass);
            dragToFront.bringFront('.'+uniqueClass);
        });
    }
};
/* all the styles gores here */
#draggable-container
{
    width: 100%;
    min-height: 300px;
    background: #f9f9f9;
    margin-top: 1%;
    padding: 1%;
}

.drag-container
{
    width: 150px;
    height: 150px;
    margin: 10px;
    display: inline-block;
    border: 1px solid gray;
    padding: 10px;
    box-shadow: 2px 2px 2px gray;
    background: #fff;
}

.drag-container h1
{
    text-align: center;
}