jQuery.expr[':'].Contains = function(a,i,m){
    return (a.textContent || a.innerText || "").toUpperCase().indexOf(m[3].toUpperCase())>=0;
};

function listFilter(header, list) {
    var form = $("<form>").attr({
        "class": "filterform",
        "action": "#"
    }),
        input = $("<input>").attr({
            "class": "filterinput",
            "type": "text"
        });
    $(form).append(input).appendTo(header);
    $(input).change(function() {
        var filter = $(this).val();
        if (filter) {
			$(list).find("li:not(:Contains(" + filter + "))").hide();
			$(list).find("li:Contains(" + filter + ")").show();			
        } else {
            $(list).find("li").show();
        }
        return false;
    }).keyup(function() {
        $(this).change();
    });
}

function blockClick(m) {
	if (m) {
		$("#blockClick").block({
	        message: null,
	        overlayCSS: {
	            backgroundColor: '#000',
	            opacity: 0.0,
	            cursor: 'default'
	        },
	        showOverlay: true
	    });
	}else {
			$("#blockClick").unblock();
	}
	
}

$(document).ready(function() {
	$("#tabbedwidget").show();
	$("#pool").show();
   	listFilter($("#filter1"), $("#list1words"));
    listFilter($("#filter2"), $("#list2extras"));	
    $("#wordPool").tabs();
	blockClick(1);
    mainPlayer = new Array();
    mainPlayer[1] = $('#video1').mediaelementplayer({
        features: [],
        success: function(mediaElement, domElement) {
            mediaElement.addEventListener('ended', function(e) {
                if (currentlyPlaying) {
                    playNextWord(2, 1);
                }

            }, false);
            mediaElement.addEventListener('playing', function(e) {
                $("#videobox1").removeClass('hideme');
                loadVideoInPlayer(currentPlaybackItem + 1, 2);
                mainPlayer[2][0].player.media.pause();
            }, false);
        }
    });
    mainPlayer[2] = $('#video2').mediaelementplayer({
        features: [],
        success: function(mediaElement, domElement) {
            mediaElement.addEventListener('ended', function(e) {
                if (currentlyPlaying) {
                    playNextWord(1, 2);
                }
            }, false);
            mediaElement.addEventListener('playing', function(e) {
                $("#videobox2").removeClass('hideme');
                loadVideoInPlayer(currentPlaybackItem + 1, 1);
                mainPlayer[1][0].player.media.pause();
            }, false);
        }
    });
    mainPlayer[3] = $('#video3').mediaelementplayer({
        features: [],
        success: function(mediaElement, domElement) {
            mediaElement.setVolume(0);
            mediaElement.addEventListener('ended', function(e) {
                mainPlayer[3][0].player.media.play();
            }, false);
        }
    });
    mainPlayer[4] = $('#video4').mediaelementplayer({
        features: [],
        success: function(mediaElement, domElement) {
            mediaElement.addEventListener('ended', function(e) {
                $("#videobox3").removeClass('hideme');
                $("#videobox4").addClass('hideme');

            }, false);
        }
    });
    MEPreloader = new Array();
    MEPreloader[1] = $('#preloader1').mediaelementplayer({
        features: [],
        success: function(mediaElement, domElement) {
            mediaElement.setVolume(0);
            mediaElement.addEventListener('ended', function(e) {
                if (oneWordPreview > 0) {
                    $("#preloadOne").hide();
                    currentlyPreloading = 0;
                    preLoaderPlaying[1] = 0;
                    previewWord(oneWordPreview);
                    oneWordPreview = 0;

                } else {
                    assignPlClip(1);
                    preLoaderPlaying[1] = 0;
                    totallyLoaded++;
                }
            }, false);
            mediaElement.addEventListener('play', function(e) {
                preLoaderPlaying[1] = 1;
            }, false);
        }
    });
    
	for (i=2;i<numberOfPreloaders+1;i++) {
		MEPreloader[i] = $('#preloader'+i).mediaelementplayer({
	        features: [],
	        success: function(mediaElement, domElement) {
	            mediaElement.setVolume(0);
	            mediaElement.addEventListener('ended', function(e) {
					myid = $(this).attr('id').substring(9);
	                assignPlClip(myid);
	                preLoaderPlaying[i] = 0;
	                totallyLoaded++;
	            }, false);
	            mediaElement.addEventListener('play', function(e) {
	                preLoaderPlaying[i] = 1;
	            }, false);
	        }
	    });	
	}



    cook = $.cookie('spmx-help');
    if (!cook) {
        $.cookie('spmx-help', 'on');
    }
    cook = $.cookie('spmx-help');
    if (cook == 'on') {
        showHelp();
    }
    $("#progress").hide();
//    $('#preloaderContainer').hide();
    // createPreloaders(numberOfPreloaders); mmm temp
});

function showButtons(message) {
	if(message) {
			$("#button-publish").fadeIn(250);
			$("#button-new").fadeIn(250);		
		} else {
			$("#button-publish").fadeOut(250);
			$("#button-new").fadeOut();					
		}
}

function createNew() {
    $("#sortable > li").remove();
}
function masterbreak(what) {
    if (what == 'show') {
        $("#videobox3").removeClass('hideme');
        $("#videobox2").addClass('hideme');
        $("#videobox1").addClass('hideme');
    } else {
        $("#videobox3").addClass('hideme');
    }
}

function playNextWord(showThis, hideThis) {
    if (currentPlaybackItem <= playlist.length - 2) {
        currentPlaybackItem++;
        $("#videobox" + hideThis).addClass('hideme');
        $("#videobox" + showThis).removeClass('hideme');
        mainPlayer[showThis][0].player.media.play();
        markWordAsCurrent(playWords[currentPlaybackItem][2]);
    } else {
        stopPlayback();
    }
}

function cancelPreload() {
    $("#progress").hide();
    clearInterval(supercheck);
    playSpeech();
}

function showHelp() {
    $.cookie('spmx-help', 'on');
    $('#wordPool').removeData('qtip').qtip({
        content: {
            text: '<b>How to create your own speechmix</b><br /><br />On the right is a list of words and phrases. Drag them over to the paper on the left to add them to your speechmix. Double click a word to preview it.<br /><br />Click the play button below the video to play your speechmix. Click on a word in your speechmix to play from this position.<br /><br />To remove a word, click on it and then click the delete button. <br /><br />Have fun!',
            title: {
                text: 'Quick start guide',
                button: true
            }
        },
        events: {
            hide: function() {
                $.cookie('spmx-help', 'off');
				$("#button-help").show();
            },
			show: function() {
				$("#button-help").hide();
			}
        },
        position: {
            my: 'center right',
            at: 'center left'
        },
        show: {
            event: false,
            ready: true
        },
        hide: {
            event: false
        },
        style: {
            classes: 'ui-tooltip-shadow ui-tooltip ui-tooltip-rounded',
			width: "400"
        }
    });

}
function makeURLforPreview(item) {
    var theItem = wordPool[item];
    var theWordNumber = wordPool[item].split("_")[0];
    var theURLs = new Array();
    theURLs['webm'] = cdnBase + "webm/" + theWordNumber + ".webm";
    theURLs['mp4'] = cdnBase + "mp4/" + theWordNumber + ".mp4";
    return theURLs;
}

function makeURLforMainPlayer(item) {
    theItem = playlist[item][1];
    var theURLs = new Array();
    theURLs['webm'] = cdnBase + "webm/" + theItem + ".webm";
    theURLs['mp4'] = cdnBase + "mp4/" + theItem + ".mp4";
    return theURLs;
}

function loadVideoInPlayer(item, player) {
    lastActivePlayer = player;
    if (item < playlist.length) {
        tempPLid = mainPlayer[player];
        assignSource(tempPLid, makeURLforMainPlayer(item));
    }
}

function assignSource(where, what) {
    var mp4 = what['mp4'];
    var webm = what['webm'];
    vidsrc = new Array();
    vidsrc = [{
        src: mp4,
        type: 'video/mp4'
    }, {
        src: webm,
        type: 'video/webm'
    }];
    where[0].player.setSrc(vidsrc);
    where[0].player.media.load();
    // 	where[0].player.media.play();
}

function makePlayList() {
    tempCArr = new Array();
    numberOfUniqueWords = 0;
    result = $('#sortable').find(".word");
    playWords = new Array();
    counta = 0;
    result.each(function() {
        var kid = $(this);
        wordNumber = kid.attr('class');
        tempAr = wordNumber.split("X");
        playWords[counta] = new Array();
        playWords[counta][0] = tempAr[1];
        temp = kid.attr('class');
        var theWord = wordPool[tempAr[1]].split("_")[0];
        playWords[counta][1] = theWord;

        tempAr2 = wordNumber.split("Y");
        playWords[counta][2] = tempAr2[1];
        counta = counta + 1;
        tempCArr[theWord] = theWord;
    });
    for (var i in tempCArr) {
        if (itemsToPreload[i] != 1) {
            numberOfUniqueWords++;
        }
    }
    if (numberOfUniqueWords > 0) {
        $("#progress").show();
    }
    return playWords;
}

function pressMuteButton() {
  if (currentlyMuted) {
		currentlyMuted = 0;
		mainPlayer[1][0].player.setVolume(1);
    	mainPlayer[2][0].player.setVolume(1);
    	mainPlayer[3][0].player.setVolume(1);	
	    $("#mute").removeClass('muteoff').addClass('mute');
	} else {
		currentlyMuted = 1;
    	mainPlayer[1][0].player.setVolume(0);
    	mainPlayer[2][0].player.setVolume(0);
    	mainPlayer[3][0].player.setVolume(0);
	    $("#mute").removeClass('mute').addClass('muteoff');
	}	
}
function pressPlayButton() {
    if (!currentlyPlaying) {

        if (!currentlyPreloading) {
            preload();
        } else {
            currentlyPreloading = 0;
            $("#progress").hide();
            clearInterval(supercheck);
            pausePlayback();
        }

    } else {
        pausePlayback();
    }
}

function preload() {
	blockClick(0);
	mainPlayer[4][0].player.media.pause();
    currentlyPreloading = 1;
    $("#play").removeClass('play').addClass('pause');
    allItemsPreloaded = 0;
    playlist = makePlayList();
    itemToPreLoad = -1;
    plPlayer = 1;
    for (c = 1; c <= numberOfPreloaders; c++) {
        if (c <= playlist.length) {
            assignPlClip(c);
        }
    }
    totallyLoaded = 0;
    supercheck = setInterval(function() {
        loadProgress = totallyLoaded / (numberOfUniqueWords / 100);
        $('#alreadyloaded').html(totallyLoaded);
        $('#totalwords').html(numberOfUniqueWords);
        $("#progressbar").progressbar({
            value: loadProgress
        });
        stillLoading = 0;
        for (cc = 1; cc <= numberOfPreloaders; cc++) {
            if (preLoaderPlaying[cc] == 1) {
                stillLoading = 1;
            }
        }
        if (itemToPreLoad >= playlist.length && stillLoading == 0) {
            $("#progress").hide();
            allItemsPreloaded = 1;
            clearInterval(supercheck);
            playSpeech();
        }
    }, 1);
}

function createPreloaders(count) {
    for (var c = 1; c <= count; c++) {
        plID = "preloader" + c;
        newPl = '<div style="float:left"><video id="' + plID + '" preload="auto" width="100"></video></div>';
        $("#preloaderContainer").append(newPl);
        plID1 = "#preloader" + c;
        if (hidePreloaders) {
            $(plID1).get(0).volume = 0;
        }
    }
    if (hidePreloaders) {
        $('#preloaderContainer').hide();
    }
}

function co(message) {
    console.log(message);
}

function assignPlClip(plPlayer) {
    itemToPreLoad++;
    if (itemToPreLoad >= playlist.length) {} else {

        tempPLid = MEPreloader[plPlayer];
        theItem = playlist[itemToPreLoad][1];
		// loadedID = currentSource+'_'+playlist[itemToPreLoad][1];
		// isItLoaded = $.cookie(loadedID);
        if (itemsToPreload[theItem] != 1) {
            //item was not preloaded yet
            itemsToPreload[theItem] = 1;
            // var theURL = makeURLforMainPlayer(itemToPreLoad)['webm']['hd'];
            // tempPLid.get(0).src = theURL; // old mmx
			myURL = makeURLforMainPlayer(itemToPreLoad);
            assignSource(tempPLid, myURL); // new  mmx
            tempPLid[0].player.media.play();
		// 	$.cookie(loadedID, '1');
        } else {
            //item was already preloaded			
            if (allItemsPreloaded != 1) {
                assignPlClip(plPlayer);
            }
        }
    }
}

function markWordAsCurrent(thisWord) {
    $('#sortable').find('.current').removeClass('current');
    theClass = '.' + 'Y' + thisWord + 'Y';
    $('#sortable').find(theClass).addClass('current');

}

function showDeleteButton(thisWord) {
    $('#sortable').find('.deleteButton').remove();
    theClass = '.' + 'Y' + thisWord + 'Y';
    delAppend = '<div class="deleteButton" onclick="deleteWord(' + thisWord + ');"></div>';
    $('#sortable').find(theClass).append(delAppend);
}

function deleteWord(thisWord) {
    $('#sortable').find(theClass).remove();
	 if (!$('#sortable').find('a').length) {
		showButtons(0);
	};
	
}

function wordClick(word) {
	if (!currentlyPlaying && !currentlyPreloading) {
    	preLoadPreview(word);
	}
}

function preLoadPreview(word) {
    $("#preloadOne").show();
    currentlyPreloading = 1;
    // itemToPreLoad = 10;
    tempPLid = MEPreloader[1];
    theItem = word;
    oneWordPreview = word;
    assignSource(tempPLid, makeURLforPreview(word));
    tempPLid[0].player.media.play();
}
function previewWord(word) {
	    $("#videobox4").removeClass('hideme');
	    $("#videobox3").addClass('hideme');
	    tempPLid = mainPlayer[4];
	    ter = makeURLforPreview(word);
	    assignSource(tempPLid, makeURLforPreview(word));
}

//-->


	function getUniqueWordNumber(rein) {
	    tempAr = rein.split("Y");
	    raus = tempAr[1];
	    return raus;
	}

	function getWordPosition(rein) {
	    //	var listItem = document.getElementById('bar');
	    // var listItems = $('li:gt(0)');
	    //	alert('Index: ' + $('li').index(listItem));
	    temp = '.Y' + rein + 'Y';
	    listItem = $(temp);
	    var index = $('#sortable').find('a').index(listItem) + 1;
	    return index;
	}


	function updateTips(t) {
	    tips = $(".validateTips");
	    tips.text(t).addClass("ui-state-highlight");
	    setTimeout(function() {
	        tips.removeClass("ui-state-highlight", 1500);
	    }, 500);
	}

	function checkLength(o, n, min, max) {
	    if (o.val().length > max || o.val().length < min) {
	        o.addClass("ui-state-error");

	        updateTips("Length of " + n + " must be between " + min + " and " + max + " characters.");
	        return false;
	    } else {
	        return true;
	    }
	}

	function clickNew() {
		if (!currentlyPlaying && !currentlyPreloading) {
		    $("#dialog").remove();
		    newDialog = '<p class="validateTips">Are you sure you want to clear all words and start over with a fresh speechmix?</p>';
		    var $dialog = $('<div id="dialog"></div>').html(newDialog).dialog({
		        autoOpen: false,
		        modal: true,
		        title: 'Clear all words?',
		        resizable: false,
		        height: 160,
		        width: 500,
		        buttons: {
		            "Yes, clear all words": function() {
		                createNew();
		                $("#dialog").remove();
		                $(this).dialog("close");
						showButtons(0);
		            },
		            Cancel: function() {
		                $("#dialog").remove();
		                $(this).dialog("close");
		            }
		        },
		    });
		    numberOW = $("#sortable").find(".word").length;
		    if (numberOW > 0) {
		        $dialog.dialog('open');
		    }
		} 
	}

	function saveSpeech() {
	    $("#dialog").remove();
	    numberOW = $("#sortable").find(".word").length;
	    if (numberOW > 0) {
	        saveDialog = '<p class="validateTips">Please fill in both fields.<br /></p><form id="saveFormID"><fieldset><div class="field-save"><label for="speechtitle">Speech title</label><br /><input type="text" name="speechtitle" id="speechtitle" class="text ui-widget-content ui-corner-all" /></div><div class="field-save"><label for="name">Your name</label><br /><input type="text" name="yourname" id="yourname" class="text ui-widget-content ui-corner-all" /></div></fieldset></form><div id="loadingDiv" style="width:100%;text-align:center;display:none;">Publishing your speech, please wait a moment <br /><img src="http://c744442.r42.cf2.rackcdn.com/loading.gif"></div>';

	        var $dialog = $('<div id="dialog"></div>').html(saveDialog).dialog({
	            autoOpen: false,
	            modal: true,
	            title: 'Publish speechmix',
	            resizable: false,
	            height: 325,
	            width: 500,
	            buttons: {
	                "Publish my awesome speechmix!": function() {
	                    var bValid = true;
	                    allFields.removeClass("ui-state-error");
	                    bValid = bValid && checkLength($("#speechtitle"), "speech title", 3, 50);
	                    bValid = bValid && checkLength($("#yourname"), "your name", 3, 50);
	                    if (bValid) {
	                        publishSpeech();
	                    }
	                },
	                Cancel: function() {
	                    $("#dialog").remove();
	                    $(this).dialog("close");
	                }
	            },
	        });
	        $dialog.dialog('open');
	    } else {
	        noWordsDialog = 'Please add some words before saving your speech.';
	        var $noWords = $('<div id="dialog"></div>').html(noWordsDialog).dialog({
	            autoOpen: false,
	            modal: true,
	            title: 'No words added yet.',
	            resizable: false,
	            height: 150,
	            width: 500,
	            buttons: {
	                "OK": function() {
	                    $(this).dialog("close");
	                },
	            },

	        });
	        $noWords.dialog('open');
	    }
	}



	function getCurrentSpeechWords() {
	    result = $('#sortable').find(".word");
	    playWords = new Array();
	    c = 0;
	    result.each(function() {
	        var kid = $(this);
	        wordNumber = kid.attr('class');
	        tempAr = wordNumber.split("X")[1];
	        playWords[c] = wordPool[tempAr];
	        c++;
	    });
	    return playWords;
	}

	function playSpeech() {
		blockClick(1);
	    currentlyPreloading = 0;
	    $("#videobox4").addClass('hideme');
	    $("#videobox2").addClass('hideme');
	    $("#videobox1").removeClass('hideme');
	    // $("#videobox3").addClass('hideme');
	    masterbreak('hide');
	    $('#sortable').find('.deleteButton').remove();
	    markWordAsCurrent(playWords[currentPlaybackItem][2]);
	    currentlyPlaying = true;
	    loadVideoInPlayer(currentPlaybackItem, 1);
	    mainPlayer[1][0].player.media.play();
	    loadVideoInPlayer(currentPlaybackItem + 1, 2);
	    mainPlayer[2][0].player.media.pause();
	}

	function pausePlayback() {
	    masterbreak('show');
	    mainPlayer[1][0].player.media.pause();
	    mainPlayer[2][0].player.media.pause();
	    $("#play").removeClass('pause').addClass('play');
	    currentlyPlaying = false;
	}

	function stopPlayback() {
	    masterbreak('show');
	    currentPlaybackItem = 0;
	    markWordAsCurrent(0);
	    $("#play").removeClass('pause').addClass('play');
	    currentlyPlaying = false;
	}
	$(function() {
	    globalWordCount = 0;
	    $('#tabs-1 > div > ul > li').draggable({
			drag: function(event,ui) {	
 				$(ui.helper).addClass('dragging');
			},
	        helper: 'clone',
	        connectToSortable: '#sortable'
	    });
	    $('#tabs-2 > div > ul > li').draggable({
	        helper: 'clone',
	        connectToSortable: '#sortable'
	    });
	    $("#sortable").droppable({
	        drop: function(event, ui) {
	            ui.draggable.addClass('onPaper');
				ui.draggable.removeClass('dragging');
				showButtons(1);
	        }
	    });
	    $("#sortable").sortable({
	        revert: false,
	        remove: function(event, ui) {},
			over: function(event,ui) {
				$('#sortable').find('.deleteButton').remove();
			},
	        update: function(event, ui) {

	            allClasses = ui.item.find('.word').attr("class");
	            isOnPaper = allClasses.search("Y");
	            // check if Word on paper already has a unique number
	            if (isOnPaper > 0) {} else {
	                globalWordCount++;
	                glclass = 'Y' + globalWordCount + 'Y';
	                ui.item.find('.word').addClass(glclass);
	            }
	            ui.item.click(function() {
	                uniquelist = getUniqueWordNumber(ui.item.find('.word').attr("class"));
	                currentPlaybackItem = getWordPosition(uniquelist) - 1;
	                markWordAsCurrent(uniquelist);
	                showDeleteButton(uniquelist);
	            });
	        }
	    });
	    $("ul, li").disableSelection();
	});