function Banner(title, imgId, goToUrl) {
    this.Title = title;
    this.ImgId = imgId;
    this.Variations = new Array();
    this.CurrentVariation = 0;
    this.GoToUrl = goToUrl;
}
function PadZeros(number, length) {
    var str = '' + number;
    while (str.length < length) {
        str = '0' + str;
    }
    return str;
}

function BannerVariation(previewUrl, color, url) {
    this.Url = url;
    this.ThumbnailUrl = previewUrl;
    this.Color = color;
    this.Alt = '';
    this.UniqueId;

    // get unique id
    var name = '';
    while (currentIdCount < 2000) {
        name = 'swatch' + PadZeros(currentIdCount, 4);
        if (document.getElementById(name) == null) {
            this.UniqueId = name;
            currentIdCount++;
            break;
        }
        currentIdCount++;
    }
}

function displayBanners() {
    //maincontainer
    mainDivContainer = document.getElementById("maincontainer");


    if (allBanners != null) {
        var len = allBanners.length;
        var currentBanTable = null;
        for (c = 0; c < len; c++) {
            CreateBannerTable(allBanners[c]);
            counter++;
        }
        AddListeners();
    }

}
function LoadBannerColor(e) {
    var eventObj = getEventTarget(e);
    var bannerVariation = GetBannerVariationByUniqueId(eventObj.id);
    var imgElement = document.getElementById(bannerVariation.ImgId);
    imgElement.src = bannerVariation.BannerVariation.ThumbnailUrl;
}
function GetBannerByImgId(uniqueId) {
    var len = allBanners.length;
    for (f = 0; f < len; f++) {
        if (uniqueId == allBanners[f].ImgId) return allBanners[f];
    }
    return null;
}
function AddListeners() {
    var len = allBanners.length;
    for (d = 0; d < len; d++) {
        var bVariations = allBanners[d].Variations;

        for (e = 0; e < bVariations.length; e++) {
            // add listener
            hookEvent(bVariations[e].UniqueId, 'click', LoadBannerColor);
        }
    }
}

function hookEvent(element, eventName, callback) {
    if (typeof (element) == "string")
        element = document.getElementById(element);
    if (element == null)
        return;
    if (element.addEventListener)
        element.addEventListener(eventName, callback, false);
    else if (element.attachEvent)
        element.attachEvent("on" + eventName, callback);
}
function getEventTarget(e) {
    if (!e)
        e = window.event;
    if (e.target)
        return e.target;
    return e.srcElement;
}
function GetBannerVariationByUniqueId(uniqueId) {
    var len = allBanners.length;
    for (f = 0; f < len; f++) {
        var bVariations = allBanners[f].Variations;
        var len2 = bVariations.length;
        for (g = 0; g < len2; g++) {
            // add listener
            if (bVariations[g].UniqueId == uniqueId) {
                allBanners[f].CurrentVariation = g;
                var returnObj = { ImgId: allBanners[f].ImgId, BannerVariation: bVariations[g] };
                return returnObj;
            }
        }
    }
    return null;
}
function CreateBannerTable(currentBanner) {

    // create table
    var mainTable = null;
    mainTable = AddDefaultTableAttributes(document.createElement('table'));
    var tbod = document.createElement('tbody');

    mainTable.className = 'BannerSelector';

    // first row
    var firstTr = document.createElement('tr');
    var topTd = document.createElement('td');

    var topTable = AddDefaultTableAttributes(document.createElement('table'));
    var topTableTbody = document.createElement('tbody');
    var topTr = document.createElement('tr');
    topTr.appendChild(CreateBlankTd('Top'));
    topTr.appendChild(CreateBlankTd('RightSide TopRightCorner'));
    topTableTbody.appendChild(topTr);

    topTable.appendChild(topTableTbody);

    topTd.appendChild(topTable);
    firstTr.appendChild(topTd);
    tbod.appendChild(firstTr);

    // second row
    var firstTr2 = document.createElement('tr');
    var topTd2 = document.createElement('td');

    var topTable2 = AddDefaultTableAttributes(document.createElement('table'));
    var topTbody2 = document.createElement('tbody');
    var topTr2 = document.createElement('tr');

    topTr2.appendChild(CreateBlankTd('LeftBody'));
    if (currentBanner.Variations != null) {
        topTr2.appendChild(CreateTdBody(currentBanner.Title, currentBanner.Variations[0].ThumbnailUrl, currentBanner.Variations[0].Alt,
        currentBanner.ImgId, currentBanner.Variations));
    }

    topTr2.appendChild(CreateBlankTd('RightSide MidRightSide'));
    topTbody2.appendChild(topTr2);

    topTable2.appendChild(topTbody2);

    topTd2.appendChild(topTable2);
    firstTr2.appendChild(topTd2);
    tbod.appendChild(firstTr2);

    // third row
    var firstTr3 = document.createElement('tr');
    var topTd3 = document.createElement('td');

    var topTable3 = AddDefaultTableAttributes(document.createElement('table'));
    var topTbody3 = document.createElement('tbody');
    var topTr3 = document.createElement('tr');

    topTr3.appendChild(CreateBlankTd('BottomLeft BottomLeftCorner'));
    topTr3.appendChild(CreateBlankTd('Bottom MidBottom'));
    topTr3.appendChild(CreateBlankTd('RightSide BottomRightCorner'));
    topTbody3.appendChild(topTr3);

    topTable3.appendChild(topTbody3);

    topTd3.appendChild(topTable3);
    firstTr3.appendChild(topTd3);
    tbod.appendChild(firstTr3);

    mainTable.appendChild(tbod);
    mainDivContainer.appendChild(mainTable);
}
function AddDefaultTableAttributes(tableElement) {
    tableElement.setAttribute('cellpadding', '0');
    tableElement.setAttribute('cellspacing', '0');
    tableElement.setAttribute('border', '0');
    return tableElement;
}
function CreateBlankTd(eleClass) {
    var tmptd = document.createElement('td');
    tmptd.className = eleClass;
    tmptd.innerHTML = '&nbsp;';
    return tmptd;
}
function CreateTdBody(title, bannerUrl, alt, imgId, banners) {
    var tmptd = document.createElement('td');
    var tmpdiv = document.createElement('div');
    tmpdiv.className = 'Body';
    var titleH1 = document.createElement('h1');
    titleH1.innerHTML = title;
    tmpdiv.appendChild(titleH1);

    var bannerImgWrapper = document.createElement('div');
    bannerImgWrapper.className = 'ImgWrapper';
    var bannerImg = document.createElement('img');
    bannerImg.setAttribute('src', bannerUrl);
    bannerImg.setAttribute('alt', alt);
    bannerImg.setAttribute('id', imgId);
    bannerImgWrapper.appendChild(bannerImg);
    tmpdiv.appendChild(bannerImgWrapper);
    tmpdiv.innerHTML += '<br />';

    var chooseColorDiv = document.createElement('div');
    chooseColorDiv.className = 'Text';
    chooseColorDiv.innerHTML = 'Choose color...';
    tmpdiv.appendChild(chooseColorDiv);

    var swatchesUl = document.createElement('ul');
    swatchesUl.className = 'Swatches';
    for (i = 0; i < banners.length; i++) {
        var swatchesLi = document.createElement('li');

        var swatchesDiv = document.createElement('div');
        swatchesDiv.className = 'Swatch';
        swatchesDiv.setAttribute('id', banners[i].UniqueId);

        if (i == 0) swatchesLi.className = 'FirstLi';

        try {
            swatchesDiv.style.background = banners[i].Color;
        }
        catch (err) {
            alert("could not set style.background of object " + swatchesDiv.id + " to " + banners[i].Color +
                    ".\r\r Make sure the style.background is being set to a valid value.");
        }

        swatchesDiv.innerHTML = '&nbsp;';

        swatchesLi.appendChild(swatchesDiv);
        swatchesUl.appendChild(swatchesLi);

    }

    var ulWrapperDiv = document.createElement('div');
    ulWrapperDiv.appendChild(swatchesUl);

    tmpdiv.appendChild(ulWrapperDiv);
    var generateHtmlP = document.createElement('p');
    var generateHtmlA = document.createElement('a');
    generateHtmlA.setAttribute('href', '#');
    generateHtmlA.className = 'generatedCodeDiv';

    generateHtmlA.onclick = function() {
        GenerateHtml(imgId);

    };
    generateHtmlA.innerHTML = '<img src="http://www.employers-advantage.com/images/banner-code.jpg" width="126" height="44" />';
    generateHtmlP.appendChild(generateHtmlA);

    tmpdiv.appendChild(generateHtmlP);
    tmptd.appendChild(tmpdiv);
    return tmptd;
}
function GenerateHtml(imgId) {

    var banner = GetBannerByImgId(imgId);
    if (banner != null) {
        var htmlTextArea = document.getElementById("txtHtmlCode");
        htmlTextArea.value = "<a href='" + banner.GoToUrl + "?ref=" + userId + "' target='_blank' title=''><img src='" + banner.Variations[banner.CurrentVariation].Url + "' alt='' border=0 /></a>";
        var bannerDI = document.getElementById("bannerdispimg");
        bannerDI.src = banner.Variations[banner.CurrentVariation].Url;
    }
}