var fadetovalue = 0.6;
var HoverDelay = 300;

$(document).ready(function () {

    if (!$("#footer").hasClass("footerOffset220")) {
        $("#footer").addClass("footerOffset220");
    }

    $("img.ImageList").each(function () {
        var imgid = '#' + this.id;
        var divdetailid = '#' + this.id.replace('img', 'divdetail');
        //$(imgid).fadeTo("fast", fadetovalue);

        $(imgid).hover(function () {
            //Hover Mouse Enter Function
            var timer = null;
            hideAllDetail();
            $(imgid).addClass('imHovered');

            if (timer) {
                clearTimeout(timer);
            }
            timer = setTimeout(function () {
                if ($(imgid).hasClass('imHovered')) {
                    FadeImages(imgid);
                    //$(imgid).fadeTo("fast", 1.0);
                    showDetail(divdetailid);
                }
            }, HoverDelay + 200);
        }, function () {
            //Hover Mouse Leave Function
            var timer = null;
            $(imgid).removeClass('imHovered');
            if (timer) {
                clearTimeout(timer);
            }
            timer = setTimeout(function () {
                if (!$(divdetailid).hasClass('imHovered') && !$(imgid).hasClass('imHovered')) {
                    //$(imgid).fadeTo("fast", fadetovalue);
                    BrightenImages();
                    hideDetail(divdetailid);
                }
            }, HoverDelay - 200);
        });
    });

    $("div.DivPopup").each(function () {
        var imgid = '#' + this.id.replace('divdetail', 'img');
        var divdetailid = '#' + this.id;
        var timer = null;
        $(divdetailid).hover(function () {
            //Hover Mouse Enter Function
            $(divdetailid).addClass('imHovered');
        }, function () {
            //Hover Mouse Leave Function
            $(divdetailid).removeClass('imHovered');
            if (timer) {
                clearTimeout(timer);
            }
            timer = setTimeout(function () {
                if (!$(divdetailid).hasClass('imHovered') && !$(imgid).hasClass('imHovered')) {
                    hideDetail(divdetailid);
                    //$(imgid).fadeTo("fast", fadetovalue);
                    BrightenImages();
                }
            }, HoverDelay - 200);
        });
    });



});

function AddRowColumnClasses(divdetailid) {
    $("#divDetailContainer").addClass("DivDetailRow" + GetRow(divdetailid));
    $("#divDetailContainer").addClass("DivDetailColumn" + GetColumn(divdetailid));
}

function assignImage(imgid, imgurl) {
    $(imgid).attr("src", imgurl);
}

function BrightenImages() {
    $("img.ImageList").each(function () {
        var imgid = '#' + this.id;
        $(imgid).fadeTo("fast", 1.0);
    });
}

function FadeImages(currentimgid) {
    $("img.ImageList").each(function () {
        var imgid = '#' + this.id;
        if (currentimgid != imgid) {
            $(imgid).fadeTo("fast", fadetovalue);
        }
    });
}

function ClearRowColumnClasses() {
    if ($("#divDetailContainer").hasClass("DivDetailRow1")) $("#divDetailContainer").removeClass("DivDetailRow1");
    if ($("#divDetailContainer").hasClass("DivDetailRow2")) $("#divDetailContainer").removeClass("DivDetailRow2");
    if ($("#divDetailContainer").hasClass("DivDetailRow3")) $("#divDetailContainer").removeClass("DivDetailRow3");
    if ($("#divDetailContainer").hasClass("DivDetailRow4")) $("#divDetailContainer").removeClass("DivDetailRow4");
    if ($("#divDetailContainer").hasClass("DivDetailRow5")) $("#divDetailContainer").removeClass("DivDetailRow5");

    if ($("#divDetailContainer").hasClass("DivDetailColumn1")) $("#divDetailContainer").removeClass("DivDetailColumn1");
    if ($("#divDetailContainer").hasClass("DivDetailColumn2")) $("#divDetailContainer").removeClass("DivDetailColumn2");
    if ($("#divDetailContainer").hasClass("DivDetailColumn3")) $("#divDetailContainer").removeClass("DivDetailColumn3");
    if ($("#divDetailContainer").hasClass("DivDetailColumn4")) $("#divDetailContainer").removeClass("DivDetailColumn4");
    if ($("#divDetailContainer").hasClass("DivDetailColumn5")) $("#divDetailContainer").removeClass("DivDetailColumn5");
    if ($("#divDetailContainer").hasClass("DivDetailColumn6")) $("#divDetailContainer").removeClass("DivDetailColumn6");
    if ($("#divDetailContainer").hasClass("DivDetailColumn7")) $("#divDetailContainer").removeClass("DivDetailColumn7");
    if ($("#divDetailContainer").hasClass("DivDetailColumn8")) $("#divDetailContainer").removeClass("DivDetailColumn8");
    if ($("#divDetailContainer").hasClass("DivDetailColumn9")) $("#divDetailContainer").removeClass("DivDetailColumn9");
    if ($("#divDetailContainer").hasClass("DivDetailColumn10")) $("#divDetailContainer").removeClass("DivDetailColumn10");
    if ($("#divDetailContainer").hasClass("DivDetailColumn11")) $("#divDetailContainer").removeClass("DivDetailColumn11");
}

function showDetail(divdetailid) {
    ClearRowColumnClasses();
    AddRowColumnClasses(divdetailid);
    $("#divDetailContainer").addClass("MoveUp");
    $("#divDetailContainer").removeClass("MoveBack");
    $(divdetailid).fadeIn("fast");
    if (!$("#divDetailContainer").hasClass("MoveUp")) {
        $("#divDetailContainer").addClass("MoveUp");
        $("#divDetailContainer").removeClass("MoveBack");
    }
}

function hideDetail(divdetailid) {
    $(divdetailid).fadeOut("fast");
    $("#divDetailContainer").addClass("MoveBack");
    $("#divDetailContainer").removeClass("MoveUp");
}

function hideAllDetail() {
//    $("#divDetailContainer").addClass("MoveBack");
//    $("#divDetailContainer").removeClass("MoveUp");
    for (i = 1; i < 48; i++) {
        $("#divdetail" + i).fadeOut("fast");
    }
}

function GetRow(divdetailid) {
    var myid = parseInt(divdetailid.replace('#divdetail', ''));
    var row = 0;
    if (myid > 0 && myid < 12) {
        row = 1;
    }
    else if (myid > 11 && myid < 23) {
        row = 2;
    }
    else if (myid > 22 && myid < 34) {
        row = 3;
    }
    else if (myid > 33 && myid < 37) {
        row = 4;
    }
    else if (myid > 36 && myid < 48) {
        row = 5;
    }
    return row;
}

function GetColumn(divdetailid) {
    var myid = parseInt(divdetailid.replace('#divdetail', ''));
    var column = 0;
    if (myid == 34) {
        column = 9;
    }
    else if (myid == 35) {
        column = 10;
    }
    else if (myid == 36) {
        column = 11;
    }
    else if (myid > 36 && myid < 48) {
        column = (myid - 3) % 11;
        if (column == 0) column = 11;
    }
    else {
        column = myid % 11;
        if (column == 0) column = 11;
    }
    return column;
}