/**
 * Embed a video player with video from an extern provider.
 * 
 * The Widget inserts a video player from YouTube, MyVideo, Dailymotion, vimeo, wideo or metacafe including a video id into the target element on which the widget is executed on.
 * 
 * ### Examples
 * The Widget is executed on a pageelement and is called with passing optional parameters. In this example a youtube video player with size 320:180 is implemented and contains a video from ePages.
 * 
 * JavaScript:
 * 
 *     
 *     jQuery.ready({
 *     		plugin: [ 'de_epages.externalcontent.ui.externalvideo' ],
 *     		DOM:    true
 *     	}, function($){
 *     		var widget = de_epages('<div>').externalcontentUiExternalvideo({
 *     			provider : "youtube",
 *     			id : "UGhd7eZfrDA",
 *     			width : 320,
 *     			height: 180
 *     		});
 *     });
 * 
 * The Widget is executed on a pageelement and is called with passing optional parameters. In this example a metacafe video player with size 560:315 (default) is implemented and contains a user-defined video.
 * 
 * JavaScript:
 * 
 *     
 *     jQuery.ready({
 *     		plugin: [ 'de_epages.externalcontent.ui.externalvideo' ],
 *     		DOM:    true
 *     	}, function($){
 *     		var widget = de_epages('<div>').externalcontentUiExternalvideo({
 *     			provider : "metacafe",
 *     			id : ""yt-2B1QxOmbMZ0/alf_tries_to_eat_the_cat"
 *     		});
 *     });
 * 
 * 
 * @class jQuery.ui.externalcontentUiExternalvideo
 * @extends jQuery.widget
 * 
 * @uses de_epages
 * @uses jQuery.ui.widget
 * @uses jQuery.tmpl
 * @uses de_epages.externalcontent.ui.externalvideo
 * @since 6.15.0
 */

/**
 * @cfg {Required, String} provider Specifies the provider whose video player will be used.
 */

/**
 * @cfg {Required, String} id A reference to the embedded video that is liked to be shown.
 */

/**
 * @cfg {String} [width] Defines the width of the embedded video player. Values: 'large', 'medium', 'small'
 */

/**
 * @cfg {String} [height] Defines the height of the embedded video player. Values: 'large', 'medium', 'small'
 */

/**
 * See `jQuery.ui.externalcontentUiExternalvideo` for details.
 * 
 * @param {Object} [options] A map of additional options to pass to the method.
 * @param {Required, String} provider Specifies the provider whose video player will be used.
 * @param {Required, String} id A reference to the embedded video that is liked to be shown.
 * @param {String} [width] Defines the width of the embedded video player. Values: 'large', 'medium', 'small'
 * @param {String} [height] Defines the height of the embedded video player. Values: 'large', 'medium', 'small'
 * 
 * @method externalcontentUiExternalvideo
 * @member jQuery
 * 
 * @since 6.15.0
 */

/*
 * @copyright   © Copyright 2006-2012, epages GmbH, All Rights Reserved.
 *
 * @module      de_epages.externalcontent.gadget.externalvideo
 *
 * @revision    $$
 */
/*jslint nomen: true*/
/*global define, location*/
define('de_epages/externalcontent/ui/externalvideo', [
	'jquery/ui/widget',
	'de_epages',
    'de_epages/externalcontent/gadgetdialog/constants',

	'jquery/tmpl'
], function ($, de_epages, CONSTANTS) {
	'use strict';
    var gClassNames = '',
        embedIframe = '<iframe width="${width}" height="${height}" src="//${url}${id}" frameborder="0"></iframe>',
        embedObject = '<object name="${id}" id="${id}" type="application/x-shockwave-flash" data="http://sa.kewego.com/swf/p3/epix.swf" width="${width}" height="${height}">' + '<param name="flashVars" value="language_code=fr&playerKey=0df9b773a15b&skinKey=7109c4112f57&sig=${id}&autostart=false&advertise=1" />' + '<param name="movie" value="http://sa.kewego.com/swf/p3/epix.swf" /><param name="allowFullScreen" value="true" />' + '<param name="allowscriptaccess" value="always" /></object>',
        embedEmbed = '<embed flashVars="playerVars=autoPlay=no" src="http://www.metacafe.com/fplayer/${id}.swf"' + 'width="${width}" height="${height}"' + 'wmode="transparent" allowFullScreen="true" allowScriptAccess="always" name="Metacafe"' + 'pluginspage="http://www.macromedia.com/go/getflashplayer" type="application/x-shockwave-flash"></embed>';


    $.widget('ui.externalcontentUiExternalvideo', {

        options: {
            provider: '',
            // String. Specifying the provider of the embedded video.
            id: '',
            // String. Specifying a site or id, that consists the video to embed.
            width: 560,
            // Integer. Specifying the width of the video frame.
            height: 315
            // Integer. Specifying the height of the video frame.
        },

        _create: function () {
            var o = this.options,
                url,
                template = null;
            
            if (!o.id || !o.provider) {
                return this.destroy();
            }

            switch (o.provider) {
            case 'youtube':
                url = CONSTANTS.gExternalVideoUrl['youtube'];
                break;
            case 'myvideo':
                url = CONSTANTS.gExternalVideoUrl['myvideo'];
                break;
            case 'vimeo':
                url = CONSTANTS.gExternalVideoUrl['vimeo'];
                break;
            case 'dailymotion':
                url = CONSTANTS.gExternalVideoUrl['dailymotion'];
                break;
            case 'wideofr':
                template = location.protocol === 'http:' ? $.template('de_epages.externalcontent.ui.wideofr', embedObject) : '';
                break;
            case 'metacafe':
                template = location.protocol === 'http:' ? $.template('de_epages.externalcontent.ui.metacafe', embedEmbed) : '';
                break;
            }

            if (template === null) {
                template = $.template('de_epages.externalcontent.ui.externalvideo', embedIframe);
            }
            this.placeholder = $.tmpl(template, {
                url: url,
                id: o.id,
                width: o.width,
                height: o.height
            }).appendTo(this.element.addClass(gClassNames));
        },

        /**
         * This method removes the container on which the Google-Plus button has been appended to.
         * 
         * @method destroy
         * @member jQuery.ui.externalcontentUiExternalvideo
         * 
         * @since 6.15.0
         */
        destroy: function () {
            this.element.removeClass(gClassNames);
            if (this.placeholder) {
                this.placeholder.remove();
            }
            this._superApply(arguments);
        }

    });

    return de_epages;

});