wikitude

var World = {
	loaded: false,

	init: function initFn() {
		/*
			Disable all sensors in "IR-only" Worlds to save performance. If the property is set to true, any geo-related components (such as GeoObjects and ActionRanges) are active. If the property is set to false, any geo-related components will not be visible on the screen, and triggers will not fire.
		*/
		AR.context.services.sensors = false;
		this.createOverlays();
	},

	createOverlays: function createOverlaysFn() {
		/*
			First an AR.Tracker needs to be created in order to start the recognition engine. It is initialized with a URL specific to the target collection. Optional parameters are passed as object in the last argument. In this case a callback function for the onLoaded trigger is set. Once the tracker is fully loaded the function worldLoaded() is called.

			Important: If you replace the tracker file with your own, make sure to change the target name accordingly.
			Use a specific target name to respond only to a certain target or use a wildcard to respond to any or a certain group of targets.
		*/
		this.tracker = new AR.ClientTracker("assets/tracker.wtc", {
			onLoaded: this.worldLoaded
		});

		/*
			The next step is to create the augmentation. In this example an image resource is created and passed to the AR.ImageDrawable. A drawable is a visual component that can be connected to an IR target (AR.Trackable2DObject) or a geolocated object (AR.GeoObject). The AR.ImageDrawable is initialized by the image and its size. Optional parameters allow for position it relative to the recognized target.
		*/

		/* Create overlay for page one */
		var imgOne = new AR.ImageResource("assets/FG7809.png");
		var overlayOne = new AR.ImageDrawable(imgOne, 1, {
			offsetX: 0.15,
			offsetY: 0
		});

		var video = new AR.VideoDrawable("assets/textvid2.mp4", .5, {
    offsetX: 0,
    offsetY: 0,
    onLoaded: function videoLoaded() {
    video.enabled = true;
    },
    onPlaybackStarted: function videoPlaying () {
    video.playing = true;
        video.enabled = true;
    },
    onFinishedPlaying: function videoFinished () {
        video.playing = false;
        video.enabled = false;
    },
    onClick: function videoClicked () {
        if (video.playing) {
            video.pause();
            video.playing = false;
        } else {
            video.resume();
            video.playing = true;
        }
    }
});

		var imgTwo = new AR.ImageResource("assets/FG7814.png");
		var overlayTwo = new AR.ImageDrawable(imgTwo, 1, {
			offsetX: -0.15,
			offsetY: 0
		});

		var video2 = new AR.VideoDrawable("assets/Jeanny.mp4", .5, {
    offsetX: 0,
    offsetY: 0,
    onLoaded: function videoLoaded() {
    video2.enabled = true;
    },
    onPlaybackStarted: function videoPlaying () {
    video2.playing = true;
        video2.enabled = true;
    },
    onFinishedPlaying: function videoFinished () {
        video2.playing = false;
        video2.enabled = false;
    },
    onClick: function videoClicked () {
        if (video2.playing) {
            video2.pause();
            video2.playing = false;
        } else {
            video2.resume();
            video2.playing = true;
        }
    }
});

var imgThree = new AR.ImageResource("assets/FG7815.png");
		var overlayThree = new AR.ImageDrawable(imgThree, 1, {
			offsetX: 0,
			offsetY: 0
		});

		var video3 = new AR.VideoDrawable("assets/textvid.mp4", 2, {
    offsetX: 0,
    offsetY: 0,
    onLoaded: function videoLoaded() {
    video3.enabled = true;
    },
    onPlaybackStarted: function videoPlaying () {
    video3.playing = true;
        video3.enabled = true;
    },
    onFinishedPlaying: function videoFinished () {
        video3.playing = false;
        video3.enabled = false;
    },
    onClick: function videoClicked () {
        if (video3.playing) {
            video3.pause();
            video3.playing = false;
        } else {
            video3.resume();
            video3.playing = true;
        }
        }
        });

    var pageOne = new AR.Trackable2DObject(this.tracker, "imgOne", {
			drawables: {
				cam: overlayOne
			},
			onEnterFieldOfVision: function onEnterFieldOfVisionFn () {
        if (video.playing) {
            video.pause();
        }
    },
    onExitFieldOfVision: function onExitFieldOfVisionFn () {
        if (video.playing) {
            video.pause();
        }
    }
    });

    var pageTwo = new AR.Trackable2DObject(this.tracker, "imgTwo", {
			drawables: {
				cam: overlayTwo
			},
			    onEnterFieldOfVision: function onEnterFieldOfVisionFn () {
        if (video2.playing) {
            video2.pause();
        }
    },
    onExitFieldOfVision: function onExitFieldOfVisionFn () {
        if (video2.playing) {
            video2.pause();
        }
    }
    });

    var pageThree = new AR.Trackable2DObject(this.tracker, "*", {
			drawables: {
				cam: video3
			},
			    onEnterFieldOfVision: function onEnterFieldOfVisionFn () {

        if (video3.playing) {
            video3.pause();
        }
    },
    onExitFieldOfVision: function onExitFieldOfVisionFn () {
        if (video3.playing) {
            video3.pause();
        }
    }
    });
    },

	worldLoaded: function worldLoadedFn() {
		var cssDivInstructions = " style='display: table-cell;vertical-align: middle; text-align: right; width: 50%; padding-right: 15px;'";
		var cssDivSurfer = " style='display: table-cell;vertical-align: middle; text-align: left; padding-right: 15px; width: 38px'";
		var cssDivBiker = " style='display: table-cell;vertical-align: middle; text-align: left; padding-right: 15px;'";
		document.getElementById('loadingMessage').innerHTML =
			"<div" + cssDivInstructions + ">Scan Target &#35;1 (iphone) or &#35;2 (mug):</div>" +
			"<div" + cssDivSurfer + "><img src='assets/FG7809.png' height='64px' width='64px'></img></div>" +
			"<div" + cssDivBiker + "><img src='assets/FG7814.png' height='64px' width='64px'></img></div>";

		// Remove Scan target message after 10 sec.
		setTimeout(function() {
			var e = document.getElementById('loadingMessage');
			e.parentElement.removeChild(e);
		}, 10000);
	}
};
World.init();