(function () {
    var jQuery;
    var serverFQDN = 'http://localhost/modal/';
    var timeoutId, options, container;
    var this_username, this_com_id;
    var mj_playerType;
    var mj_category_type;

    if (!window.BaltJS)
        window.BaltJS = {};
    BaltJS.Widget = function (opts) {
        options = opts;
        if (!options.buttonText) {
            options.buttonText = 'This text is configurable';
        }
        this_username = options.userName;
        this_com_id = options.com_id;
        mj_playerType = options.player_type;
        mj_category_type = options.category_type;
        container = '.widget-body';
    };
    function init() {
        if (window.jQuery === undefined || window.jQuery.fn.jquery !== '1.11.2') {
            console.log('we need to load jQuery');
            var script_tag = document.createElement('script');
            script_tag.setAttribute("type", "text/javascript");
            script_tag.setAttribute("src", "https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js");
            (document.getElementsByTagName("head")[0] || document.documentElement).appendChild(script_tag);
            if (script_tag.attachEvent) {
                //console.log('oh cool, this is IE');
                script_tag.onreadystatechange = function () { // for IE
                    if (this.readyState == 'complete' || this.readyState == 'loaded') {
                        this.onreadystatechange = null;
                        scriptLoadHandler();
                    }
                };
            } else {
                script_tag.onload = scriptLoadHandler;
            }
        } else {
            jQuery = window.jQuery;
            console.log('jQuery already exists on page');
            main();
        }
    }

    function scriptLoadHandler() {
        jQuery = window.jQuery.noConflict();
        console.log('jQuery is now loaded ssss');
        main();
    }

    function main() {
        jQuery(document).ready(function () {
            jQuery('head').append('<link href="' + serverFQDN + '/modal.css" rel="stylesheet" type="text/css">');
            jQuery('head').append('<script src="' + serverFQDN + '/mj-widget-player.js" ></script>');
            jQuery('head').append('<link href="' + serverFQDN + 'lightslider/src/css/lightslider.css" rel="stylesheet" type="text/css">');
            jQuery('head').append('<script src="' + serverFQDN + 'lightslider/src/js/lightslider.js" ></script>');

            //jQuery.getScript(serverFQDN + '/mj-widget-player.js');

            var player_type;
            var category_bar;





            var right_playlist = '<div class="row">' +
                    '<div class="col-md-9 col-sm-9 col-xs-9">' +
                    '<div id="player" style="width: 100%"></div>' +
                    '</div>' +
                    '<div class="col-md-3 col-sm-3 col-xs-3" style="padding:0;">' +
                    '<div id="mj-player-list" >' +
                    '<ul id="mjRightPlaylist" class="content-slider">' +
                    '</ul>' +
                    '</div>' +
                    '</div>' +
                    '</div>';

            var bottom_playlist = '<div class="row">' +
                    '<div class="col-md-12 col-sm-12 col-xs-12">' +
                    '<div id="player" style="width: 100%"></div>' +
                    '<div class="row">' +
                    '<div class="col-md-12 col-sm-12 col-xs-12">' +
                    '<div id="mj-cntainer" style="margin-top:5px;">' +
                    '<ul id="mjBottomPlaylist" class="content-slider">' +
                    '</ul>' +
                    '</div>' +
                    '</div>' +
                    '</div>' +
                    '</div>' +
                    '</div>';

            if (mj_playerType == 'right_playlist') {
                player_type = right_playlist;
            } else if (mj_playerType == 'bottom_playlist') {
                player_type = bottom_playlist;
            }



            var top_cat_bar = '<div class="row" style="width:100%">' +
                    '<ul id="mjCatContainer" class="content-slider">' +
                    '</ul>' +
                    '</div>' +
                    '<div class="row">' +
                    '<div class="col-md-8">' +
                    player_type +
                    '</div>' +
                    '<div class="col-md-4">' +
                    '<h1 id="mj-widget-video-title"></h1>' +
                    '<p id="mj-widget-video-description"></p>' +
                    '<a class="mj-button" id="mj-widget-cta-btn" href="#">More</a>' +
                    ' </div>' +
                    '</div>';

            var side_cat_bar = '<div class="row">' +
                    '<div class="col-md-1">' +
                    '<div class="row" style="width:100%">' +
                    '<ul id="mjCatContainerSide" class="content-slider">' +
                    '</ul>' +
                    '</div>' +
                    '</div>' +
                    '<div class="col-md-7">' +
                    player_type +
                    '</div>' +
                    '<div class="col-md-4">' +
                    '<h1 id="mj-widget-video-title"></h1>' +
                    '<p id="mj-widget-video-description"></p>' +
                    '<a class="mj-button" id="mj-widget-cta-btn" href="#">More</a>' +
                    ' </div>' +
                    '</div>';




            if (mj_category_type == 'top_cat_bar') {
                category_bar = top_cat_bar;
            } else if (mj_category_type == 'side_cat_bar') {
                category_bar = side_cat_bar;
            }


            if (jQuery(container).size() === 0) {
//                jQuery('body').append('<div class="widget-body"></div>');
                jQuery('.mjogger_wid').html('<label class="mj-float-btn" for="mj-widget-modal-1"> </label>');
                jQuery('.mjogger_wid').append(' <input class="mj-widget-modal-state" id="mj-widget-modal-1" type="checkbox" />' +
                        '<div class="mj-widget-modal">' +
                        '<label class="mj-widget-modal__bg" for="mj-widget-modal-1"></label>' +
                        '<div class="mj-widget-modal__inner">' +
                        '<div class="loader" id="widgetLoader">Loading...</div>'+
                        '<div style="width:98%;height:90%;display:none;" id="innerModalData">' +
                        
                        '<label class="mj-widget-modal__close" for="mj-widget-modal-1"></label>' +
                        '<h2 id="mj-widget-vspace-title">' + this_username + ' Visual Space</h2>' +
                        category_bar +
                        '</div>' +
                        '</div>' +
                        '</div>');
                //alert();

            }
            getMyVideoData();



        });
    }

    function getMyVideoData() {
//    var data =jQuery.getJSON(serverFQDN + '/widget_submit.php?callback=?');
//console.log(data);
        var com_id = this_com_id;
        
        jQuery.ajax({
            url: 'http://localhost/widget/server/widget_submit.php',
            method: 'GET',
            dataType: 'json',
            data: {'com_id': com_id},
            success: function (data2) {
                var data_array=[];
                console.log(data2);
                jQuery.each(data2,function(i,e){
                    data_array.push(data2[i].video_id);
                });
                set_variables(data_array, com_id,data2);

            }
        });
    }

    function serverResponse(data) {
        jQuery(container + ' button').removeAttr('disabled');
        updateStatus(data.message + ' Your ip is ' + data.ip + '. Host site is ' + data.site + '. UA is ' + data.ua);
    }

    function updateStatus(msg) {
        if (jQuery(container + ' p.message').length === 0) {
            jQuery(container).append('<p class="message"></p>');
        }
        jQuery(container + ' p.message').html(msg);
    }

    init();
})();
