var urlArray = new Array();
var amountOfSquares;
var html = "";

$(document).ready(function() {
    $.ajax({
        type: "POST",
        url: siteURL + "UI/Pages/SlideShow.aspx/GetImageUrls",
        data: "{'id':'" + pageID + "'}",
        contentType: "application/json; charset=utf-8",
        dataType: "json",
        success: function(msg) {
			try {
				var urls = msg.d[0];
				amountOfSquares = msg.d.length;

				for (var i = 0; i < msg.d.length; i++) {
					urlArray[i] = msg.d[i];
				}

				var link = document.createElement('img');
				link.setAttribute('src', urls);
				link.setAttribute('style', "width: 545px; height: 220px");
				var divAppend = document.getElementById('SlideShow');

				if (divAppend != null) {
					divAppend.appendChild(link);
					createSquares();
				}            
			} catch (e) {}
			
        }
    });
});  

function clickSquare(square, id) {
    document.getElementById('SlideShow').innerHTML = "<img src=\"" + urlArray[id] + "\" style=\"width: 545px; height: 220px\" />";

    for (var i = 0; i < amountOfSquares; i++) {
        if (i != id) {
            document.getElementById('square_' + i).style.backgroundColor = "#FFFFFF";
        } else {
        document.getElementById('square_' + i).style.backgroundColor = "#0088BA";
        }
    }
}

function createSquares() {
    for (var i = 0; i < amountOfSquares; i++) {
        if (i == 0) {
            html += "<div class=\"squareOn\" onmouseover=\"\" onmouseout=\"\" onclick=\"clickSquare(this," + i + ")\" id=\"square_" + i + "\"></div>";
        } else {
            html += "<div class=\"squareOff\" onmouseover=\"\" onmouseout=\"\" onclick=\"clickSquare(this," + i + ")\" id=\"square_" + i + "\"></div>";
        }
    }

    document.getElementById('SlideShowButtons').innerHTML = html;
}