function SelectableImage(newId, newName, newPrompt, newImgSrc) {
    this.id = newId;
    this.name = newName;
    this.prompt = newPrompt;
    this.imgSrc = newImgSrc;
}

var wideFirst;

function InitialiseSelector(showWideFirst) {
    wideFirst = showWideFirst;

    $.ajax({
        type: "POST",
        url: "WebServices/HjStyleSelectorService.asmx/GetAllItems",
        data: "{}",
        contentType: "application/json; charset=utf-8",
        dataType: "json",
        success: function(response) {
            GotItems(response);
        },
        error: function(xhr, ajaxOptions, thrownError) {
            document.getElementById(targetIdToPopulate).innerHTML = '<center class="HjStyleSelectorWrapper"><h2>Unable to retrieve Styles</h2><br /></center>';
        }
    });
}

function GotItems(response) {

    var concat = response.d;
    var tmpArr = [];
    tmpArr = concat.split('^_^');

    wideConcat = tmpArr[0];
    tallConcat = tmpArr[1];

    var wideConcatArr = [];
    if (wideConcat != "") { wideConcatArr = wideConcat.split('|'); }

    var tallConcatArr = [];
    if (tallConcat != "") { tallConcatArr = tallConcat.split('|'); }

    for (i = 0; i < wideConcatArr.length; i++) {
        var tmp = wideConcatArr[i];
        var tmpArr = [];
        tmpArr = tmp.split('0_0');
        wideItems[wideItems.length] = new SelectableImage(tmpArr[0], tmpArr[1], tmpArr[2], tmpArr[3]);
    }

    for (i = 0; i < tallConcatArr.length; i++) {
        var tmp = tallConcatArr[i];
        var tmpArr = [];
        tmpArr = tmp.split('0_0');
        tallItems[tallItems.length] = new SelectableImage(tmpArr[0], tmpArr[1], tmpArr[2], tmpArr[3]);
    }

    while (tallItems.length % 3 != 0) {
        tallItems[tallItems.length] = new SelectableImage(-1, 'padding', 'paddingElement', '');
    }
    if(wideItems.length % 2 != 0) {
        wideItems[wideItems.length] = new SelectableImage(-1, 'padding', 'paddingElement', '');
    }
    
    document.getElementById(targetIdToPopulate).innerHTML = '';
    if (wideFirst == true) {
        PopulateTargetZone(wideItems, false, 2);
        PopulateTargetZone(tallItems, true, 3);
    } else {
        PopulateTargetZone(tallItems, true, 3);
        PopulateTargetZone(wideItems, false, 2);
    }

    if (wideItems.length + tallItems.length == 1) {
        if (wideItems.length == 1) {
            Select(wideItems[0]);
        } else {
            Select(tallItems[0]);
        }
    }
}

function PopulateTargetZone(arr, isTall, cols) {
    for (i = 0; i < arr.length; i++) {
        document.getElementById(targetIdToPopulate).appendChild(HydrateSelectableImage(arr[i], isTall));
        if ((i + 1) % cols == 0 & i != 0) {
            document.getElementById(targetIdToPopulate).appendChild(GetRowDivider());
        }
    }
}

function GetRowDivider() {
    var newDiv = document.createElement('div');
    newDiv.className = RowDividerCssClass;
    return newDiv;
}

// Hydrate a SelectableImage object based on its own properties and the global settings above
var lastObj;

function HydrateSelectableImage(obj, isTall) {

    if (obj.id == -1) {
        // Creaete a fake item just for spacing purposes
        var newImg = document.createElement('img');
        newImg.src = imgDir + lastObj.imgSrc;
        newImg.style.visibility = 'hidden';
        
        // Create the surrounding div, add its associated mouse events and give it the associated Style Id 
        var newDiv = document.createElement('div');
        newDiv.className = normalCssClassWide;
        if (isTall == true) { newDiv.className = 'tallItem'; }
        newDiv.appendChild(newImg);
        newDiv.style.cursor = 'default';
        
    } else {
        //create a real item
        // Creaete the inner image
        lastObj = obj;
        var newImg = document.createElement('img');
        newImg.src = imgDir + obj.imgSrc;


        // Create the surrounding div, add its associated mouse events and give it the associated Style Id 
        var newDiv = document.createElement('div');
        newDiv.id = obj.id;
        newDiv.className = normalCssClassWide;
        if (isTall == true) { newDiv.className = normalCssClassTall; }
        newDiv.onmouseover = function(evt) { Highlight(obj.id); };
        newDiv.onclick = function(evt) { SelectHjStyle(obj); };
        newDiv.onmouseout = function(evt) { RevertAll(false); };
        newDiv.appendChild(newImg);

        // Uncomment the next section to include the styles name below the preview image.
        /*
        var newNameDiv = document.createElement('div');
        newNameDiv.className = 'itemLabel';
        newNameDiv.innerHTML = obj.prompt;
        newDiv.appendChild(newNameDiv);
        */
    }
    return newDiv;
}

// RevertAll others divs and shows as selected the div with the passed in id
function SelectHjStyle(obj) {
    RevertAll(true);
    
    switch (document.getElementById(obj.id).className) {
        case normalCssClassTall:
            document.getElementById(obj.id).className = selectedCssClassTall;
            break;
        case normalCssClassWide:
            document.getElementById(obj.id).className = selectedCssClassWide;
            break;
    }
    document.getElementById(UiSelectedItemId).value = obj.id;
    document.getElementById(UiSelectedStyleName).value = obj.name;
    document.getElementById(UiSelectedStyleNamePrompt).value = obj.prompt;
    document.getElementById(UiItemSelected).click();
    BlockPage();
}

// Conditionally highlights the element with the passed in id
function Highlight(id) {
    RevertAll(false);

    switch (document.getElementById(id).className) {
        case normalCssClassTall:
            document.getElementById(id).className = highlightedCssClassTall;
            break;
        case normalCssClassWide:
            document.getElementById(id).className = highlightedCssClassWide;
            break;
    }
    
}

// Reverts all divs having Id's equal to those within the tall or wide object arrays to the normalCssClass, ignoringSelected items conditionally
function RevertAll(ignoreSelected) {
    for (i = 0; i < tallItems.length; i++) {
        Revert(tallItems[i].id, ignoreSelected);
    }
    for (i = 0; i < wideItems.length; i++) {
        Revert(wideItems[i].id, ignoreSelected);
    }
}
function Revert(id, overWriteSelected) {
    if (id != -1) { 
        if (overWriteSelected == true) {
            switch (document.getElementById(id).className) {
                case highlightedCssClassTall:
                    document.getElementById(id).className = normalCssClassTall;
                    break;
                case selectedCssClassTall:
                    document.getElementById(id).className = normalCssClassTall;
                    break;
                case normalCssClassTall:
                    break;
                default:
                    document.getElementById(id).className = normalCssClassWide;
                    break;
            }
        } else {
            switch (document.getElementById(id).className) {
                case highlightedCssClassTall:
                    document.getElementById(id).className = normalCssClassTall;
                    break;
                case highlightedCssClassWide:
                    document.getElementById(id).className = normalCssClassWide;
                    break;
            }
        }
    }
}