function HookHomePage() {
    $(window).load(function () {
        $("#Bottles img").each(function () {
            $(this).attr("aspectRatio", (this.clientWidth / this.clientHeight).toString());
        });
        
        showBottle('1', 0);
        hideBottle('2', 0);
    });

    $(document).ready(function () {
        $("#Bottles img").click(function (event) {
            window.location = $(this).attr("href");
        });

        setInterval(
            function () {
                if (blueBottleHasFocus) {
                    showBottle('2', 500);
                    hideBottle('1', 500);
                }
                else {
                    showBottle('1', 500);
                    hideBottle('2', 500);
                }

                blueBottleHasFocus = !blueBottleHasFocus;
            },
            10000
        );
    });
}

var blueBottleHasFocus = true;

function hideBottle(number, et) {
    var aspect = parseFloat($('#Bottle' + number).attr("aspectRatio"));
    var width = (aspect * bottleData.littlePos.height).toString();
    width = width.substring(0, width.indexOf(".", 0));

    $('#Bottle' + number).animate(
        {
            left: bottleData.littlePos.x,
            top: bottleData.littlePos.y,
            height: bottleData.littlePos.height,
            width: width
        },
        et,
        function () {
            $('#Bottle' + number).css('z-index', 1);
            animate_op($('#Copy' + number), 10, 0);
            //animate_op($('#Image' + number), 10, 0);
            $('#Image' + number.toString()).fadeOut(250);
        }
    );
}

function showBottle(number, et) {
    var aspect = parseFloat($('#Bottle' + number).attr("aspectRatio"));
    var width = (aspect * bottleData.bigPos.height).toString();
    width = width.substring(0, width.indexOf(".", 0));

    $('#Bottle' + number).animate(
        {
            left: bottleData.bigPos.x,
            top: bottleData.bigPos.y,
            height: bottleData.bigPos.height,
            width: width
        },
        et,
        function () {
            $('#Bottle' + number).css('z-index', 10);
            animate_op($('#Copy' + number), 0, 10);
            //animate_op($('#Image' + number), 0, 10);
            $('#Image' + number.toString()).fadeIn(250);
        }
    );
}

var bottleData = {
    bigPos: { x: 0, y: 10, height: 400 },
    littlePos: { x: 150, y: 25, height: 300 }
};

function animate_op_to(ele, to) {
    animate_op(ele, getFromOpacity(ele), to);
}

function animate_op(ele, from, to) {
    from += from > to ? -1 : 1;
    if ($.browser.msie && $.browser.version < 9) {
        ele.css("-ms-filter", '"progid:DXImageTransform.Microsoft.Alpha(Opacity=' + (from * 10) + ')"');

        if (from == to && to == 10) ele.css("filter", "");
        else ele.css("filter", "alpha(opacity=" + (from * 10).toString() + ")");

        ele.css("opacity", (from) / 10);
    }
    else {
        $(ele).css("opacity", (from) / 10);
    }

    if (from != to)
        setTimeout(function () { animate_op(ele, from, to) }, 50);
}