Kinetic.Media = function(config){
    Kinetic.Group.call(this, config);
    this.mediaData = config.mediaData;
    this.parent = config.parent;
    //Detect if browser is IOS
    this.iOS = /(iPad|iPhone|iPod)/g.test( navigator.userAgent );
    this.createMedia();
}
    
Kinetic.Media.prototype = {
    createMedia: function(){
        if (this.mediaData.type == 'image'){
            this.initImg();
        } else if (this.mediaData.type == 'text'){
            this.initText();
        } else if (this.mediaData.type == 'video'){
            this.initVideo();
        } else if (this.mediaData.type == 'new_video'){
           this.initNewVideo();
        } else if (this.mediaData.type == 'audio'){
            this.initAudio();
        }
    },
    
    getWidth: function(){
        return this.width;
    },
    
    getHeight: function(){
        return this.height;
    },
    
    setX: function(x){
        var thisObject = this;
        
        if (this.mediaData.type == 'image'){
            // loop until this.img exists (img loaded)
            var interval = window.setInterval(function(){
                if (thisObject.img !== undefined){
                    window.clearInterval(interval);
                    thisObject.img.setX(x);
                    thisObject.getLayer().draw();
                }
            },10);
        } else if (this.mediaData.type == 'text'){
            this.text.setX(x);
        }
    },
    
    initImg: function(){
        var thisObject = this;
        var oWidth = this.mediaData.mediaFile.width;
        var oHeight = this.mediaData.mediaFile.height;
        var width = this.mediaData.width; 
        var height = this.mediaData.height; 
       /* for (var i = 0; i < this.mediaData.parameters.length; i++){
            var key = this.mediaData.parameters[i].key;
            
            if (key == 'sizex'){
                width = this.mediaData.parameters[i].value;
            } else if (key == 'sizey'){
                height = this.mediaData.parameters[i].value;
            }
        }*/
        
        var ratioX = 1; 
    	if(oWidth > width){
    		  ratioX = width / oWidth;
    	}
    	var ratioY = 1; 
    	if(oHeight > height){
    		ratioY = height / oHeight;
    	}
    	var scaleRatio = ratioX;
    	if(ratioX>ratioY){
    		scaleRatio = ratioY;
    	}
    	width = oWidth * scaleRatio;
    	height = oHeight * scaleRatio;
        
        
        if (this.mediaData.useThumb){
            // resize to thumb (150 width or height max)
            var ratio = 0;
            
            if (width > 150){
                ratio = height / width;
                
                width = 150;
                height = width * ratio;
            }
            
            if (height > 150){
                ratio = width / height;
                
                height = 150;
                width = height * ratio;
            }
        }
        
        this.height = height;
        this.width = width;
        
        this.imageObj = new Image();
        this.imageObj.onload = function(){
            thisObject.img = new Kinetic.Image({
                'x': thisObject.mediaData.x,
                'y': thisObject.mediaData.y,
                'image': thisObject.imageObj,
                'width': width,
                'height': height
            });
            thisObject.parent.add(thisObject.img);
            thisObject.parent.draw();
        }
        
        this.imageObj.src = 'https://www.permisdeconduireonline.be/amf/index/resize/?img=/assets/eq/userfiles/'+projectData.userId+'/'+projectData.id+'/'+this.mediaData.mediaFile.path+'&width='+width+'&height='+height;
    },
    
    initText: function(){
        var thisObject = this;
        
        var width = this.mediaData.width;
        var height = this.mediaData.height;
        
        for (var i = 0; i < this.mediaData.parameters.length; i++){
            var key = this.mediaData.parameters[i].key;
            
            if (key == 'sizex'){
                width = this.mediaData.parameters[i].value;
            } else if (key == 'sizey'){
                height = this.mediaData.parameters[i].value;
            }
        }
        
        this.height = height;
        
        thisObject.text = new Kinetic.Text({
           'x': thisObject.mediaData.x,
           'y': thisObject.mediaData.y + 2,
           'text': thisObject.mediaData.value,
           'fontSize': 11,
            'fontFamily': 'Arial',
            'fill': '#000000'
        });
        
        thisObject.parent.add(thisObject.text);
        thisObject.parent.draw();
    },
    
    initVideo: function(){
        var thisObject = this;
        
        var id = this.mediaData.id;
        
        var width = this.mediaData.width;
        var height = this.mediaData.height;
        
        for (var i = 0; i < this.mediaData.parameters.length; i++){
            var key = this.mediaData.parameters[i].key;
            
            if (key == 'sizex'){
                width = this.mediaData.parameters[i].value;
            } else if (key == 'sizey'){
                height = this.mediaData.parameters[i].value;
            }
        }
        
        var path = 'https://www.permisdeconduireonline.be/assets/eq/userfiles/'+projectData.userId+'/'+projectData.id+'/'+this.mediaData.mediaFile.path;
        path = path.replace(/\.[^/.]+$/, "");
        
        // create element
        $('#media').append('<video id="videoPlayer_'+id+'" controls autoplay><source src="" /></video>'); // default autoplay for this project (idem as initVideo:)
        
        // check video support
        var mp4Supported = (!!document.createElement('video').canPlayType('video/mp4'));

        if (mp4Supported) {
            path += '.mp4';
        } else {
            path += '.ogv';
        }
        
        // show video
        var left = $('.kineticjs-content').offset().left + this.mediaData.x + thisObject.parent.getX();
        var top = $('.kineticjs-content').offset().top + this.mediaData.y + thisObject.parent.getY();
        
        $('#videoPlayer_'+id).css({
            'display': 'block',
            'left': left,
            'top': top,
            'width': width,
            'height': height
        });
        
        // play video
        $('#videoPlayer_'+id)[0].src = path;
        $('#videoPlayer_'+id)[0].load();
    },
    
    initNewVideo: function(){
        var thisObject = this;
        
        var id = this.mediaData.id;
        
        var width = this.mediaData.width;
        var height = this.mediaData.height;
        var pauseForQuestion = false;
        var videoPauseTime = 0;
        
        for (var i = 0; i < this.mediaData.parameters.length; i++){
            var key = this.mediaData.parameters[i].key;
            
            if (key == 'sizex'){
                width = this.mediaData.parameters[i].value;
            } else if (key == 'sizey'){
                height = this.mediaData.parameters[i].value;
            } else if (key == 'pauseForQuestion'){
                pauseForQuestion = (this.mediaData.parameters[i].value == 'true'); //convert string to boolean
            } else if (key == 'videoPauseTime'){
                var videoPauseTimeTmp = parseInt(this.mediaData.parameters[i].value);   // convert string to Integer
                videoPauseTime = isNaN(videoPauseTimeTmp) ? 0 : videoPauseTimeTmp;      // fallback when conversion fails.
            }
        }
        
        var path = 'https://www.permisdeconduireonline.be/assets/eq/userfiles/'+projectData.userId+'/'+projectData.id+'/'+this.mediaData.mediaFile.path;
        path = path.replace(/\.[^/.]+$/, "");
        
        
        // create element
        var controls = 'controls';

        // DVR - Always show controls from the start so IOS users can hit the video play button
	//Only do this if on IOS
        if (pauseForQuestion && !this.iOS){
            controls = '';
        }
        // default autoplay for this project (idem as initVideo:)
        $('#media').append('<video id="videoPlayer_'+id+'" '+controls+' autoplay><source src="" /></video>');
        
        // check video support
        var mp4Supported = (!!document.createElement('video').canPlayType('video/mp4'));

        if (mp4Supported) {
            path += '.mp4';
        } else {
            path += '.ogv';
        }
        
        // show video
        var left = $('.kineticjs-content').offset().left + this.mediaData.x + thisObject.parent.getX();
        var top = $('.kineticjs-content').offset().top + this.mediaData.y + thisObject.parent.getY();
        
        $('#videoPlayer_'+id).css({
            'display': 'block',
            'left': left,
            'top': top,
            'width': width,
            'height': height
        });
        
        // play video
        $('#videoPlayer_'+id)[0].src = path;
        $('#videoPlayer_'+id)[0].load();
        $('#videoPlayer_'+id)[0].play();    // DVR - TODO: Autoplay does not work on IOS.

        // pause for question
         if (pauseForQuestion){
             $('#videoPlayer_'+id).bind('contextmenu',function() { return false; });
             $('#videoPlayer_'+id)[0].mediaId = id;
             $('#videoPlayer_'+id)[0].videoPauseTime = videoPauseTime;
             $('#videoPlayer_'+id)[0].addEventListener('timeupdate', this.timeupdateListener); // DVR - changed from "pauseForQuestionListener"
         }
    },
    
    initAudio: function(){
        var thisObject = this;
        
        var id = this.mediaData.id;
        
        var width = this.mediaData.width;
        var height = this.mediaData.height;
        
        for (var i = 0; i < this.mediaData.parameters.length; i++){
            var key = this.mediaData.parameters[i].key;
            
            if (key == 'sizex'){
                width = this.mediaData.parameters[i].value;
            } else if (key == 'sizey'){
                height = this.mediaData.parameters[i].value;
            }
        }
        
        var path = 'https://www.permisdeconduireonline.be/assets/eq/userfiles/'+projectData.userId+'/'+projectData.id+'/media/audio'+this.mediaData.mediaFile.path;
        path = path.replace(/\.[^/.]+$/, "");
        
        // create element
        var audioElement = "";
        audioElement = "<audio id='audioPlayer_" + id + "' controls autoplay>";
        audioElement += "<source src='" + path + ".mp3" + "' type='audio/mpeg' />";
        audioElement += "<source src='" + path + ".wav" + "' type='audio/wav' />";
        audioElement += "Your browser does not support the audio element."  //message that is displayed when audio-element is not supported
        audioElement += "</audio>";

        $('#media').append(audioElement);

//        DVR - Is not necessary. Audio element handles this. Provide both types and browser will play wat is possible
//        // check audio support
//        var mp3Supported = (!!document.createElement('audio').canPlayType('audio/mp3'));
//
//        if (mp3Supported) {
//            path += '.mp3';
//        } else {
//            path += '.wav';
//        }

        // show audio
        var left = $('.kineticjs-content').offset().left + this.mediaData.x;
        var top = $('.kineticjs-content').offset().top + this.mediaData.y;
        
        $('#audioPlayer_'+id).css({
            'display': 'block',
            'left': left,
            'top': top,
            'width': width,
            'height': height
        });
        
        // play audio
        //$('#audioPlayer_'+id)[0].src = path;  // DVR - source is already provide in creation of audio element.
        //$('#audioPlayer_'+id)[0].load();      // DVR - autoload is automatically done
        //$('#audioPlayer_'+id)[0].play();      // DVR - autoplay is already provide in creation of audio element.
    },

    timeupdateListener: function(evt){
        var videoIsPlaying = false;

        // pause video when videoPauseTime is reached
        if ($('#videoPlayer_'+evt.target.mediaId)[0].currentTime > evt.target.videoPauseTime){
            $('#videoPlayer_'+evt.target.mediaId)[0].pause();
        }

        //remove videocontrols when vid is playing
        if (!videoIsPlaying && $('#videoPlayer_'+evt.target.mediaId)[0].currentTime > 0) {
            videoIsPlaying = true;
            $('#videoPlayer_'+evt.target.mediaId)[0].removeAttribute("controls");
        }
    },

    // DVR - changed from "removePauseForQuestionListener"
    removeTimeupdateListener: function(){
        $('#videoPlayer_'+this.mediaData.id)[0].removeEventListener('timeupdate', this.timeupdateListener);
    }
}


Kinetic.Util.extend(Kinetic.Media, Kinetic.Group);