var my_skins = ["skin-blue", "skin-black", "skin-red", "skin-yellow", "skin-purple", "skin-darkblack", "skin-leafgreen", "skin-orangebold", "skin-navyblue", "skin-babypink"];
$(function () {
    var demo = $("<div />").css({
        position: "fixed",
        top: "90px",
        right: "0",
        background: "#fff",
        "border-radius": "5px 0px 0px 5px",
        padding: "10px 15px",
        "font-size": "16px",
        "z-index": "99999",
        cursor: "pointer",
        color: "#3c8dbc",
        "box-shadow": "0 1px 3px rgba(0,0,0,0.1)"
    }).html("<i class='fas fa-fill-drip'></i>").addClass("no-print");
    var demo_settings = $("<div />").css({
        "padding": "10px",
        position: "fixed",
        top: "90px",
        right: "-250px",
        background: "#fff",
        border: "0px solid #ddd",
        "width": "250px",
        "z-index": "99999",
        "box-shadow": "0 1px 3px rgba(0,0,0,0.1)"
    }).addClass("no-print");
    demo_settings.append("<h4 class='text-light-blue' style='margin: 0 0 5px 0; border-bottom: 1px solid #ddd; padding-bottom: 15px;'>Layout Options </h4>"
		+ "<div class='form-group'>"
		+ "<div class='checkbox'>"
		+ "<label class='rt-chkbox rt-chkbox-outline'>"
		+ "<input type='checkbox' onchange='change_layout(\"sidebar-collapse\");'/> "
        + "<span>"
        + "</span>"
        + "&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;"
		+ "Collapsed Sidebar"
		+ "</label>"
		+ "</div>"
		+ "</div>"
	);

    var skins_list = $("<ul />", { "class": 'list-unstyled' });
    var skin_blue = $("<li />", { style: "float:left; width: 50%; padding: 5px;" }).append("<a href='javascript:void(0);' onclick='change_skin(\"skin-blue\")' style='display: block; box-shadow: -1px 1px 2px rgba(0,0,0,0.0);' class='clearfix full-opacity-hover'>" + "<div><span style='display:block; width: 20%; float: left; height: 10px; background: #03afc5;'></span><span class='bg-light-blue' style='display:block; width: 80%; float: left; height: 10px;'></span></div>" + "<div><span style='display:block; width: 20%; float: left; height: 40px; background: #404e65;'></span><span style='display:block; width: 80%; float: left; height: 40px; background: #f4f5f7;'></span></div>" + "<p class='text-center'>Skin Green</p>"
+ "</a>");
    skins_list.append(skin_blue);
    var skin_black = $("<li />", { style: "float:left; width: 50%; padding: 5px;" }).append("<a href='javascript:void(0);' onclick='change_skin(\"skin-black\")' style='display: block; box-shadow: -1px 1px 2px rgba(0,0,0,0.0);' class='clearfix full-opacity-hover'>" + "<div style='box-shadow: 0 0 2px rgba(0,0,0,0.1)' class='clearfix'><span style='display:block; width: 20%; float: left; height: 10px; background: #404e67;'></span><span style='display:block; width: 80%; float: left; height: 10px; background: #404e67;'></span></div>" + "<div><span style='display:block; width: 20%; float: left; height: 40px; background: #404e65;'></span><span style='display:block; width: 80%; float: left; height: 40px; background: #f4f5f7;'></span></div>" + "<p class='text-center'>Skin Pink</p>" + "</a>");
    skins_list.append(skin_black);
    var skin_purple = $("<li />", { style: "float:left; width: 50%; padding: 5px;" }).append("<a href='javascript:void(0);' onclick='change_skin(\"skin-purple\")' style='display: block; box-shadow: -1px 1px 2px rgba(0,0,0,0.0);' class='clearfix full-opacity-hover'>" + "<div><span style='display:block; width: 20%; float: left; height: 10px;' class='bg-purple-active'></span><span class='bg-purple' style='display:block; width: 80%; float: left; height: 10px;'></span></div>"
+ "<div><span style='display:block; width: 20%; float: left; height: 40px; background: #404e65;'></span><span style='display:block; width: 80%; float: left; height: 40px; background: #f4f5f7;'></span></div>" + "<p class='text-center'>Skin Orange</p>" + "</a>");
    skins_list.append(skin_purple);
    var skin_red = $("<li />", { style: "float:left; width: 50%; padding: 5px;" }).append("<a href='javascript:void(0);' onclick='change_skin(\"skin-red\")' style='display: block; box-shadow: -1px 1px 2px rgba(0,0,0,0.0);' class='clearfix full-opacity-hover'>" + "<div><span style='display:block; width: 20%; float: left; height: 10px;' class='bg-red-active'></span><span class='bg-red' style='display:block; width: 80%; float: left; height: 10px;'></span></div>" + "<div><span style='display:block; width: 20%; float: left; height: 40px; background: #404e65;'></span><span style='display:block; width: 80%; float: left; height: 40px; background: #f4f5f7;'></span></div>" + "<p class='text-center'>Skin Blue</p>"
+ "</a>");
    skins_list.append(skin_red);
    var skin_yellow = $("<li />", { style: "float:left; width: 50%; padding: 5px;" }).append("<a href='javascript:void(0);' onclick='change_skin(\"skin-yellow\")' style='display: block; box-shadow: -1px 1px 2px rgba(0,0,0,0.0);' class='clearfix full-opacity-hover'>" + "<div><span style='display:block; width: 20%; float: left; height: 10px;' class='bg-yellow-active'></span><span class='bg-yellow' style='display:block; width: 80%; float: left; height: 10px;'></span></div>" + "<div><span style='display:block; width: 20%; float: left; height: 40px; background: #404e65;'></span><span style='display:block; width: 80%; float: left; height: 40px; background: #f4f5f7;'></span></div>" + "<p class='text-center'>Skin Dark Pink</p>" + "</a>");
    skins_list.append(skin_yellow);

    var skin_darkblack = $("<li />", { style: "float:left; width: 50%; padding: 5px;" }).append("<a href='javascript:void(0);' onclick='change_skin(\"skin-darkblack\")' style='display: block; box-shadow: -1px 1px 2px rgba(0,0,0,0.0);' class='clearfix full-opacity-hover'>" + "<div><span style='display:block; width: 20%; float: left; height: 10px;' class='bg-purple-active'></span><span class='bg-purple' style='display:block; width: 80%; float: left; height: 10px;'></span></div>"
+ "<div><span style='display:block; width: 20%; float: left; height: 40px; background: #404e65;'></span><span style='display:block; width: 80%; float: left; height: 40px; background: #f4f5f7;'></span></div>" + "<p class='text-center'>Skin Darkblack</p>" + "</a>");
    skins_list.append(skin_darkblack);

    var skin_leafgreen = $("<li />", { style: "float:left; width: 50%; padding: 5px;" }).append("<a href='javascript:void(0);' onclick='change_skin(\"skin-leafgreen\")' style='display: block; box-shadow: -1px 1px 2px rgba(0,0,0,0.0);' class='clearfix full-opacity-hover'>" + "<div><span style='display:block; width: 20%; float: left; height: 10px;' class='bg-purple-active'></span><span class='bg-purple' style='display:block; width: 80%; float: left; height: 10px;'></span></div>"
+ "<div><span style='display:block; width: 20%; float: left; height: 40px; background: #404e65;'></span><span style='display:block; width: 80%; float: left; height: 40px; background: #f4f5f7;'></span></div>" + "<p class='text-center'>Skin Leafgreen</p>" + "</a>");
    skins_list.append(skin_leafgreen);
    var skin_orangebold = $("<li />", { style: "float:left; width: 50%; padding: 5px;" }).append("<a href='javascript:void(0);' onclick='change_skin(\"skin-orangebold\")' style='display: block; box-shadow: -1px 1px 2px rgba(0,0,0,0.0);' class='clearfix full-opacity-hover'>" + "<div><span style='display:block; width: 20%; float: left; height: 10px;' class='bg-purple-active'></span><span class='bg-purple' style='display:block; width: 80%; float: left; height: 10px;'></span></div>"
+ "<div><span style='display:block; width: 20%; float: left; height: 40px; background: #404e65;'></span><span style='display:block; width: 80%; float: left; height: 40px; background: #f4f5f7;'></span></div>" + "<p class='text-center'>Skin Yellow</p>" + "</a>");
    skins_list.append(skin_orangebold);
    var skin_navyblue = $("<li />", { style: "float:left; width: 50%; padding: 5px;" }).append("<a href='javascript:void(0);' onclick='change_skin(\"skin-navyblue\")' style='display: block; box-shadow: -1px 1px 2px rgba(0,0,0,0.0);' class='clearfix full-opacity-hover'>" + "<div><span style='display:block; width: 20%; float: left; height: 10px;' class='bg-purple-active'></span><span class='bg-purple' style='display:block; width: 80%; float: left; height: 10px;'></span></div>"
+ "<div><span style='display:block; width: 20%; float: left; height: 40px; background: #404e65;'></span><span style='display:block; width: 80%; float: left; height: 40px; background: #f4f5f7;'></span></div>" + "<p class='text-center'>Skin Navyblue</p>" + "</a>");
    skins_list.append(skin_navyblue);
    var skin_babypink = $("<li />", { style: "float:left; width: 50%; padding: 5px;" }).append("<a href='javascript:void(0);' onclick='change_skin(\"skin-babypink\")' style='display: block; box-shadow: -1px 1px 2px rgba(0,0,0,0.0);' class='clearfix full-opacity-hover'>" + "<div><span style='display:block; width: 20%; float: left; height: 10px;' class='bg-purple-active'></span><span class='bg-purple' style='display:block; width: 80%; float: left; height: 10px;'></span></div>"
+ "<div><span style='display:block; width: 20%; float: left; height: 40px; background: #404e65;'></span><span style='display:block; width: 80%; float: left; height: 40px; background: #f4f5f7;'></span></div>" + "<p class='text-center'>Skin Babypink</p>" + "</a>");
    skins_list.append(skin_babypink);
    demo_settings.append("<h4 class='text-light-blue' style='margin: 0 0 5px 0; border-bottom: 1px solid #ddd; padding-bottom: 15px;'>Skins</h4>");
    demo_settings.append(skins_list);
    demo.click(function () {
        if (!$(this).hasClass("open")) {
            $(this).animate({ "right": "250px" });
            demo_settings.animate({ "right": "0" });
            $(this).addClass("open");
        } else {
            $(this).animate({ "right": "0" });
            demo_settings.animate({ "right": "-250px" });
            $(this).removeClass("open");
        }
    });
    $("body").append(demo);
    $("body").append(demo_settings);
    setup();
});


function change_layout(cls) {
    $("body").toggleClass(cls);
    $.AdminLTE.layout.fixSidebar();
}
function change_skin(cls) {
    $.each(my_skins, function (i) {
        $("body").removeClass(my_skins[i]);
        $("#ctl00_mySelect1").removeClass(my_skins[i]);
    });
    $("body").addClass(cls);
    $("#ctl00_mySelect1").addClass(cls);
    store('skin', cls);

    Closepopup1();
    return false;
}
function store(name, val) {
    if (typeof (Storage) !== "undefined") {
        localStorage.setItem(name, val);
        document.cookie = name + "=" + (val || "") + '' + "; path=/";
    } else {
        alert('Please use a modern browser to properly view this template!');
    }
}
function get(name) {
    if (typeof (Storage) !== "undefined") {
        return localStorage.getItem(name);
    } else {
        alert('Please use a modern browser to properly view this template!');
    }
}
function setup() {
    var tmp = get('skin');
    if (tmp && $.inArray(tmp, my_skins) >= 0)
        change_skin(tmp);
}

function ClickColor() {
    $('#ctl00_BatchDropDownList option').each(function () {
        $('#ctl00_BatchDropDownList option').css('backgroundColor', '#888e96');
    });
}
function ColorChnage() {
    $('#ctl00_OrganizationDropDownList option').each(function () {
        $('#ctl00_OrganizationDropDownList option').css('backgroundColor', '#888e96');
    });

}


