function modelView(){

this.container = $("<div id='model-view-container' class='suri-model-view'></div>");
this.dataWrapper = $("<div id='model-view-data-wrapper' class='suri-model-view' ></div>");

this.launch = function(){

// remove previous

removeModelView();

setContainer(this.container);

setDataWrapper(this.dataWrapper);

// on window resize change the dimensions of container

$(window).resize(function(){
    var tmp = $(window);
    $('#model-view-container').css({
        'min-height': tmp.height(),
        'min-width': tmp.width()
    });
});

// cross button css and js

    $('.cross-button').on({
        'mouseenter': function(){
            $(this).css({'color':'green'});
        },
        'mouseout': function(){
            $(this).css({
                'color': 'red'
            });
        },
        'mouseup': function(){
            removeModelView();
        }
    });

};

this.setData = function(data){
    var $data = $("<div id='data-holder-model' ></div>").append(data);
    $data.css({
        'margin': '20px 20px 20px 20px'
    });
    this.dataWrapper.append($data);
};

function setDataWrapper($dataWrapper){

    $dataWrapper.find('#data-holder-model').before("<span class='cross-button' style='font-family: sans-serif;font-size: 15px;float: right;margin-top: 3px;margin-right: 5px;cursor: pointer;color: red'  >X</span>");

    var window_height = $(window).height();

    $dataWrapper.css({
        'display': 'inline-block',
        'min-height': '200px',
        'min-width': '200px',
        'border': '1px lightgray solid',
        'box-shadow': '0 4px 23px 5px rgba(0, 0, 0, 0.2), 0 2px 6px rgba(0,0,0,0.15)',
        'max-width': '80%',
        'border-radius': '6px',
        'background-color': 'white',
        'color': 'black'
    });

    $dataWrapper = $("<div class='suri-model-view' id='data-wrap-holder'></div>").append($dataWrapper);

    $dataWrapper.css({
        'text-align': 'center',
        'position': 'fixed',
        'z-index': 15,
        'width': '100%',
        'max-height': (window_height - 0.3 * window_height) + 'px' ,
        'top': '20%',
        'overflow-y': 'scroll'
    });

    $('body').append($dataWrapper);
}

function setContainer(container){
    var tmp = $(window);
    container.css({
        'min-height': tmp.height()+'px',
        'min-width': tmp.width()+'px',
        'position': 'fixed',
        'z-index': 10,
        'top': '0px',
        'background-color': 'white',
        'opacity': 0.8
    });
    $('body').append(container);
}

// remove the model

function removeModelView(){
    $('.suri-model-view').remove();
}

}