<html>
<head>
    <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
    <script type="text/javascript" src="https://ssl-webplayer.unity3d.com/download_webplayer-3.x/3.0/uo/UnityObject2.js"></script>
    <script type="text/javascript" src="https://www.reallusion.com/crazytalk/Unity/samplecode/CTWebPlayer.min.js"></script>
    <script type="text/javascript">
        var player = new CTWebPlayer();
        $(function () {
            player.playerUrl = "https://www.reallusion.com/crazytalk/Unity/samplecode/CTWebPlayer.unity3d";
            player.init($("#unityPlayer"), function () {
                player.loadActor("https://www.reallusion.com/crazytalk/Unity/samplecode/SampleCode7/Foregrounds.uctmodel", {
                    idleMotionUrl: "https://www.reallusion.com/crazytalk/Unity/samplecode/SampleCode7/Affirmative.uctidle"
                });
   
                player.loadForeground("https://www.reallusion.com/crazytalk/Unity/samplecode/SampleCode7/FG_1.png", {
                    name: "Reallusion",
                    zOrder: 0,
                    alpha : 0,
                    action: "onClick1();",
                    x: 0, y: 0, width: 20, height: 8,
                    hotspotX: 0, hotspotY: 0, hotspotWidth: 100, hotspotHeight: 100,
                    loaded: function (status) {
                        player.showForeground("Reallusion", false, 0);
                    }
                });


                player.loadForeground("https://www.reallusion.com/crazytalk/Unity/samplecode/SampleCode7/FG_2.png", {
                    name: "C2CMarketplace",
                    zOrder: 1,
                    alpha : 0,
                    action: "onClick2();",
                    x: 70, y: 20, width: 22, height: 8,
                    hotspotX: 0, hotspotY: 0, hotspotWidth: 100, hotspotHeight: 100,
                    loaded: function (status) {
                        player.showForeground("C2CMarketplace", false, 0);
                    }
                });
            });

        });
   
        function LoadForeground1() {
            player.showForeground("Reallusion", true, 1);
            player.showForeground("C2CMarketplace", false, 0);
        }


        function LoadForeground2() {
            player.showForeground("Reallusion", false, 2);
            player.showForeground("C2CMarketplace", true, 2);
        }


        function LoadForeground3() {
            player.showForeground("Reallusion", true, 0);
            player.showForeground("C2CMarketplace", true, 0);
        }
   
        function onClick1() {
            window.open('https://www.reallusion.com', '_blank');
        }


        function onClick2() {
            window.open('https://www.reallusion.com/contentstore/', '_blank');
        }
    </script>
</head>

<body>
    <table style="text-align:center;margin-left:auto; margin-right:auto;">
        <tr>
            <td>
                <div id="unityPlayer" style="width: 640px; height: 480px;">
                </div>
            </td>
        </tr>
        <tr>
            <td>
                <input type="button" value="FG1" onclick="LoadForeground1()" class="button" />
                <input type="button" value="FG2" onclick="LoadForeground2()" class="button" />
                <input type="button" value="FG1+FG2" onclick="LoadForeground3()" class="button" />
            </td>
        </tr>
    </table>
</body>
</html>