var createBoard = function()
{
	var scene = new CMBoard.Page();
	Silverlight.createObjectEx({
		source: "/Silverlight/Board.xaml",
		parentElement: document.getElementById("BoardControlHost"),
		id: "BoardControl",
		properties: {
			width: "100%",
			height: "100%",
			version: "1.0",
            background: "transparent",
			isWindowless: "true"
		},
		events: {
			onLoad: Silverlight.createDelegate(scene, scene.handleLoad)
		}
	});
}

var createTimeline = function()
{
	var scene = new CMTimeline.Page();
	Silverlight.createObjectEx({
		source: "/Silverlight/Timeline.xaml",
		parentElement: document.getElementById("TimelineControlHost"),
		id: "TimelineControl",
		properties: {
			width: "100%",
			height: "100%",
			version: "1.0",
            background: "transparent",
			isWindowless: "true"
		},
		events: {
			onLoad: Silverlight.createDelegate(scene, scene.handleLoad)
		}
	});
}

if (!window.Silverlight) 
	window.Silverlight = {};

Silverlight.createDelegate = function(instance, method) {
	return function() {
		return method.apply(instance, arguments);
	}
}

/* --- */

var playerDuration = 0, playerProvider  = 'youtube', playerIsPlaying = true, playerHideMenuCompleted = false, windowOpen = null, mouseDownSlider = null, editItem = null;
var DATA_tag, DATA_sub, realListItemTagOrder, realListItemSubOrder, focusCpt=0, lockembed = false, GLOBAL_CMBoardSender = null, GLOBAL_CMTimelineSender = null, GET_Tag = null, GET_Sub = null;

if (!window.CMBoard)
	window.CMBoard = {};

CMBoard.Page = function(){}

CMBoard.Page.prototype =
{
	handleLoad: function(control, userContext, rootElement)
	{
		GLOBAL_CMBoardSender = rootElement;
		this.root = rootElement;
		rootElement.findName('menuTranslate').addEventListener("MouseEnter", Silverlight.createDelegate(this, this.menuEnter));
		rootElement.findName('menuTag').addEventListener("MouseEnter", Silverlight.createDelegate(this, this.menuEnter));
		rootElement.findName('menuTranslate').addEventListener("MouseLeave", Silverlight.createDelegate(this, this.menuLeave));
		rootElement.findName('menuTag').addEventListener("MouseLeave", Silverlight.createDelegate(this, this.menuLeave));
		rootElement.findName('menuTranslate').addEventListener("MouseLeftButtonDown", Silverlight.createDelegate(this, this.menuDown));
		rootElement.findName('menuTag').addEventListener("MouseLeftButtonDown", Silverlight.createDelegate(this, this.menuDown));
		rootElement.findName('menuTranslate').addEventListener("MouseLeftButtonUp", Silverlight.createDelegate(this, this.menuUp));
		rootElement.findName('menuTag').addEventListener("MouseLeftButtonUp", Silverlight.createDelegate(this, this.menuUp));
		rootElement.findName('popupMenu').addEventListener("MouseLeave", Silverlight.createDelegate(this, this.menuEnter));
	    rootElement.findName('closeWindowOptions').addEventListener("MouseLeftButtonUp", Silverlight.createDelegate(this, this.closeOptions));
	    rootElement.findName('closeWindowAddTag').addEventListener("MouseLeftButtonUp", Silverlight.createDelegate(this, this.closeWindow));
	    rootElement.findName('closeWindowAddTranslate').addEventListener("MouseLeftButtonUp", Silverlight.createDelegate(this, this.closeWindow));
	    rootElement.findName('sbShowWindowAddTranslate').addEventListener("Completed", Silverlight.createDelegate(this, this.completedShowWindowAdd));
	    rootElement.findName('sbShowWindowAddTag').addEventListener("Completed", Silverlight.createDelegate(this, this.completedShowWindowAdd));
		rootElement.findName('addTag').addEventListener("MouseLeftButtonUp", Silverlight.createDelegate(this, this.addBubble));
		rootElement.findName('addTranslate').addEventListener("MouseLeftButtonUp", Silverlight.createDelegate(this, this.addBubble));
	    rootElement.findName('btnBoard').addEventListener("MouseLeftButtonUp", Silverlight.createDelegate(this, this.btnBoard));
		rootElement.findName('saveOptions').addEventListener("MouseLeftButtonUp", Silverlight.createDelegate(this, this.saveOptions));
	    rootElement.findName('colorPickerBlack').addEventListener("MouseLeftButtonUp", Silverlight.createDelegate(this, this.colorPicker));
	    rootElement.findName('colorPickerWhite').addEventListener("MouseLeftButtonUp", Silverlight.createDelegate(this, this.colorPicker));
	    rootElement.findName('colorPickerBlack').addEventListener("MouseLeftButtonUp", Silverlight.createDelegate(this, this.colorPicker));
	    rootElement.findName('colorPickerRed').addEventListener("MouseLeftButtonUp", Silverlight.createDelegate(this, this.colorPicker));
	    rootElement.findName('colorPickerYellow').addEventListener("MouseLeftButtonUp", Silverlight.createDelegate(this, this.colorPicker));
	    rootElement.findName('colorPickerGreen').addEventListener("MouseLeftButtonUp", Silverlight.createDelegate(this, this.colorPicker));
	    rootElement.findName('colorPickerBlue').addEventListener("MouseLeftButtonUp", Silverlight.createDelegate(this, this.colorPicker));
	    rootElement.findName('colorPickerCvsBold').addEventListener("MouseLeftButtonUp", Silverlight.createDelegate(this, this.colorPicker));
	    rootElement.findName('colorPickerCvsItalic').addEventListener("MouseLeftButtonUp", Silverlight.createDelegate(this, this.colorPicker));
	    rootElement.findName('colorPickerCvsBackground').addEventListener("MouseLeftButtonUp", Silverlight.createDelegate(this, this.colorPicker));
	    rootElement.findName('colorPickerCvsPosition').addEventListener("MouseLeftButtonUp", Silverlight.createDelegate(this, this.colorPicker));
	    rootElement.findName('imgPictoSuboost').addEventListener("MouseLeftButtonUp", Silverlight.createDelegate(this, this.linkSuboost));
	    rootElement.findName('btnUpTagBeginPoint').addEventListener("MouseLeftButtonUp", Silverlight.createDelegate(this, this.editBeginPoint));
	    rootElement.findName('btnDownTagBeginPoint').addEventListener("MouseLeftButtonUp", Silverlight.createDelegate(this, this.editBeginPoint));
	    rootElement.findName('btnUpTranslateBeginPoint').addEventListener("MouseLeftButtonUp", Silverlight.createDelegate(this, this.editBeginPoint));
	    rootElement.findName('btnDownTranslateBeginPoint').addEventListener("MouseLeftButtonUp", Silverlight.createDelegate(this, this.editBeginPoint));
	    if(SETTINGS_mode=='add') rootElement.findName('cvsTipsBegin').SetValue('Visibility', 'Visible');
	},
	linkSuboost: function(sender, eventArgs){
		window.open("http://www.suboost.com/");
	},
	saveOptions: function(sender, eventArgs){
	    sender.findName('sbHideWindowOptions').Begin();
	    SETTINGS_style = sender.findName('tbSample').GetValue('FontStyle');
	    SETTINGS_weight = sender.findName('tbSample').GetValue('FontWeight');
	    if(sender.findName('colorPickerFakeBackground').GetValue('Opacity')=="0.5"){
	        SETTINGS_background = false;
	    } else {
	        SETTINGS_background = true;
	    }
        if(sender.findName('colorPickerFakeText').GetValue('Canvas.Top')==3){
            SETTINGS_position = "top";
        } else {
            SETTINGS_position = "bottom";
        }
	    for(var i=0 ; i < sender.findName('openZone').children.count ; i++){
	        if(sender.findName('openZone').children.getItem(i).children.getItem(0) == 'Rectangle'){
	            //tag
	            sender.findName('openZone').children.getItem(i).children.getItem(2).SetValue('FontStyle', SETTINGS_style);
	            sender.findName('openZone').children.getItem(i).children.getItem(2).SetValue('FontWeight', SETTINGS_weight);
	            sender.findName('openZone').children.getItem(i).children.getItem(3).SetValue('FontStyle', SETTINGS_style);
	            sender.findName('openZone').children.getItem(i).children.getItem(3).SetValue('FontWeight', SETTINGS_weight);
	            sender.findName('openZone').children.getItem(i).children.getItem(3).SetValue('Foreground', SETTINGS_color);
	        } else {
	            sender.findName('openZone').children.getItem(i).children.getItem(1).SetValue('FontStyle', SETTINGS_style);
	            sender.findName('openZone').children.getItem(i).children.getItem(1).SetValue('FontWeight', SETTINGS_weight);
	            sender.findName('openZone').children.getItem(i).children.getItem(2).SetValue('FontStyle', SETTINGS_style);
	            sender.findName('openZone').children.getItem(i).children.getItem(2).SetValue('FontWeight', SETTINGS_weight);
	            sender.findName('openZone').children.getItem(i).children.getItem(2).SetValue('Foreground', SETTINGS_color);
	            var canvas = sender.findName('openZone').children.getItem(i);
	            var tbActuWidth = canvas.children.getItem(1).ActualWidth;
                var tbActuHeight = canvas.children.getItem(1).ActualHeight;
                if(SETTINGS_position=="bottom"){
	                canvas.SetValue('Canvas.Top', sender.findName('openZone').GetValue('Height') - tbActuHeight + 2);
                } else {
	                canvas.SetValue('Canvas.Top', 7);
                }
                canvas.SetValue('Canvas.Left', (sender.findName('openZone').GetValue('Width') / 2) - (tbActuWidth / 2));
                canvas.SetValue('Width', tbActuWidth);
                canvas.children.getItem(0).SetValue('Canvas.Left', -(sender.findName('openZone').GetValue('Width') / 2) - (tbActuWidth / 2));
                canvas.children.getItem(0).children.getItem(0).SetValue('Height', tbActuHeight + 15);
                canvas.children.getItem(0).children.getItem(0).SetValue('Canvas.Top', '-7');
                if(SETTINGS_background == true){
                    canvas.children.getItem(0).children.getItem(0).SetValue('Opacity', "0.5");
                } else {
                    canvas.children.getItem(0).children.getItem(0).SetValue('Opacity', '0');
                }
	        }
	    }
	    windowOpen = null;
	},
	colorPicker: function(sender, eventArgs){
	    var color = sender.Name.split('colorPicker')[1];
	    if(color == 'CvsBold'){
	        if(sender.findName('tbSample').GetValue('FontWeight') == 'Bold'){
                sender.findName('tbSample').SetValue('FontWeight', 'Normal');            
                sender.findName('tbSampleShade').SetValue('FontWeight', 'Normal'); 
            } else {
                sender.findName('tbSample').SetValue('FontWeight', 'Bold');            
                sender.findName('tbSampleShade').SetValue('FontWeight', 'Bold'); 
            }         
	    } else {
	        if(color == 'CvsItalic'){
	            if(sender.findName('tbSample').GetValue('FontStyle') == 'Italic'){
                    sender.findName('tbSample').SetValue('FontStyle', 'Normal');            
                    sender.findName('tbSampleShade').SetValue('FontStyle', 'Normal'); 
                } else {
                    sender.findName('tbSample').SetValue('FontStyle', 'Italic');            
                    sender.findName('tbSampleShade').SetValue('FontStyle', 'Italic'); 
                }     
	        } else {
	            if(color == 'CvsBackground'){
                    if(sender.findName('colorPickerFakeBackground').GetValue('Opacity')=="0.5"){
                        sender.findName('colorPickerFakeBackground').SetValue('Opacity', '0');
                        sender.findName('colorPickerSampleRect').SetValue('Fill', '#c0c0c0');
                    } else {
                        sender.findName('colorPickerFakeBackground').SetValue('Opacity', "0.5");
                        sender.findName('colorPickerSampleRect').SetValue('Fill', '#ffffff');
                    }
	            } else {
	                if(color == 'CvsPosition'){
	                    if(sender.findName('colorPickerFakeText').GetValue('Canvas.Top')==3){
	                        sender.findName('colorPickerFakeText').SetValue('Canvas.Top', 13);
	                        sender.findName('tbSampleShade').SetValue('Canvas.Top', 84);
	                        sender.findName('tbSample').SetValue('Canvas.Top', 83);
	                    } else {
	                        sender.findName('colorPickerFakeText').SetValue('Canvas.Top', 3);
	                        sender.findName('tbSampleShade').SetValue('Canvas.Top', 78);
	                        sender.findName('tbSample').SetValue('Canvas.Top', 77);
	                    }
	                } else {
	                	for(var i=0 ; i<sender.findName('colorPicker').children.count ; i++){
	                        if(color == sender.findName('colorPicker').children.getItem(i).Name.split('colorPicker')[1]){
	                            sender.findName('colorPicker').children.getItem(i).SetValue('Stroke', 'Purple');
	                            sender.findName('tbSample').SetValue('Foreground', color);
	                            SETTINGS_color = color;
	                        } else {
	                            sender.findName('colorPicker').children.getItem(i).SetValue('Stroke', 'LightGray');
	                        }
	                    }
	                }
	            }
	        }
	    }
	},
	btnBoard: function(sender, eventArgs)
	{
        var sender = document.getElementById('BoardControl').content.Root;
        var senderb = document.getElementById('TimelineControl').content.Root;
	    if(ytplayer) {
	        switch(ytplayer.getPlayerState()){
	            case 0:
	                ytplayer.seekTo(0, true);
	            case 1:
	                ytplayer.pauseVideo();
	            break;
	            case 2:
	                ytplayer.playVideo();
	            break;
	        }
	    } else {
	        senderb.findName('btnSave').SetValue('Visibility', 'Collapsed');
	        senderb.findName('btnOptions').SetValue('Visibility', 'Collapsed');
	    }
	},
	addBubble: function(sender, eventArgs)
	{
	    var txt = document.getElementById('inputWindowAddTranslate').value + '' + document.getElementById('inputWindowAddTag').value;
	    txt = txt.replace(/(<)|(>)|(&)|(")/gi, '');
	    txt = txt.replace(/\n/gi, '&#xa;');
	    txt = txt.substring('0', '500');
	    if(editItem == null){
	        CMTimeline.Page.prototype.addListItem('', txt, sender.Name.split('add')[1], '2', '0');
	    } else {
	        CMTimeline.Page.prototype.editListItem(editItem, txt);
	    }
	    sender.findName('sbHideWindowAddTranslate').Begin();
	    sender.findName('sbHideWindowAddTag').Begin();
	    this.hideInputWindowAdd();
	},
	completedShowWindowAdd: function(sender, eventArgs)
	{
	    document.getElementById('input' + sender.Name.split('sbShow')[1] + '').style.display = 'block';
	    document.getElementById('input' + sender.Name.split('sbShow')[1] + '').focus();
	},
	closeOptions: function(sender, eventArgs)
	{
	    windowOpen = null;
	    sender.findName('sbHideWindowOptions').Begin();
	},
	closeWindow: function(sender, eventArgs)
	{
	    var a = sender.Name.split('close')[1];
        sender.findName('sbHide' + a + '').Begin();
        document.getElementById('input' + a + '').style.display = 'none';
        this.hideInputWindowAdd();
        sender.findName('addTranslate').children.getItem(1).SetValue('Text', 'Add !');
        sender.findName('addTag').children.getItem(1).SetValue('Text', 'Add !');
        sender.findName('txtWindowTitleTranslate').SetValue('Text', 'Add a Translate or Subtitle');
        sender.findName('txtWindowTitleTranslateShadow').SetValue('Text', 'Add a Translate or Subtitle');
        sender.findName('txtWindowTitleTag').SetValue('Text', 'Add a Tagtime');
        sender.findName('txtWindowTitleTagShadow').SetValue('Text', 'Add a Tagtime');
        sender.findName('cvsTranslateEditTime').SetValue('Visibility', 'Collapsed');
        sender.findName('cvsTagEditTime').SetValue('Visibility', 'Collapsed');
        editItem = null;
	},
	hideInputWindowAdd: function(){
        document.getElementById('inputWindowAddTranslate').style.display = 'none';
        document.getElementById('inputWindowAddTag').style.display = 'none';
        document.getElementById('inputWindowAddTranslate').value = '';
        document.getElementById('inputWindowAddTag').value = '';
        windowOpen = null;
	},
	menuEnter: function(sender, eventArgs)
	{
	    var txt = null;
	    sender.findName('helperMenuBackground').SetValue('Visibility', 'Visible');
	    switch(sender.Name){
	        case 'menuTranslate':
	            txt = 'Add a Subtitle';
	            sender.findName('sbEnterMenuTranslate').Begin();
	        break;
	        case 'menuTag':
	            txt = 'Add a TagTime';
	            sender.findName('sbEnterMenuTag').Begin();
	        break;
	        case 'popupMenu':
	            txt ='';
	            sender.findName('helperMenuBackground').SetValue('Visibility', 'Collapsed');
	        break;
	    }
	    sender.findName('helperMenu').children.getItem(0).SetValue('Text', txt);
	    sender.findName('helperMenu').children.getItem(1).SetValue('Text', txt);
	},
	menuLeave: function(sender, eventArgs)
	{
        sender.findName('sbLeaveMenu' + sender.Name.split('menu')[1] + '').Begin();
	},
	menuDown: function(sender, eventArgs)
	{
	    sender.findName('sbEnterMenu' + sender.Name.split('menu')[1] + '').Stop();
	},
	menuUp: function(sender, eventArgs)
	{
	    var a = sender.Name.split('menu')[1];
        sender.findName('sbHideWindowAddTag').Begin();
        sender.findName('sbHideWindowAddTranslate').Begin();
        this.hideInputWindowAdd();
	    sender.findName('sbHideGridMenu').Begin();
	    sender.findName('sbShowWindowAdd' + a + '').Begin();
	    ytplayer.pauseVideo();
	    windowOpen = 1;
	},
	playAction: function()
	{
        var sender = document.getElementById('BoardControl').content.Root;
	    sender.findName('sbHideGridMenu').Begin();
	},
	pauseAction: function()
	{
        var sender = document.getElementById('BoardControl').content.Root;
	    sender.findName('gridMenu').SetValue('Canvas.Left', ((ytplayer.getCurrentTime() * 247 ) / playerDuration) - 15);
	    sender.findName('sbShowGridMenu').Begin();
	},
	slideAction: function(x, n)
	{
        var sender = document.getElementById('BoardControl').content.Root;
        sender.findName('gridMenu').SetValue('Canvas.Left', x - 82);  
	},
	getLeftPopupMenu: function(sender)
	{
	    var x = 0;
	    switch(playerProvider){
	        case 'youtube':
	            x = ((sender.findName('tbDuration').GetValue('Text') * 247 ) / playerDuration) - 15;
	        break;
	    }
	    return x;
	},
	addBubbleInOpenZone: function(time, txt, type, id, duration)
	{
		var sender = document.getElementById('BoardControl').content.Root;
        var xamlListItem = '<Canvas x:Name="bubble' + id + '" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" Visibility="Collapsed">';
        xamlListItem += '<Canvas.Resources>';
        xamlListItem += '<Storyboard Completed="endSbShowBubble" x:Name="sbShowBubble' + id + '"><DoubleAnimation x:Name="daShowBubble' + id + '" BeginTime="' + this.formatTime(time, 0) + '" Storyboard.TargetName="bubble' + id + '" Storyboard.TargetProperty="Opacity" To="1" Duration="00:00:00.1" /></Storyboard>';
        xamlListItem += '<Storyboard x:Name="sbHideBubble' + id + '"><DoubleAnimation x:Name="daHideBubble' + id + '" BeginTime="' + this.formatTime(duration, 0) + '" Storyboard.TargetName="bubble' + id + '" Storyboard.TargetProperty="Opacity" To="0" Duration="00:00:00.1" /></Storyboard>';
        xamlListItem += '</Canvas.Resources>';
	var opac = null;
	if(SETTINGS_background == 'true'){
		opac="0.5";
	} else {
		opac="0";
	}
		switch(type) {
		    case 'Tag':
		        xamlListItem += '<Rectangle Canvas.Top="-2" Canvas.Left="-45" Width="0" Height="25" Fill="Black" RadiusX="5" RadiusY="5" Opacity="0.4" />';
		        xamlListItem += '<Image Canvas.Left="-44" Canvas.Top="-5" Source="http://www.suboost.com/Images/menu-tag.png" />';
		    break;
		    case 'Translate':
		        xamlListItem += '<Canvas Canvas.Left="0"><Rectangle Fill="Black" Opacity="' + opac + '" Width="5000" Height="50" /></Canvas>';
		    break;
		}
        xamlListItem += '<TextBlock TextWrapping="Wrap" Width="380" FontStyle="' + SETTINGS_style + '" FontWeight="' + SETTINGS_weight + '" Foreground="Black" Text="' + txt + '" />';
        xamlListItem += '<TextBlock TextWrapping="Wrap" Width="380" FontStyle="' + SETTINGS_style + '" FontWeight="' + SETTINGS_weight + '" Foreground="' + SETTINGS_color + '" Canvas.Top="-1" Canvas.Left="-1" Text="' + txt + '" />';
        xamlListItem += '</Canvas>';
		var plugin = sender.getHost();
		var xamlNode = plugin.content.createFromXaml(xamlListItem, false);
		sender.findName('openZone').children.add(xamlNode);
		//position bubble
        var canvas = sender.findName('bubble' + id);
		switch(type) {
		    case 'Tag':
                tbActuWidth = canvas.children.getItem(2).ActualWidth;
                tbActuHeight = canvas.children.getItem(2).ActualHeight;
                canvas.children.getItem(0).SetValue('Width', tbActuWidth + 55);
		        canvas.SetValue('Canvas.Top', 15);
		        canvas.SetValue('Canvas.Left', (sender.findName('openZone').GetValue('Width') / 2) - (tbActuWidth / 2) + 20);
		    break;
		    case 'Translate':
                tbActuWidth = canvas.children.getItem(1).ActualWidth;
                tbActuHeight = canvas.children.getItem(1).ActualHeight;
                if(SETTINGS_position=="bottom"){
		            canvas.SetValue('Canvas.Top', sender.findName('openZone').GetValue('Height') - tbActuHeight + 2);
		        } else {
		            canvas.SetValue('Canvas.Top', 7);
		        }
		        canvas.SetValue('Canvas.Left', (sender.findName('openZone').GetValue('Width') / 2) - (tbActuWidth / 2));
		        canvas.SetValue('Width', tbActuWidth);
		        canvas.children.getItem(0).SetValue('Canvas.Left', -(sender.findName('openZone').GetValue('Width') / 2) - (tbActuWidth / 2));
		        canvas.children.getItem(0).children.getItem(0).SetValue('Height', tbActuHeight + 15);
		        canvas.children.getItem(0).children.getItem(0).SetValue('Canvas.Top', '-7');
		    break;
		}
	},
	deleteBubbleInOpenZone: function(name)
	{
	    var sender = document.getElementById('BoardControl').content.Root;
	    var bubble = sender.findName(name);
	    sender.findName('openZone').children.remove(bubble);
	},
	convertToSeconds: function(timespan)
	{
        var t = timespan.split(':');
        //var a = parseInt(timespan.charAt(0)) * 600;
        //var b = parseInt(timespan.charAt(1)) * 60;
        //var c = timespan.charAt(3) + '' + timespan.charAt(4);
        //var d = parseInt(a) + parseInt(b) + parseInt(c);
        var d = new Date(0, 0, 0, 0, t[0], t[1]);
        return d.getMinutes() * 60 + d.getSeconds();
	},
    formatTime: function(index, type)
	{
		var datetime = new Date(0, 0, 0, 0, 0, Math.round(index));
		var hours = datetime.getHours();
		var minutes = datetime.getMinutes();
		var seconds = datetime.getSeconds();
		if(seconds < 10) seconds = "0" + seconds;
		if(minutes < 10) minutes = "0" + minutes;
		if(type==1) return minutes + ":" + seconds;
		else return "00:" + minutes + ":" + seconds;
	},
    editBeginPoint: function(sender, eventArgs)
    {
        if(sender.Name.substring(0, 5)=="btnUp"){
            if(sender.Name.split('btnUp')[1]=="TranslateBeginPoint"){
                var txt = sender.findName('cvsTranslateEditTime').children.getItem(1).GetValue('Text');
                var s = this.convertToSeconds(txt);
                s = parseInt(s) + 1;
                sender.findName('cvsTranslateEditTime').children.getItem(1).SetValue('Text', this.formatTime(s, 1));
            } else {
                var txt = sender.findName('cvsTagEditTime').children.getItem(1).GetValue('Text');
                var s = this.convertToSeconds(txt);
                s = parseInt(s) + 1;
                sender.findName('cvsTagEditTime').children.getItem(1).SetValue('Text', this.formatTime(s, 1));
            }
        } else {
            if(sender.Name.split('btnDown')[1]=="TranslateBeginPoint"){
                var txt = sender.findName('cvsTranslateEditTime').children.getItem(1).GetValue('Text');
                var s = this.convertToSeconds(txt);
                s = parseInt(s) - 1;
                sender.findName('cvsTranslateEditTime').children.getItem(1).SetValue('Text', this.formatTime(s, 1));
            } else {
                var txt = sender.findName('cvsTagEditTime').children.getItem(1).GetValue('Text');
                var s = this.convertToSeconds(txt);
                s = parseInt(s) - 1;
                sender.findName('cvsTagEditTime').children.getItem(1).SetValue('Text', this.formatTime(s, 1));
            }
        }
    }
}

/* --- */
var loadTagSubInterval = null;

if (!window.CMTimeline)
	window.CMTimeline = {};
CMTimeline.Page = function(){}
CMTimeline.Page.prototype =
{
	handleLoad: function(control, userContext, rootElement)
	{
		GLOBAL_CMTimelineSender = rootElement;
		rootElement.findName('checkBoxTags').addEventListener("MouseLeftButtonUp", Silverlight.createDelegate(this, this.tabMenu));
		rootElement.findName('checkBoxTranslate').addEventListener("MouseLeftButtonUp", Silverlight.createDelegate(this, this.tabMenu));
        rootElement.findName('scrollTop').addEventListener("MouseLeftButtonUp", Silverlight.createDelegate(this, this.scroll));
        rootElement.findName('scrollDown').addEventListener("MouseLeftButtonUp", Silverlight.createDelegate(this, this.scroll));
        rootElement.findName('btnSave').addEventListener("MouseLeftButtonUp", Silverlight.createDelegate(this, this.save));
        rootElement.findName('btnOptions').addEventListener("MouseLeftButtonUp", Silverlight.createDelegate(this, this.options));
        rootElement.findName('cvsEmbedVideoInfo').addEventListener("MouseLeftButtonUp", Silverlight.createDelegate(this, this.embedVideoInfo));
        rootElement.findName('viewVideoInfo').addEventListener("Completed", Silverlight.createDelegate(this, this.embedVideoInfoComplete));
		this.loadingTagSub();
		if(SETTINGS_mode == 'visu') {
	        rootElement.findName('btnSave').SetValue('Visibility', 'Collapsed');
	        rootElement.findName('btnOptions').SetValue('Visibility', 'Collapsed');
	        rootElement.findName('sponsor').SetValue('Visibility', 'Visible');
			this.cleanVisu();
	    }
        if(document.getElementById('divEmbed')){
	        rootElement.findName('sponsor').SetValue('Visibility', 'Collapsed');
            this.embedPosition();
        }
	},
	loadingInterval: function(){
		var s1 = document.getElementById('TimelineControl').content.Root;
		var s2 = document.getElementById('BoardControl').content.Root;
		if(s1=='Canvas' && s2=='Canvas') {
			if(GET_Tag){
				for(var i=0 ; i<GET_Tag.length ; i++){
					var p = GET_Tag[i].split('#!#');
					CMTimeline.Page.prototype.addListItem(p[0], p[2], 'Tag', p[1], p[3]);
				}
			}
			if(GET_Sub){
				for(var i=0 ; i<GET_Sub.length ; i++){
					var p = GET_Sub[i].split('#!#');
					CMTimeline.Page.prototype.addListItem(p[0], p[2], 'Translate', p[1], '0');
				}
			}
			CMTimeline.Page.prototype.setTabMenu(1);
			if(SETTINGS_mode == 'visu') CMTimeline.Page.prototype.cleanVisu();
			clearInterval(loadTagSubInterval);
		}
	},
	loadingTagSub: function()
	{
		var s1 = document.getElementById('TimelineControl').content.Root;
		var s2 = document.getElementById('BoardControl').content.Root;
		loadTagSubInterval = setInterval("CMTimeline.Page.prototype.loadingInterval()", 1000);
	},
	embedVideoInfoComplete: function(sender, eventArgs)
	{
	    lockembed = false;
	},
	embedVideoInfo: function(sender, eventArgs){
	    if(!lockembed){
	        if(sender.findName('ttTimeline').GetValue('X') == '230'){
	            sender.findName('sdkfTimelineVideoInfo').SetValue('Value', 0);
	            sender.findName('sdkfTimelinePath').SetValue('Value', 0);
	            sender.findName('viewVideoInfo').Begin();
	            lockembed = true;
	        } else {
	            sender.findName('sdkfTimelineVideoInfo').SetValue('Value', 230);
	            sender.findName('sdkfTimelinePath').SetValue('Value', 180);
	            sender.findName('viewVideoInfo').Begin();
	            lockembed = true;
	        }
	    }
	},
	embedPosition: function()
	{
	    var sender = document.getElementById('TimelineControl').content.Root;
	    var sender2 = document.getElementById('BoardControl').content.Root;
	    sender2.findName('imgPictoSuboost').SetValue('Visibility', 'Visible');
	    sender.findName('rtBgTimelineEmbed').SetValue('Visibility', 'Visible');
	    sender.findName('cvsGlobalTimeline').SetValue('Canvas.Top', 4);
	    sender.findName('cvsGlobalTimeline').SetValue('Canvas.Left', 3);
        sender.findName('cvsEmbedVideoInfo').SetValue('Visibility', 'Visible');
	},
    cleanVisu: function(rootElement){
        document.getElementById('player').style.left = '0px';
        document.getElementById('loaddata').style.display = 'none';
	    var sender = document.getElementById('TimelineControl').content.Root;
	    var a = sender.findName('listTag').children.count;
	    var b = sender.findName('listSubtitle').children.count;
        for(var i=0 ; i < a ; i++){
            var id = sender.findName('listTag').children.getItem(i).Name.split('listItem')[1];
            sender.findName('listItemDelete' + id).SetValue('Visibility', 'Collapsed');
            sender.findName('listItemDuration' + id).SetValue('Visibility', 'Collapsed');
            sender.findName('rctBgText' + id).SetValue('Width', 145);
            sender.findName('btnGotoAndPlay' + id).SetValue('Width', 215);
        }
        for(var i=0 ; i < b ; i++){
            var id = sender.findName('listSubtitle').children.getItem(i).Name.split('listItem')[1];
            sender.findName('listItemDelete' + id).SetValue('Visibility', 'Collapsed');
            sender.findName('listItemDuration' + id).SetValue('Visibility', 'Collapsed');
            sender.findName('rctBgText' + id).SetValue('Width', 160);
            sender.findName('btnGotoAndPlay' + id).SetValue('Width', 215);
            sender.findName('rctBgText' + id).SetValue('Canvas.Left', 49);
            sender.findName('mainScroller' + id).SetValue('Canvas.Left', 54);
            sender.findName('timelaps' + id).SetValue('Canvas.Left', 8);
            sender.findName('timelapsShadow' + id).SetValue('Canvas.Left', 9);
        }
        sender.findName('txtSubtitleIndice').SetValue('Visibility', 'Visible');
        sender.findName('txtTagIndice').SetValue('Visibility', 'Visible');
        if(a==0 && b!=0) CMTimeline.Page.prototype.setTabMenu(0);
        sender.findName('txtTagIndice').SetValue('Text', '(' + a++ + ')');
        sender.findName('txtSubtitleIndice').SetValue('Text', '(' + b++ + ')');
    },
	options: function(sender, eventArgs){
	    if(!windowOpen){
	        windowOpen = 1;
	        var sender = document.getElementById('BoardControl').content.Root;
	        sender.findName('sbShowWindowOptions').Begin();
	    }
	},
	save: function(sender, eventArgs){
	    DATA_tag = new Array();
	    DATA_sub = new Array();
	    var sender = document.getElementById('TimelineControl').content.Root;
	    for(var i=0 ; i<sender.findName('listTag').children.count ; i++){
	        id = sender.findName('listTag').children.getItem(i).Name.split('listItem')[1];
	        time = sender.findName('timelaps' + id).GetValue('Text');
	        duration = sender.findName('listItemDurationValue' + id).GetValue('Text');
	        var senderb = document.getElementById('BoardControl').content.Root;
	        txt = senderb.findName('bubble' + id).children.getItem(2).GetValue('Text');
	        DATA_tag.push(CMBoard.Page.prototype.convertToSeconds(time) + '#!#' + duration + '#!#' + txt);
	    }
	    for(var i=0 ; i<sender.findName('listSubtitle').children.count ; i++){
	        id = sender.findName('listSubtitle').children.getItem(i).Name.split('listItem')[1];
	        time = sender.findName('timelaps' + id).GetValue('Text');
	        duration = sender.findName('listItemDurationValue' + id).GetValue('Text');
	        var senderb = document.getElementById('BoardControl').content.Root;
	        txt = senderb.findName('bubble' + id).children.getItem(1).GetValue('Text');
	        txt = txt.replace(/\n/gi, '&#xa;');
	        DATA_sub.push(CMBoard.Page.prototype.convertToSeconds(time) + '#!#' + duration + '#!#' + txt);
	    }
	    sender = document.getElementById('BoardControl').content.Root;
        sender.findName('cvsTranslateEditTime').SetValue('Visibility', 'Collapsed');
        sender.findName('cvsTagEditTime').SetValue('Visibility', 'Collapsed');
	    saveToServices();
	},
	scroll: function(sender, eventArgs)
	{
	    var orientation = sender.Name.split('scroll')[1];
	    switch(orientation){
	        case 'Top':
	            if(this.getTabMenu()==0){
	                if(sender.findName('daTopSubtitle').GetValue('To') < 0){
	                    sender.findName('daTopSubtitle').SetValue('To', sender.findName('daTopSubtitle').GetValue('To') + 27);
	                }
	            }    
	            if(this.getTabMenu()==1){
	                if(sender.findName('daTopTag').GetValue('To') < 0){
	                    sender.findName('daTopTag').SetValue('To', sender.findName('daTopTag').GetValue('To') + 27);
                    }
                }
	        break;
	        case 'Down':
	            if(this.getTabMenu()==0){
	                if(sender.findName('listSubtitle').children.count > 9){        
	                    sender.findName('daTopSubtitle').SetValue('To', sender.findName('daTopSubtitle').GetValue('To') - 27);
	                }
	            }    
	            if(this.getTabMenu()==1){
                    if(sender.findName('listTag').children.count > 9){
	                    sender.findName('daTopTag').SetValue('To', sender.findName('daTopTag').GetValue('To') - 27);
	                }
	            }    
	        break;
	    }
        sender.findName('sbScroll').Begin();
	},
	getTabMenu: function()
	{
	    var sender = document.getElementById('TimelineControl').content.Root;
        if(sender.findName('listSubtitle').GetValue('Visibility') == 'Visible') return 0;
        if(sender.findName('listTag').GetValue('Visibility') == 'Visible') return 1;
	},
	setTabMenu: function(a)
	{
	    if(document.getElementById('TimelineControl').content.Root){    
	        var sender = document.getElementById('TimelineControl').content.Root;
            switch(a){
                case 0:
                    sender.findName('btnSubtitle').SetValue('Source', 'http://www.suboost.com/Images/btn-subtitle-on.png');
                    sender.findName('btnTags').SetValue('Source', 'http://www.suboost.com/Images/btn-tag-off.png');
                    sender.findName('listSubtitle').SetValue('Visibility', 'Visible');
                    sender.findName('listTag').SetValue('Visibility', 'Collapsed');
                    if(SETTINGS_mode=='visu'){
                        sender.findName('txtSubtitleIndice').SetValue('Foreground', '#5d138c');
                        sender.findName('txtTagIndice').SetValue('Foreground', '#7E656565');
                    }
                break;
                case 1:
                    sender.findName('btnSubtitle').SetValue('Source', 'http://www.suboost.com/Images/btn-subtitle-off.png');
                    sender.findName('btnTags').SetValue('Source', 'http://www.suboost.com/Images/btn-tag-on.png');
                    sender.findName('listSubtitle').SetValue('Visibility', 'Collapsed');
                    sender.findName('listTag').SetValue('Visibility', 'Visible');
                    if(SETTINGS_mode=='visu'){
                        sender.findName('txtSubtitleIndice').SetValue('Foreground', '#7E656565');
                        sender.findName('txtTagIndice').SetValue('Foreground', '#5d138c');
                    }
                break;
            }
        }
	},
    tabMenu: function(sender, eventArgs)
    {
        type = sender.Name.split('checkBox')[1];
        switch(type){
            case 'Translate':
                this.setTabMenu(0);
            break;
            case 'Tags':
                this.setTabMenu(1);
            break;
        }
    },
    getStateCheckBoxMenu: function(sender){
        return new Array( sender.findName('checkBoxTagsState').GetValue('Opacity') , sender.findName('checkBoxTranslateState').GetValue('Opacity') );
    },
    getRealListItemOrder: function(list){
        realListItemOrder = new Array();
        var a = new Array();
        var d = document.getElementById('BoardControl').content.Root;
        var sender = document.getElementById('TimelineControl').content.Root;
        var length = sender.findName(list).children.count;
        for(var i=0 ; i < length ; i++){
            var b = sender.findName(list).children.getItem(i).Name.split('listItem')[1];
            var c = d.findName('daShowBubble' + b).GetValue('BeginTime').Seconds;
            a.push(c + '#!#' + b);
        }
    },
	editListItem: function(id, txt)
	{
		var senderb = document.getElementById('TimelineControl').content.Root;		
		var sender = document.getElementById('BoardControl').content.Root;
		var txt = txt.replace(/\&\#xa;/gi, '\n');
	    var realId, time;
	    if(id.substring(0,3)=="Tag"){
	        realId = id.split('Tag')[1];
	        sender.findName('bubble' + realId).children.getItem(2).SetValue('Text', txt);
	        sender.findName('bubble' + realId).children.getItem(3).SetValue('Text', txt);
	        var canvas = sender.findName('bubble' + realId);
            tbActuWidth = canvas.children.getItem(2).ActualWidth;
            tbActuHeight = canvas.children.getItem(2).ActualHeight;
            canvas.children.getItem(0).SetValue('Width', tbActuWidth + 55);
	        canvas.SetValue('Canvas.Top', 15);
	        canvas.SetValue('Canvas.Left', (sender.findName('openZone').GetValue('Width') / 2) - (tbActuWidth / 2) + 20);
	        time = sender.findName('cvsTagEditTime').children.getItem(1).GetValue('Text');
	    } else {
	        realId = id.split('Translate')[1];
	        sender.findName('bubble' + realId).children.getItem(1).SetValue('Text', txt);
	        sender.findName('bubble' + realId).children.getItem(2).SetValue('Text', txt);
	        var canvas = sender.findName('bubble' + realId);
	        tbActuWidth = canvas.children.getItem(1).ActualWidth;
            tbActuHeight = canvas.children.getItem(1).ActualHeight;
            if(SETTINGS_position=="bottom"){
	            canvas.SetValue('Canvas.Top', sender.findName('openZone').GetValue('Height') - tbActuHeight + 2);
	        } else {
	            canvas.SetValue('Canvas.Top', 7);
	        }
	        canvas.SetValue('Canvas.Left', (sender.findName('openZone').GetValue('Width') / 2) - (tbActuWidth / 2));
	        canvas.SetValue('Width', tbActuWidth);
	        canvas.children.getItem(0).SetValue('Canvas.Left', -(sender.findName('openZone').GetValue('Width') / 2) - (tbActuWidth / 2));
	        canvas.children.getItem(0).children.getItem(0).SetValue('Height', tbActuHeight + 15);
	        canvas.children.getItem(0).children.getItem(0).SetValue('Canvas.Top', '-7');
	        time = sender.findName('cvsTranslateEditTime').children.getItem(1).GetValue('Text');
	    }
        senderb.findName('timelapsShadow' + realId).SetValue('Text', time);
        senderb.findName('timelaps' + realId).SetValue('Text', time);
        sender.findName('daShowBubble' + realId).SetValue('BeginTime', '00:' +  time);
	    senderb.findName('scroller' + realId).children.getItem(0).SetValue('Text', txt);
	    senderb.findName('scroller' + realId).children.getItem(1).SetValue('Text', txt);
    	var timespan = senderb.findName('timelaps' + realId).GetValue('Text');
        var a = parseInt(timespan.charAt(0)) * 600;
        var b = parseInt(timespan.charAt(1)) * 60;
        var c = timespan.charAt(3) + '' + timespan.charAt(4);
        var d = parseInt(a) + parseInt(b) + parseInt(c);
        editItem = null;
        sender.findName('cvsTranslateEditTime').SetValue('Visibility', 'Collapsed');
        sender.findName('cvsTagEditTime').SetValue('Visibility', 'Collapsed');
        sender.findName('txtWindowTitleTranslate').SetValue('Text', 'Add a Translate or Subtitle');
        sender.findName('txtWindowTitleTranslateShadow').SetValue('Text', 'Add a Translate or Subtitle');
        sender.findName('txtWindowTitleTag').SetValue('Text', 'Add a Tagtime');
        sender.findName('txtWindowTitleTagShadow').SetValue('Text', 'Add a Tagtime');
        sender.findName('addTranslate').children.getItem(1).SetValue('Text', 'Add !');
        sender.findName('addTag').children.getItem(1).SetValue('Text', 'Add !');

        ytplayer.seekTo(d, true);
        ytplayer.playVideo();
	},
	addListItem: function(time, txt, type, duration, focus)
	{
		var sender = document.getElementById('TimelineControl').content.Root;		
	    if(time == '') time = ytplayer.getCurrentTime();
        var id = 0, glist = '', totalListItem = null;
        switch(type){
            case 'Translate':
                glist = "listSubtitle";
                this.setTabMenu(0);
                totalListItem = sender.findName(glist).children.count;
                for(var i=0 ; i<totalListItem ; i++){
                    var a = parseInt(sender.findName(glist).children.getItem(i).Name.split('listItem')[1]);
                    if(a >= id) id = a + 1;
                }
                totalListItemB = sender.findName('listTag').children.count;
                for(var i=0 ; i<totalListItemB ; i++){
                    var a = parseInt(sender.findName('listTag').children.getItem(i).Name.split('listItem')[1]);
                    if(a >= id) id = a + 1;
                }
            break;
            case 'Tag':
                glist = "listTag";
                this.setTabMenu(1);
                totalListItem = sender.findName(glist).children.count;
                for(var i=0 ; i<totalListItem ; i++){
                    var a = parseInt(sender.findName(glist).children.getItem(i).Name.split('listItem')[1]);
                    if(a >= id) id = a + 1;
                }
                totalListItemB = sender.findName('listSubtitle').children.count;
                for(var i=0 ; i<totalListItemB ; i++){
                    var a = parseInt(sender.findName('listSubtitle').children.getItem(i).Name.split('listItem')[1]);
                    if(a >= id) id = a + 1;
                }
            break;
        }
        if(SETTINGS_mode=='add' && sender.findName('listSubtitle').children.count==0 && sender.findName('listTag').children.count==0){
            var senderb = document.getElementById('BoardControl').content.Root;
            senderb.findName('cvsTipsSave').SetValue('Visibility', 'Visible');
            sender.findName('imgHaloSavework').SetValue('Visibility', 'Visible');
            setTimeout(function(){
                senderb.findName('cvsTipsSave').SetValue('Visibility', 'Collapsed');
                sender.findName('imgHaloSavework').SetValue('Visibility', 'Collapsed');
            }, 7000);
        }
        
        var color1, color2; 
        if(focus==0){
            color1 = "#441645"; color2 = "#6c3d6d";
        } else {
            focusCpt++;
            color1 = "#91860d"; color2 = "#e5e209";
            if(focusCpt==1){
                var tempInterval = setInterval(function(){
                    if(ytplayer){
                        CMTimeline.Page.prototype.setTabMenu(1);
                        clearInterval(tempInterval);
                        ytplayer.seekTo(time, true);
                        ytplayer.playVideo();
                    }
                }, 1500);
            }
        }

        xamlListItem = '<Canvas Width="220" Height="25" RenderTransformOrigin="0.5,0.5" x:Name="listItem' + id + '" Canvas.Top="' + totalListItem * 27 + '" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">';
        xamlListItem += '<Canvas.RenderTransform>';
        xamlListItem += '	<TransformGroup>';
        xamlListItem += '		<ScaleTransform ScaleX="0" ScaleY="0"/>';
        xamlListItem += '		<SkewTransform AngleX="0" AngleY="0"/>';
        xamlListItem += '		<RotateTransform Angle="0"/>';
        xamlListItem += '		<TranslateTransform X="0" Y="0"/>';
        xamlListItem += '	</TransformGroup>';
        xamlListItem += '</Canvas.RenderTransform>';
        xamlListItem += '<Canvas.Resources>';
        //anim panel
        xamlListItem += '	<Storyboard x:Name="sbPosTopListItem' + id + '">';
        xamlListItem += '		<DoubleAnimationUsingKeyFrames BeginTime="00:00:00" Duration="00:00:001" Storyboard.TargetName="listItem' + id + '" Storyboard.TargetProperty="(Canvas.Top)">';
        xamlListItem += '			<SplineDoubleKeyFrame x:Name="sdkfListItemTop' + id + '" KeyTime="00:00:00.2000000" Value="0"/>';
        xamlListItem += '		</DoubleAnimationUsingKeyFrames>';
        xamlListItem += '   </Storyboard>';
        xamlListItem += '	<Storyboard x:Name="sbHideListItem' + id + '" Completed="completedHideListem">';
        xamlListItem += '		<DoubleAnimationUsingKeyFrames BeginTime="00:00:00" Duration="00:00:00.0010000" Storyboard.TargetName="listItem' + id + '" Storyboard.TargetProperty="(UIElement.RenderTransform).(TransformGroup.Children)[3].(TranslateTransform.X)">';
        xamlListItem += '			<SplineDoubleKeyFrame KeyTime="00:00:00" Value="0"/>';
        xamlListItem += '		</DoubleAnimationUsingKeyFrames>';
        xamlListItem += '		<DoubleAnimationUsingKeyFrames BeginTime="00:00:00" Storyboard.TargetName="listItem' + id + '" Storyboard.TargetProperty="(UIElement.RenderTransform).(TransformGroup.Children)[0].(ScaleTransform.ScaleX)">';
        xamlListItem += '			<SplineDoubleKeyFrame KeyTime="00:00:00.2000000" Value="0"/>';
        xamlListItem += '		</DoubleAnimationUsingKeyFrames>';
        xamlListItem += '		<DoubleAnimationUsingKeyFrames BeginTime="00:00:00" Storyboard.TargetName="listItem' + id + '" Storyboard.TargetProperty="(UIElement.RenderTransform).(TransformGroup.Children)[0].(ScaleTransform.ScaleY)">';
        xamlListItem += '			<SplineDoubleKeyFrame KeyTime="00:00:00.2000000" Value="0"/>';
        xamlListItem += '		</DoubleAnimationUsingKeyFrames>';
        xamlListItem += '		<DoubleAnimationUsingKeyFrames BeginTime="00:00:00" Storyboard.TargetName="listItem' + id + '" Storyboard.TargetProperty="(UIElement.Opacity)">';
        xamlListItem += '			<SplineDoubleKeyFrame KeyTime="00:00:00.1" Value="0"/>';
        xamlListItem += '		</DoubleAnimationUsingKeyFrames>';
        xamlListItem += '	</Storyboard>';
        xamlListItem += '	<Storyboard x:Name="sbShowListItem' + id + '">';
        xamlListItem += '		<DoubleAnimationUsingKeyFrames BeginTime="00:00:00" Duration="00:00:00.0010000" Storyboard.TargetName="listItem' + id + '" Storyboard.TargetProperty="(UIElement.RenderTransform).(TransformGroup.Children)[3].(TranslateTransform.X)">';
        xamlListItem += '			<SplineDoubleKeyFrame KeyTime="00:00:00" Value="1"/>';
        xamlListItem += '		</DoubleAnimationUsingKeyFrames>';
        xamlListItem += '		<DoubleAnimationUsingKeyFrames BeginTime="00:00:00" Storyboard.TargetName="listItem' + id + '" Storyboard.TargetProperty="(UIElement.RenderTransform).(TransformGroup.Children)[0].(ScaleTransform.ScaleX)">';
        xamlListItem += '			<SplineDoubleKeyFrame KeyTime="00:00:00.2" Value="1"/>';
        xamlListItem += '		</DoubleAnimationUsingKeyFrames>';
        xamlListItem += '		<DoubleAnimationUsingKeyFrames BeginTime="00:00:00" Storyboard.TargetName="listItem' + id + '" Storyboard.TargetProperty="(UIElement.RenderTransform).(TransformGroup.Children)[0].(ScaleTransform.ScaleY)">';
        xamlListItem += '			<SplineDoubleKeyFrame KeyTime="00:00:00.2" Value="1"/>';
        xamlListItem += '		</DoubleAnimationUsingKeyFrames>';
        xamlListItem += '		<DoubleAnimationUsingKeyFrames BeginTime="00:00:00" Storyboard.TargetName="listItem' + id + '" Storyboard.TargetProperty="(UIElement.Opacity)">';
        xamlListItem += '			<SplineDoubleKeyFrame KeyTime="00:00:00.1" Value="1"/>';
        xamlListItem += '		</DoubleAnimationUsingKeyFrames>';
        xamlListItem += '	</Storyboard>';
        xamlListItem += '</Canvas.Resources>';
        xamlListItem += '  <Canvas x:Name="listItem' + type + '' + id + '" />';
        xamlListItem += '  <Rectangle Height="25" Width="214" Canvas.Left="2" RadiusX="2" RadiusY="2">'; 
        xamlListItem += '<Rectangle.Fill><LinearGradientBrush EndPoint="0.508,0" StartPoint="0.508,0.958"><GradientStop Color="' + color1 + '" Offset="0"/><GradientStop Color="' + color2 + '" Offset="1"/></LinearGradientBrush></Rectangle.Fill>';
        xamlListItem += '</Rectangle>';
        if(SETTINGS_mode!='visu'){
            xamlListItem += '<Canvas x:Name="cvsBtnEdit'+id+'" Canvas.ZIndex="9" Cursor="Hand" MouseLeftButtonUp="gotoAndEdit"><Rectangle Fill="LightGray" RadiusX="2" RadiusY="2" Width="14" Height="14" Canvas.Top="5" Canvas.Left="7" Cursor="Hand" />';
            xamlListItem += '<Rectangle Fill="' + color1 + '" Width="2" Height="6.5" RenderTransformOrigin="0.5,0.5" Canvas.Top="11.25" Canvas.Left="15.25"><Rectangle.RenderTransform><TransformGroup><ScaleTransform ScaleX="1" ScaleY="1"/><SkewTransform AngleX="0" AngleY="0"/><RotateTransform Angle="-41.974"/><TranslateTransform X="0" Y="0"/></TransformGroup></Rectangle.RenderTransform></Rectangle><Ellipse Fill="' + color1 + '" Width="6.5" Height="6.5" Canvas.Left="9.5" Canvas.Top="7.25"/><Ellipse Fill="#FFD3D3D3" Width="4" Height="4" Canvas.Left="10.75" Canvas.Top="8.5"/><Rectangle Fill="#FFD3D3D3" Width="3" Height="4" RenderTransformOrigin="0.5,0.5" Canvas.Left="10" Canvas.Top="7.25"><Rectangle.RenderTransform><TransformGroup><ScaleTransform ScaleX="1" ScaleY="1"/><SkewTransform AngleX="0" AngleY="0"/><RotateTransform Angle="-41.974"/><TranslateTransform X="0" Y="0"/></TransformGroup></Rectangle.RenderTransform></Rectangle>';
            xamlListItem += '</Canvas>';
        } else {
            if(type=='Tag'){
                xamlListItem += '<Canvas Cursor="Hand" MouseLeftButtonUp="gotoAndPlay"><Rectangle Fill="LightGray" RadiusX="2" RadiusY="2" Width="14" Height="14" Canvas.Top="5" Canvas.Left="7" Cursor="Hand" />';
                xamlListItem += '<Path Visibility="Visible" Cursor="Hand" Width="5" Height="5.75" Fill="' + color1 + '" Stretch="Fill" Stroke="' + color1 + '" Canvas.Left="12" Canvas.Top="9" Data="M58.5,32 L58.5,40 64.5,35.75 z"/>';
                xamlListItem += '</Canvas>';
            }
        }
        xamlListItem += '  <TextBlock Foreground="Black" x:Name="timelapsShadow' + id + '" Canvas.Left="26" Canvas.Top="5" FontFamily="Tahoma" FontSize="12" Text="' + CMBoard.Page.prototype.formatTime(time, 1) + '"></TextBlock>';
        xamlListItem += '  <TextBlock Foreground="White" x:Name="timelaps' + id + '" Canvas.Left="25" Canvas.Top="4" FontFamily="Tahoma" FontSize="12" Text="' + CMBoard.Page.prototype.formatTime(time, 1) + '"></TextBlock>';
        switch(type){
            case 'Translate':
                xamlListItem += '  <Rectangle x:Name="rctBgText' + id + '" Canvas.Left="65" Fill="Black" Opacity="0.3" Width="77" Height="18" Canvas.Top="3" RadiusX="5" RadiusY="5" />';
            break;
            case 'Tag':
                xamlListItem += '  <Rectangle x:Name="rctBgText' + id + '" Canvas.Left="65" Fill="Black" Opacity="0.3" Width="124" Height="18" Canvas.Top="3" RadiusX="5" RadiusY="5" />';
            break;
        }
        var txttemp, tWidth;
        if(SETTINGS_mode != 'visu' && type=='Translate') {
            tWidth = '70';
        } else {
            if(SETTINGS_mode != 'visu'){
                tWidth = '120';
            } else {
                if(SETTINGS_mode == 'visu' && type=='Translate'){
                    tWidth = '150';
                } else {
                    tWidth = '140';
                }
            }
        }
        txttemp = txt;
        txttemp = txttemp.replace(/\&\#xa;/gi, '');
        xamlListItem += '  <Canvas Canvas.Left="69" Height="20" x:Name="mainScroller'+id+'" Width="' + tWidth + '" Clip="M0,0 L' + tWidth + ',0 L' + tWidth + ',20 L0,20 z"><Canvas x:Name="scroller'+id+'" Canvas.Left="0"><TextBlock Canvas.Left="1" Height="16" Foreground="Black" Canvas.Top="4" FontFamily="Tahoma" FontSize="12" Text="' + txttemp + '"></TextBlock>';
        xamlListItem += '  <TextBlock Height="16" Foreground="White" Canvas.Top="3" FontFamily="Tahoma" FontSize="12" Text="' + txttemp + '"></TextBlock></Canvas></Canvas>';
        switch(type){
            case 'Translate':
                xamlListItem += '  <Canvas Canvas.Left="147" x:Name="listItemDuration' + id + '">';
            break;
            case 'Tag':
                xamlListItem += '  <Canvas Visibility="Collapsed" Canvas.Left="147" x:Name="listItemDuration' + id + '">';
            break;
        }
        xamlListItem += '    <Rectangle Height="16" Width="41" Fill="White" Canvas.Top="4" RadiusX="2" RadiusY="2">';
        xamlListItem += '    </Rectangle>';
        xamlListItem += '    <Canvas Cursor="Hand" x:Name="durationDown' + id + '" MouseLeftButtonUp="changeDurationBubble"><Rectangle Cursor="Hand" Height="14" Width="11" Fill="' + color1 + '" Canvas.Top="5" RadiusX="2" RadiusY="2" Canvas.Left="2"></Rectangle><TextBlock Canvas.Left="4" FontSize="10" Canvas.Top="5" Foreground="White" Text="-" /></Canvas>';
        xamlListItem += '    <TextBlock x:Name="listItemDurationValue' + id + '" Text="' + duration + '" Canvas.Left="17" Canvas.Top="4" FontFamily="Tahoma" FontSize="11"></TextBlock>';
        xamlListItem += '    <Canvas Cursor="Hand" x:Name="durationUp' + id + '" MouseLeftButtonUp="changeDurationBubble" ><Rectangle Cursor="Hand" Height="14" Width="11" Fill="' + color1 + '" Canvas.Top="5" RadiusX="2" RadiusY="2" Canvas.Left="28"></Rectangle><TextBlock Canvas.Left="30" FontSize="10" Canvas.Top="4" Foreground="White" Text="+" /></Canvas>';
        xamlListItem += '  </Canvas>';
        xamlListItem += '  <Canvas Canvas.Left="195" x:Name="listItemDelete' + id + '" Cursor="Hand" MouseLeftButtonUp="deleteListItem">';
        xamlListItem += '    <Rectangle RadiusX="2" RadiusY="2" Height="14" Width="14" Canvas.Top="5">';
        xamlListItem += '       <Rectangle.Fill><LinearGradientBrush EndPoint="0.508,0" StartPoint="0.508,0.958"><GradientStop Color="#c61513" Offset="0"/><GradientStop Color="#ff0000" Offset="1"/></LinearGradientBrush></Rectangle.Fill>';
        xamlListItem += '   </Rectangle>';
        xamlListItem += '   <TextBlock Text="X" Foreground="Black" Opacity="0.6" FontFamily="Verdana" Canvas.Top="6" Canvas.Left="4" FontSize="10" FontWeight="Bold" />';
        xamlListItem += '   <TextBlock Text="X" Foreground="White" FontFamily="Verdana" Canvas.Top="5" Canvas.Left="3" FontSize="10" FontWeight="Bold" />';
        xamlListItem += '  </Canvas>';
        if(SETTINGS_mode=='visu' && type=='Translate'){
            xamlListItem += '<Canvas x:Name="btnGotoAndPlay' + id + '" Width="140" Height="25" Background="Transparent" MouseEnter="scrollerTimlineTextPlay" MouseLeave="scrollerTimlineTextStop" />'
        } else {
            xamlListItem += '<Canvas MouseLeftButtonUp="gotoAndPlay" MouseEnter="scrollerTimlineTextPlay" MouseLeave="scrollerTimlineTextStop" x:Name="btnGotoAndPlay' + id + '" Width="140" Height="25" Background="Transparent" Cursor="Hand" />'
        }
        xamlListItem += '</Canvas>';
		var plugin = sender.getHost();
		var xamlNode = plugin.content.createFromXaml(xamlListItem, false);
		sender.findName(glist).children.add(xamlNode);
		CMBoard.Page.prototype.addBubbleInOpenZone(time, txt, type, id, duration);
		sender.findName('sbShowListItem' + id + '').Begin();
	}
}

var scrollTextTimelineInterval = null;
var scrollerTimlineTextPlay = function(sender, eventArgs){
    var senderb = document.getElementById('TimelineControl').content.Root; 
    var canvas = senderb.findName('scroller' + sender.Name.split('btnGotoAndPlay')[1]);
    var maxWidth;
    if(SETTINGS_mode=='edit' || SETTINGS_mode=='add' && CMTimeline.Page.prototype.getTabMenu()==0) {
        maxWidth = '68';
        decalWidth = '60';
    } else {
        if(SETTINGS_mode=='edit' || SETTINGS_mode=='add'){
            maxWidth = '120';
            decalWidth = '20';
        } else {
            if(SETTINGS_mode=='visu' && CMTimeline.Page.prototype.getTabMenu()==1){
                maxWidth = '148';
                decalWidth = '40';
            }else{
                maxWidth = '138';
                decalWidth = '30';
            }
        }
    }    
    if(canvas.children.getItem(0).GetValue('ActualWidth') > maxWidth){
        scrollTextTimelineInterval = setInterval(function(){
            if(canvas.GetValue('Canvas.Left') <= -canvas.children.getItem(0).GetValue('ActualWidth')){
                canvas.SetValue('Canvas.Left', canvas.children.getItem(0).GetValue('ActualWidth') - decalWidth);
            }
            canvas.SetValue('Canvas.Left', canvas.GetValue('Canvas.Left') - 2);
        },100);
    }
}
var scrollerTimlineTextStop = function(sender, eventArgs){
    var senderb = document.getElementById('TimelineControl').content.Root; 
    var canvas = senderb.findName('scroller' + sender.Name.split('btnGotoAndPlay')[1]);
    canvas.SetValue('Canvas.Left', 0);
    clearInterval(scrollTextTimelineInterval);
    scrollTextTimelineInterval = null;
}
var gotoAndEdit = function(sender, eventArgs){
    if(!windowOpen){
        var id = sender.Name.split('cvsBtnEdit')[1];
        var sender = document.getElementById('BoardControl').content.Root;
        var senderb = document.getElementById('TimelineControl').content.Root;
        if(sender) sender.findName('sbHideGridMenu').Begin();
        var a = CMTimeline.Page.prototype.getTabMenu();
        if(a==0){
            a = "Translate";
            var txt = sender.findName('bubble' + id).children.getItem(2).GetValue('Text');
            document.getElementById('inputWindowAddTranslate').value = txt;
            sender.findName('addTranslate').children.getItem(1).SetValue('Text', 'Save');
            sender.findName('txtWindowTitleTranslate').SetValue('Text', 'Edit a Translate or Subtitle');
            sender.findName('txtWindowTitleTranslateShadow').SetValue('Text', 'Edit a Translate or Subtitle');
            editItem = 'Translate' + id;
            sender.findName('cvsTranslateEditTime').children.getItem(1).SetValue('Text', String(senderb.findName('timelaps' + id).GetValue('Text')));
            sender.findName('cvsTranslateEditTime').SetValue('Visibility', 'Visible');
        } else {
            a = "Tag";
            var txt = sender.findName('bubble' + id).children.getItem(3).GetValue('Text');
            document.getElementById('inputWindowAddTag').value = txt;
            sender.findName('addTag').children.getItem(1).SetValue('Text', 'Save');
            sender.findName('txtWindowTitleTag').SetValue('Text', 'Edit a Tagtime');
            sender.findName('txtWindowTitleTagShadow').SetValue('Text', 'Edit a Tagtime');
            editItem = 'Tag' + id;
            sender.findName('cvsTagEditTime').children.getItem(1).SetValue('Text', String(senderb.findName('timelaps' + id).GetValue('Text')));
            sender.findName('cvsTagEditTime').SetValue('Visibility', 'Visible');
        }
        sender.findName('sbShowWindowAdd' + a + '').Begin();
        windowOpen = 1;
        ytplayer.pauseVideo();
    }
}
var gotoAndPlay = function(sender, eventArgs){
    if(!(SETTINGS_mode=='visu' && CMTimeline.Page.prototype.getTabMenu()==0)){
        var id = sender.Name.split('btnGotoAndPlay')[1];
        var timespan = sender.findName('timelaps' + id).GetValue('Text');
        var a = parseInt(timespan.charAt(0)) * 600;
        var b = parseInt(timespan.charAt(1)) * 60;
        var c = timespan.charAt(3) + '' + timespan.charAt(4);
        var d = parseInt(a) + parseInt(b) + parseInt(c);
        var sender = document.getElementById('BoardControl').content.Root;
        if(sender) sender.findName('sbHideGridMenu').Begin();
        ytplayer.seekTo(d, true);
        ytplayer.playVideo();
    }
}

var deleteListItem = function(sender, eventArgs){
    var id = sender.Name.split('listItemDelete')[1];
    sender.findName('sbHideListItem' + id).Begin();
    var name = 'bubble' + id;
    CMBoard.Page.prototype.deleteBubbleInOpenZone(name);
}

var completedHideListem = function(sender, eventArgs){
    var id = sender.Name.split('sbHideListItem')[1];
    //sbHideListItem
    var sender = document.getElementById('TimelineControl').content.Root;
    var deleteItem = sender.findName('listItem' + id);
    var pos = false;
    var glist = CMTimeline.Page.prototype.getTabMenu();
    if(glist == 0)glist='listSubtitle';
    if(glist == 1)glist='listTag';
    for(var i=0 ; i<sender.findName(glist).children.count ; i++){
        if(pos){
            var actualTop = sender.findName(glist).children.getItem(i).getValue('Canvas.Top');
            var idI = sender.findName(glist).children.getItem(i).Name.split('listItem')[1];
            sender.findName('sdkfListItemTop' + idI + '').setValue('Value', actualTop - 27);
            sender.findName('sbPosTopListItem' + idI + '').Begin();
        }
        if(sender.findName(glist).children.getItem(i).Name.split('listItem')[1] == id){
            pos = true;
        }
    }
    sender.findName(glist).children.remove(deleteItem);
    if(sender.findName(glist).children.count < 10){
        if(glist=='listSubtitle') sender.findName('daTopSubtitle').SetValue('To', 0);
        if(glist=='listTag') sender.findName('daTopTag').SetValue('To', 0);
        sender.findName('sbScroll').Begin();
    }
}

/* --- */

var a = function(evenement)
{
    if(mouseDownSlider) mouseDownSlider = null;
}

var sbHideGridMenuCompleted = function(sender, eventArgs){
    playerHideMenuCompleted = true;
}

document.onmouseup = a;

var onYouTubePlayerReady = function(playerId) {
    ytplayer = document.getElementById("myytplayer");
    ytplayer.addEventListener("onStateChange", "onytplayerStateChange");
    setInterval(updateytplayerInfo, 250);
}

var updateytplayerInfo = function() {
    if(document.getElementById('player').style.display == 'block'){
    var sender = document.getElementById('BoardControl').content.Root;
    for(var i=0 ; i < sender.findName('openZone').children.count ; i++)
    {
        var id = sender.findName('openZone').children.getItem(i).Name.split('bubble')[1];
        var actualTime = parseInt(ytplayer.getCurrentTime());
        var whenIdShow = sender.findName('daShowBubble' + id).GetValue('BeginTime').Seconds;
        var whenIdHide = parseInt(whenIdShow) + parseInt(sender.findName('daHideBubble' + id).GetValue('BeginTime').Seconds);
        var durationId = whenIdHide - whenIdShow;
        
        if(actualTime >= whenIdShow && actualTime <= whenIdHide){
            sender.findName('openZone').children.getItem(i).SetValue('Visibility', 'Visible');
            if(sender.findName('openZone').children.getItem(i).children.getItem(0)=='Rectangle' && SETTINGS_mode=='visu'){
                sender.findName('openZone').children.getItem(i).SetValue('Visibility', 'Collapsed');    
            }
        } else {
            sender.findName('openZone').children.getItem(i).SetValue('Visibility', 'Collapsed');
        }
    }
    
   if(SETTINGS_mode != 'visu'){
        if(document.getElementById('player').style.display == 'block'){
            var senderb = document.getElementById('TimelineControl').content.Root;
	        senderb.findName('btnSave').SetValue('Visibility', 'Visible');
	        senderb.findName('btnOptions').SetValue('Visibility', 'Visible');
	    }
        switch(ytplayer.getPlayerState()){
            case 1:
                sender.findName('sbHideGridMenu').Begin();
            break;
            case 2:
                if(SETTINGS_mode=='add' && sender.findName('cvsTipsBegin').GetValue('Visibility')=='Visible') sender.findName('cvsTipsBegin').SetValue('Visibility', 'Collapsed');
                if(!windowOpen && !mouseDownSlider){
                    sender.findName('gridMenu').SetValue('Canvas.Left', ((ytplayer.getCurrentTime() * 247 ) / playerDuration) - 15);
                    sender.findName('sbShowGridMenu').Begin();
                }
            break;
        }
    }
    }
}

var onytplayerStateChange = function(newState) {
    if(ytplayer.getVideoBytesLoaded() != -1) {
        playerDuration = ytplayer.getDuration(); 
    }
}

var changeDurationBubble = function(sender, eventArgs) {
    var id = null;
    if(sender.Name.split('durationUp')[0] == "") {
        id = sender.Name.split('durationUp')[1];
        var sec = parseInt(sender.findName('listItemDurationValue' + id).GetValue('Text'));
        if(sec<9) sec++;
        sender.findName('listItemDurationValue' + id).SetValue('Text', String(sec));
	    var sender = document.getElementById('BoardControl').content.Root;
        sender.findName('daHideBubble' + id).SetValue('BeginTime', CMBoard.Page.prototype.formatTime(sec, 0));
    } else {
        id = sender.Name.split('durationDown')[1];
        var sec = parseInt(sender.findName('listItemDurationValue' + id).GetValue('Text'));
        if(sec>1) sec--;
        sender.findName('listItemDurationValue' + id).SetValue('Text', String(sec));
	    var sender = document.getElementById('BoardControl').content.Root;
        sender.findName('daHideBubble' + id).SetValue('BeginTime', CMBoard.Page.prototype.formatTime(sec, 0));
    }
}

var getQueryString = function(uri, nomVariable)
{
    var infos = uri.substring(uri.indexOf("?")+1, uri.length)+"&";
    if (infos.indexOf("#")!=-1)
        infos = infos.substring(0,infos.indexOf("#"))+"&";
    var variable=0
    {
        nomVariable = nomVariable + "=";
        var taille = nomVariable.length;
        if (infos.indexOf(nomVariable)!=-1)
	        variable = infos.substring(infos.indexOf(nomVariable)+taille,infos.length).substring(0,infos.substring(infos.indexOf(nomVariable)+taille,infos.length).indexOf("&"));
    }
    return variable;
}

var addYoutube = function(){
    var youtubeid = getQueryString(window.location.href, 'uri');
    youtubeid = getQueryString(youtubeid, 'v');
    SETTINGS_origin = 'YouTube#!#' + youtubeid;
    var htmlObj = '<object id="myytplayer" type="application/x-shockwave-flash" data="http://www.youtube.com/v/' + youtubeid + '&rel=0&autoplay=1&enablejsapi=1&playerapiid=ytplayer" width="425" height="355">';
    htmlObj += '<param name="movie" value="http://www.youtube.com/v/' + youtubeid + '&rel=0&autoplay=1&enablejsapi=1&playerapiid=ytplayer" />';
    htmlObj += '<param name="allowScriptAccess" value="always" />';
    htmlObj += '<param name="wmode" value="transparent" />';
    htmlObj += '</object>';
    document.getElementById('ytapiplayer').innerHTML = htmlObj;
}

var continueEdit = function(){
    window.location.href = '/User/PlayerEdit.aspx?id=' + SETTINGS_id;
}

var shareVideo = function(){
    window.location.href = '/Video/Share-' + SETTINGS_id + '.aspx';
}

var createYoutube = function(youtubeid) {
    SETTINGS_origin = 'YouTube#!#' + youtubeid;
    var htmlObj = '<object id="myytplayer" type="application/x-shockwave-flash" data="http://www.youtube.com/v/' + youtubeid + '&rel=0&autoplay=1&enablejsapi=1&playerapiid=ytplayer" width="425" height="355">';
    htmlObj += '<param name="movie" value="http://www.youtube.com/v/' + youtubeid + '&rel=0&autoplay=1&enablejsapi=1&playerapiid=ytplayer" />';
    htmlObj += '<param name="allowScriptAccess" value="always" />';
    htmlObj += '<param name="wmode" value="transparent" />';
    htmlObj += '</object>';
    document.getElementById('ytapiplayer').innerHTML = htmlObj;
}

var saveToServices = function(){
    var target;
    switch(SETTINGS_mode){
        case 'edit':target = SETTINGS_id;break;
        case 'add':target = "-1";break;
    }
    document.getElementById('savedata').style.display = 'block';
    document.getElementById('player').style.display = 'none';
    document.getElementById('choosenext').style.display = 'none';
    WMMServices.AddVideo(target, SETTINGS_origin, DATA_tag, DATA_sub, SETTINGS_color, SETTINGS_style, SETTINGS_weight, SETTINGS_background, SETTINGS_position, onsuccessupdata, onfailedupdata);
}
var onsuccessupdata = function(e){
    SETTINGS_id = e;
    SETTINGS_mode = "edit";
    document.getElementById('savedata').style.display = 'none';
    document.getElementById('player').style.display = 'none';
    document.getElementById('choosenext').style.display = 'block';
}

var onsuccessgettags = function(e){GET_Tag = e;}
var onsuccessgetsubs = function(e){GET_Sub = e;}
var onsuccessgetinfo = function(e){
    var p = e.split('#!#');
    createYoutube(p[1]);
    SETTINGS_color = p[2];
    SETTINGS_style = p[3];
    SETTINGS_weight = p[4];
    SETTINGS_background = p[5];
    SETTINGS_position = p[6];
}
var onfailedupdata = function(e){ /* alert(e.get_message()) */ }
var onfailedgetinfo = function(e){}
var onfailedgettags = function(e){}
var onfailedgetsubs = function(e){}