HTML5Player = function(webservice) {
    this.container_element = "#video_container";
    this.video_id   = "vx_video";
    this.video      = null; // set by insert
    this.poster     = "/images/vidunia_poster.jpg";
    this.webservice = webservice;
    this.formats    = iphone ? ["M3U8", "MPEG4"] : ["MPEG4", "M3U8"];
    //if (android)
    //    this.formats = ["MP4", "MPEG4", "M3U8"];
        
    this.bitrate    = 300;
    this.bitrate_diff_min = -50; // allow up to +50kbps higher than we've requested but prefer lower
    this.clip_url   = "";
    this.width      = 500;
    this.height     = 320;
    
    this.insert();
}
HTML5Player.prototype = {
    insert: function(url) {
        this.clip_url = url;
        
        $(this.container_element).html('<video id="'+ this.video_id +'" controls="controls"  src="'+ url +'" width="'+ this.width +'" height="'+ this.height +'" autoplay="autoplay" autobuffer="autobuffer" poster="'+this.poster+'"></video>');
        this.video = $("#"+ this.video_id);
        
        //this.video = $("<video></video>");
        //this.video.attr("id", this.video_id);
        //this.video.attr("controls", "controls");
        //this.video.attr("width", this.width);
        //this.video.attr("height", this.height);
        //this.video.attr("poster", this.poster);
        ////this.video.attr("src", "http://clips.vorwaerts-gmbh.de/big_buck_bunny.mp4");
        ////this.video.attr("autoplay", "true");
        ////this.video.attr("autobuffer", "true");
        ////this.video.bind("click", function(evt) {evt.target.play()});
        //this.container_element.html(this.video);
        
        /*
        if (!iphone) {
            this.play_icon = $("<span></span>");
            this.play_icon.attr("id", "play_icon");
            this.play_icon.hide();
            this.play_icon.bind("click", delegate(this, this.iconClick));
            this.container_element.append(this.play_icon);
        }
        */

        this.video.get(0).addEventListener('play',  delegate(this, this.videoPlaying));
        this.video.get(0).addEventListener('ended', delegate(this, this.videoEnded));
		//this.video.play();
		this.autoplay(); // Autoplay for the iPad
    },
	autoplay: function() {
		var that = this;
		var a = $('<a href="#" id="fakeLink"></a>');
		a.bind("click", function() {that.video.get(0).play()});
		$("body").append(a);
		var fakeLink = $("#fakeLink").get(0);
		var evt = document.createEvent("MouseEvents");
		evt.initMouseEvent("click", true, true, window, 0, 0, 0, 0, 0, false, false, false, false, 0, null);
		fakeLink.dispatchEvent(evt);
		$(fakeLink).remove();
	},
    videoPlaying: function() {
        dispatch(Event.CLIP_PLAYING, this);
        this.monitor_interval = setInterval(delegate(this, this.monitor), 500);
        //this.hideIcon();
    },
    videoEnded: function() {
        dispatch(Event.CLIP_ENDED, this);
        clearInterval(this.monitor_interval);
        //this.showIcon();
    },
    monitor: function() {
        var vo = this.video.get(0);
        this.progress = (100/vo.duration)*vo.currentTime;
        var status = {"video": vo, "progress": this.progress}
        //dispatch(Event.CLIP_PROGRESS, status);
    },
    /*
    hideIcon: function() {
        if (!iphone)
            this.play_icon.hide();
    }, 
    showIcon: function() {
        if (!iphone)
            this.play_icon.show();
    },
    iconClick: function () {
        this.video.click();
    },*/
    getInventory: function(clip_id) {
        //$.log(clip_id);
        this.webservice.get_inventory(clip_id, technology_id, delegate(this, function(data) {
            var media_url = null;
            for (var i=0; i < this.formats.length; i++) {
                media_url = media_url || this.findMedia(data.bundles[0].assets, this.formats[i]);
            }    
            
            $.log("<< getInventory media_url: "+ media_url);
            //this.embedVideo(media_url, this.poster);
            //this.playMedia(media_url, this.poster);
            this.setURL(media_url);
            this.setPoster(this.poster);
        }));
    },
    findMedia: function(assets, format) {
        var media = {};
        for (var i=0; i < assets.length; i++) {
            if (assets[i].format == format) {
                if (!media.url) {
                    media.url = assets[i].url;
                    media.diff = (this.bitrate - assets[i].bitrate);
                }
                if (format == "MPEG4") {
                    var mdiff = (media.diff < this.bitrate_diff_min ? 1000 : media.diff);
                    var diff = (this.bitrate - assets[i].bitrate);
                    $.log("bitrate: "+ assets[i].bitrate +"/"+ diff + " media.diff: "+ mdiff);
                    if (diff >= this.bitrate_diff_min && diff <= mdiff) {
                        $.log(" using "+ assets[i].bitrate);
                        media.url = assets[i].url;
                        media.diff = diff;
                    }
                }
            }
        }
        return media.url;
    },
    playClipId: function(clip_id, technology_id) {
        this.getInventory(clip_id, technology_id);
    },
    play: function(evt) {
        $.log("HMTL5 js play");
        $.log(evt);
        $.log(evt.data);
        this.getInventory(evt.data.inventoryUid);
    },
    setPoster: function(url) {
        this.video.attr("poster", url);
    },
    setURL: function(url) {
        $.log("HTML5Player setURL: "+ url);
        
        this.video.attr("src", url);
        this.video.load();
    },
    embedVideo: function(media_url, poster_url) {
        this.insert(media_url);
        if (!iphone) this.showIcon();
        //this.setPoster(poster_url);
        //this.setURL(media_url);
    }
}