var cards = null;
var screenWidth = 0;
var intervalId;
var handBlinkIntervalId;
var handVisible = false;
var handBlinkCounter = 0;

function Reposition() {
    if (screenWidth != document.body.clientWidth) {
        cards.Draw();
        screenWidth = document.body.clientWidth;
    }
}

function HandBlinker(OnZorgEntry) {

    this.left = OnZorgEntry.left + OnZorgEntry.width - 8;
    this.top = OnZorgEntry.top + 5;

    this.imgElement = document.getElementById("imgHandBlink");
    this.imgElement.style.position = "absolute";
    this.imgElement.style.left = this.left + "px";
    this.imgElement.style.top = this.top + "px";
    this.imgElement.style.zIndex = 300;
    this.counter = 0;
        
    var thisObj = this;

    this.timerId = setInterval(
        function() {
            thisObj.imgElement.style.display = thisObj.imgElement.style.display == "" ? "none" : "";
            thisObj.counter++;
            if (thisObj.counter > 8) {
                clearInterval(thisObj.timerId);
                thisObj.imgElement.style.display = "none";
            }
        }, 200)

}


function MoveDiv(elm, step) {
    var pos = elm.style.top.replace("px", "") * 1;
    elm.style.top = ((elm.style.top.replace("px", "") * 1) + step) + "px";
}

function ZorgVerzekering(idx, logo, pakket, punten, standaardpremie, kortingbedrag, kiesgoedpremie) {
    this.idx = idx;
    this.logo = logo;
    this.pakket = pakket;
    this.standaardpremie = standaardpremie;
    this.kortingbedrag = kortingbedrag;
    this.kiesgoedpremie = kiesgoedpremie;

    this.left = 0;
    this.top = 0;
    this.width = 0;
    this.height = 0;

    this.WriteHtml = function WriteHtml(left, top, width, height, popupHeight) {

        this.left = left;
        this.top = top;
        this.width = width;
        this.height = height;

        var pos = "left:" + left + "px;top:" + top + "px;width:" + width + "px;height:" + height + "px;z-index:" + (100 - this.idx);
        var onMouseOver = "onmouseover=\"this.style.top = ((this.style.top.replace('px','') * 1) - " + popupHeight + ") + 'px';this.style.backgroundColor='#ffffff';";
        onMouseOver += "document.getElementById('smallpakket" + this.idx + "').style.display='none'\"";
        var onMouseOut = "onmouseout=\"this.style.top = ((this.style.top.replace('px','') * 1) + " + popupHeight + ") + 'px';this.style.backgroundColor='#eeeeee';";
        onMouseOut += "document.getElementById('smallpakket" + this.idx + "').style.display=''\"";
        var onClick = "onclick=\"GetProductEntry(" + idx + ")\"";

        var outHtml = "<div " + onClick + " " + onMouseOver + " " + onMouseOut + "style=\"position:absolute;text-align:left;cursor:pointer;cursor:hand;" + pos + ";background-color:#eeeeee;border: solid 1px #cccccc\">";
        outHtml += "<span id=\"smallpakket" + this.idx + "\" style=\"color:#555555;font-size:10px\">" + pakket + "</span>";
        outHtml += "<table id=\"cardTable" + this.idx + "\" style=\"padding:0px\" width=\"100%\" border=\"0\">";
        outHtml += "<tr>";
        outHtml += "<td colspan=\"2\" valign=\"top\" class=\"cardsmalltext\"><u><b>" + pakket + "</b></u></td>";
        outHtml += "<td rowspan=\"3\" valign=\"top\" align=\"right\"><img src=\"" + logo + "\"></td>";
        outHtml += "</tr><tr>";
        outHtml += "<td valign=\"top\" class=\"cardsmalltext\">punten: " + (punten == "0" ? "n.v.t." : punten) + "</td>";
        //outHtml += "<td valign=\"top\" class=\"cardsmalltext\">standaardpremie:" + standaardpremie + "<br/>";
        //outHtml += "kortingsbedrag:" + kortingbedrag + "</td>";

        if (kiesgoedpremie!="") {
            outHtml += "<td valign=\"top\" class=\"cardsmalltext\">kiesgoedpremie: " + kiesgoedpremie + "</td>";
        }

        outHtml += "</tr><tr>";
        outHtml += "<td colspan=\"2\">&nbsp;</td>";
        outHtml += "</tr>";
        outHtml += "</table>";
        outHtml += "</div>";

        return outHtml;
    }

    this.msgbox = function msgbox(msg) { alert(msg); }
}

function Kaartenbak(ContentDiv, ContentTable) {
    this.verzekerings = new Array();
    this.ContentDiv = ContentDiv;
    this.ContentTable = ContentTable;
    this.ShowCount = 4;
    this.Enable = true;
    this.HandBlinker = null;
  
    ContentTable.style.width = "800px";

    // positioneer div
    this.ContentDiv.style.position = "absolute";
    this.ContentDiv.style.zIndex = 200;
    this.ContentDiv.style.backgroundColor = "#ffffff";

    this.Draw = function Draw() {

        if (!this.Enable)
            return;

        this.width = 800;
        this.height = 800;

        this.ContentTable.style.width = this.width + "px";
        this.ContentTable.style.height = this.height + "px";

        this.popupHeight = 50;
        this.heightDiff = this.ShowCardsTotal() > 15 ? 5 : 15;
        this.startTop = this.ShowCardsTotal() * this.heightDiff + this.popupHeight;
        this.startLeft = ((document.body.clientWidth / 2) - (this.width / 2));


        this.ContentDiv.style.width = this.width;
        this.ContentDiv.style.height = this.height;
        this.ContentDiv.style.left = this.startLeft + "px";
        this.ContentDiv.style.top = this.startTop + "px";

        this.WriteHtml();

    }

    this.ShowCardsTotal = function ShowCardsTotal() {
        
        return this.ShowCount == -1 || this.verzekerings.length <= this.ShowCount ? this.verzekerings.length : this.ShowCount;
    }

    this.WriteHtml = function WriteHtml() {
        var left = this.startLeft;
        var top = this.startTop;
        var outHtml = "";

        var total = this.ShowCardsTotal();

        for (var i = 0; i < total; i++) {
            left += this.heightDiff;
            top -= this.heightDiff;

            outHtml += this.verzekerings[i].WriteHtml(left, top, this.width, this.height, this.popupHeight);

            if (this.HandBlinker == null) {
                this.HandBlinker = new HandBlinker(this.verzekerings[i]);
            }

        }
        document.getElementById("Cards").innerHTML = outHtml;
        document.getElementById("Cards").style.display = '';
    }

    ContentDiv.style.display = '';
}


function doLoad(ZorgEntries) {
    cards = new Kaartenbak(document.getElementById("ContentDiv"), outerTable);
    cards.verzekerings = ZorgEntries;
    cards.Draw();

    intervalId = setInterval("Reposition()", 500);

}

function showCards(Count) {
    cards.ShowCount = Count;
    cards.Draw();
}

function StopInterval() {
    try {
        cards.Enable = false;
        clearInterval(intervalId);
    }
    catch (e) { }
    
}