var my_skins = ["skin-blue", "skin-black", "skin-red", "skin-yellow", "skin-purple", "skin-green"];
$(function () {
	var demo = $("<div />").css({
		position: "fixed",
		top: "115px",
		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='fa fa-question ' ></i>").addClass("no-print");
	var demo_settings = $("<div />").css({
		"padding": "10px",
		position: "fixed",
		top: "115px",
		right: "-450px",        
		background: "url('../../../Images/zsw-help-bg.gif')",
		border: "0px solid #ddd",
		"width": "450px",
		"z-index": "99999",
		"box-shadow": "0 1px 3px rgba(0,0,0,0.1)",
		height: "75%"
	}).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;'>Help Center</h4>"
        //    + "<div style=background-image:../../../Images/images.png;></div>"
        + "<div border: 1px solid #e9e9e9;background-color: #FFF;margin: 0 30px;> "
         + "<i class='fa fa-search'  ></i> &nbsp;&nbsp; <input type='text' style=width:94%> </div>"
        + "<br><br>"
          //font-weight:800;font-family:
		+ "<div id='div1' style='border-radius: 4px;border: 1px solid;background-color:#fff;height:210px;font-size:14px;font-family: arial;overflow:scroll;' class='text-light-blue';>"
        //+ "<table id='table1'>"
        // + "<tr><td><a href='javascript:;' onclick='LoadData();'>Student</a></tr></td>"
  
        

       
 
		  
           
        //    + "</table>"
		+ "</div>"
		 
	);
	


	var skins_list = $("<ul />", {"class": 'list-unstyled'}); 
	demo_settings.append(skins_list);
	demo.click(function () {
		if (!$(this).hasClass("open")) {    
		    $(this).animate({ "right": "450px" });
			demo_settings.animate({"right": "0"});
			$(this).addClass("open");
              
		} else {
			$(this).animate({"right": "0"});
			demo_settings.animate({ "right": "-450px" });
			$(this).removeClass("open");
			//("#table").remove();
		}
	});

	$("body").append(demo);
	$("body").append(demo_settings);
	LoadData();
	//setup();
});

function LoadData() {
    
    var uri = [{ "Url": "https://www.google.co.in", "Value": "Test" }, { "Url": "https://www.google.co.in", "Value": "Test" }, { "Url": "https://www.google.co.in", "Value": "Test" }, { "Url": "https://www.google.co.in", "Value": "Test" }];
    
    //$.getJSON(uri, function(data){ 
    
    //$.each(uri, function (key, item) { 
    var htmlText = '';
    
    for (var key in uri) {
        htmlText += "<i class='fa fa-hand-o-right' style='padding-left:10px;'></i><a target='_blank' style='padding-left:10px;'  href='" + uri[key].Url + "'>" + uri[key].Value + "</a> </br>";
         } 
  
    $("#div1").append(htmlText);
    //}); 
     
    
    
  

}