var imageTimeout;
var scaleTimeout;
var timeStep = 100;
var times = 4;
var selectedOuterContent;
var selectedInnerContent;

function HideNShowImage(img, time) {
    $("#" + img).hide();

    //clearTimeout(imageTimeout);
    imageTimeout = setTimeout("ShowControl('" + img + "')", time*timeStep);
}

function ShowControl(ctrl) {

    if ($.browser.msie)
        $("#" + ctrl).show().corner();
    else
        $("#" + ctrl).show();
}

function MoveAndScaleTimer(ctrl, leftStart, topStart, leftEnd, topEnd, time, header) {

    if (!$.browser.msie)
        Cufon.replace("#" + header)
    
    $("#" + ctrl).hide();

    $("#" + header).css("opacity", "0");
    $("#" + header).hide();
    
    var waitTime = time * timeStep;
    scaleTimeout = setTimeout("MoveAndScale('" + ctrl + "','" + topStart + "', '" + leftStart + "','" + topEnd + "', '" + leftEnd + "','" + header + "')", waitTime+10);

}

function MoveAndScale(ctrl, topStart, leftStart, topEnd, leftEnd, header) {
    
    var slideTime = 250;

    $("#" + ctrl).css({ top: topStart, left: leftStart });

    $("#" + ctrl).show();
    if ($.browser.msie)
        $("#" + ctrl).animate({
            width: "353px",
            height: "234px",
            top: topEnd,
            left: leftEnd,
            opacity: "0.6"
        }, slideTime).corner();
    else
        $("#" + ctrl).animate({
            width: "353px",
            height: "234px",
            top: topEnd,
            left: leftEnd,
            opacity: "0.6"
        }, slideTime);

        $("#" + header).show().delay(500).animate({
            opacity: "1"
        }, 1000);

        times += 1;
}

function InitializeContent(outerCtrl, innerCtrl, isLink, linkBg, linkArrow) {

    //Cufon.replace("#" + innerCtrl);

    AddClass(innerCtrl, "myATag");

    $("#" + outerCtrl).css("opacity", "0");
    
    $("#" + innerCtrl).slideUp(0);

    if ($.browser.msie)
        $("#" + outerCtrl).corner();

    $("#" + outerCtrl).mouseenter(function() {

        if (times > 7) {

            if (selectedOuterContent != null)
                $("#" + selectedOuterContent).css("opacity", "0");

            if (selectedInnerContent != null && selectedInnerContent != innerCtrl)
                $("#" + selectedInnerContent).slideUp(0);

            $("#" + outerCtrl).css("opacity", "1");

            if ($.browser.msie)
                document.getElementById(outerCtrl).style.removeAttribute('filter');

            if (innerCtrl != selectedInnerContent)
                $("#" + innerCtrl).slideDown(1000);

            selectedOuterContent = outerCtrl;
            selectedInnerContent = innerCtrl;

            if (isLink = "true") {

                MoveAndLoopLink(linkBg, linkArrow);

            }
        }
    });

    $("#" + outerCtrl).mouseleave(function() {
        $("#" + selectedInnerContent).stop(true, true);
    });
}

function MoveAndLoopLink(linkBg, linkArrow) {

    $("#" + linkBg).css({ opacity: 0, marginLeft: "0px" });


    $("#" + linkBg).animate({
        opacity: 1,
        marginLeft: "12px"
    }, 300, "swing");

    $("#" + linkArrow).everyTime("700ms", linkArrow, function() {
    $("#" + linkArrow).animate({
            marginLeft: "7px"
        },300, "swing").animate({
            marginLeft: "0px"
        }, 200, "swing")
    });

}


var linkid = 0

function AddClass(ctrl, className) {
    
    AddClassR(ctrl, className, $("#" + ctrl).html());

    var newHtml = $("#" + ctrl).html();

    var regex = new RegExp('<temp', 'gi');
    newHtml = newHtml.replace(regex, "<a");

    var regex = new RegExp('</temp>', 'gi');
    newHtml = newHtml.replace(regex, "</a>");

    $("#" + ctrl).html(newHtml);
}

function AddClassR(ctrl, className, oldHtml) {

    linkid += 1;

    var regex = new RegExp('<a', 'i');
    var result = oldHtml.replace(regex, "<temp id=\"link_" + linkid + "\" onmouseover=\"javascript:arrowanim(" + linkid + ");\" onmouseout=\"javascript:stoparrowanim(" + linkid + ");\" class=\"" + className + "\"");

    var regex = new RegExp('</a>', 'i');
    var result = result.replace(regex, "</temp><img id=\"img_" + linkid + "\" class=\"linkarrow\" src=\"Images/linkarrow.png\" />");


    if (oldHtml != result) {
        $("#" + ctrl).html(result);
        AddClassR(ctrl, className, result);
    }
}

function arrowanim(id) {

    $("#img_" + id).show();
    $("#img_" + id).css({ opacity: 0 });

    $("#img_" + id).animate({
        marginLeft: "14px",
        opacity:1
    }, 400).animate({
        marginLeft: "5px"
    }, 300);
    
    $("#img_" + id).everyTime("700ms", "img" + id, function() {
        $("#img_" + id).animate({
            marginLeft: "14px"
        }, 400).animate({
            marginLeft: "5px"
        }, 300)
    });
}

function stoparrowanim(id) {

    $("#img_" + id).stopTime("img" + id);
    $("#img_" + id).css({ marginLeft: "8px" });
    $("#img_" + id).hide();

}