/* *************************************************************************** * VARIABELE OM DE ID VAN DE COMPONEERTOOL DIV OP TE SLAAN *************************************************************************** */ var flashTargetDivId; // kijk of iemand is ingelogd en zo nee, presenteer opties ifNotLoggedInNotify = function(){ ikcomponeerswf().xsLoad( { toUrl:'http://ikcomponeer.nl/mco2/openid/getstatus', forFunction:'setUser', serviceReturnType:'json' }); } notifyOptions = function(){ var options = { title: "Vernieuwde Componeertool", buttons: { "OK" : function() { var jrm = jQuery("#janrainEngage"); jrm.click(); jrm.toggleClass('janrainEngage',false); jQuery("#janrainView .janrainHeader div")[0].innerText = "Inloggen met behulp van (kies):"; jQuery("#janrainModal").css("z-index","1006"); jQuery(this).dialog('destroy'); }, "Vorige Versie" : function(){ jQuery(this).dialog("close"); window.location = "http://ikcomponeer.nl/avrored" } }, modal: true, width: 500, closeOnEscape: false, beforeClose: function(event, ui) { return false; } }; var explain = "

Beste bezoeker. Hier staat een nieuwe verbeterde versie van de componeertool. Je kan hier inloggen met een profiel van sites zoals Hyves, Facebook en Google/Gmail. Als je je eerder gemaakte liedjes weer wilt bewerken, kan je altijd op de knop 'vorige versie componeertool' klikken. We wensen je veel plezier met de nieuwe versie!

"; jQuery("#basicDialog").html(explain); jQuery("#basicDialog").dialog(options); } /* *************************************************************************** * CROSS BROWSER KAN JE HET FLASH OBJECT BEREIKEN MET DEZE HELPER FUNCTIE *************************************************************************** */ function ikcomponeerswf() { if (window.document[flashTargetDivId]) { return window.document[flashTargetDivId]; } else { return document.getElementById(flashTargetDivId); } } /* *************************************************************************** * HIERMEE WORDT DE COMPONEERTOOL ALS OBJECT IN DE BETREFFENDE DIV GEPOMPT *************************************************************************** * * Met deze methode kan de meest recente versie worden geladen. * * 1. de yui-seed, swfobject2 & json worden geladen * 2. de meest recente versie van de componeertool wordt geladen * 3. de componeertool zal zich melden, zie mcoToolRunning() * */ function embedComponeertool(componeertool_target_div_id){ flashTargetDivId = componeertool_target_div_id; var headID = document.getElementsByTagName("head")[0]; var newScript = document.createElement('script'); newScript.type = 'text/javascript'; newScript.src = 'http://yui.yahooapis.com/3.3.0/build/yui/yui-min.js'; newScript.onload = newScript.onreadystatechange = function(){ if (!this.readyState || this.readyState == "loaded" || this.readyState == "complete") { YUI().use("node", function (Y) { var handlerData = {}; var successHandler = function(oData) { embedVersion(flashTargetDivId); initUI(); }; var aURLs = []; if(Y.one('head script[src="http://ikcomponeer.nl/js/json2.js"]')==null){ aURLs.push("http://ikcomponeer.nl/js/json2.js"); } if(Y.one('head script[src="http://ikcomponeer.nl/js/swfobject.js"]')==null){ aURLs.push("http://ikcomponeer.nl/js/swfobject.js"); } if(Y.one('head script[src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"]') == null){ aURLs.push("http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"); } if(Y.one('head script[src="http://ikcomponeer.nl/js/jquery-ui-1.8.16.custom.min.js"]') == null){ aURLs.push("http://ikcomponeer.nl/js/jquery-ui-1.8.16.custom.min.js"); } if(Y.one('head script[src="http://ikcomponeer.nl/js/jquery.jcarousel.min.js"]') == null){ aURLs.push("http://ikcomponeer.nl/js/jquery.jcarousel.min.js"); } if(Y.one('head script[src="http://ikcomponeer.nl/js/jquery.simplemodal.js"]') == null){ aURLs.push("http://ikcomponeer.nl/js/jquery.simplemodal.js"); } if(Y.one('head script[src="http://ikcomponeer.nl/js/jsrender.js"]')==null){ aURLs.push("http://ikcomponeer.nl/js/jsrender.js"); } aURLs.push("http://ikcomponeer.nl/mco2/embedversion"); Y.Get.script(aURLs, { onSuccess: successHandler, data: handlerData }); }); } }; headID.appendChild(newScript); } /* *************************************************************************** * DE COMPONEERGAME/TOOL IS GELADEN EN MELDT ZICH *************************************************************************** * * Nu gaan we gebruik maken van de cross-domain capabiliteiten van Flash. * We roepen in flash de requestChallenge functie aan, om de challenge voor * het inloggen op te halen bij de ikcomponeer server. * */ function McoToolRunning() { ifNotLoggedInNotify(); } var shakeTV = function(){ var tv = jQuery('#secondary .lowCorner'); tv.hide('slide');// niet veel doet het maar blind lijkt me leuk voor de fotos } var removeMoviePlayerContent=function(){ jQuery('#moviePlayer').remove('.iframeContainer'); } var showTV = function(){ jQuery("#secondary .lowCorner").show('slide'); } var iFrameModal = function(iframe,title){ var xmldoc = jQuery.parseXML(iframe); var xmlifr = jQuery(xmldoc).children()[0]; var wdt = jQuery(xmlifr).attr("width"); var hgt = jQuery(xmlifr).attr("height"); jQuery( "#movieViewer" ).html(iframe); jQuery( "#movieViewer" ).show(); jQuery( "#movieViewer" ).dialog({ close: function(event, ui) { jQuery(this).dialog("destroy"); }, modal: true, height: parseInt(hgt)+70, width: parseInt(wdt)+35, title: title }); } var initUI = function(){ jQuery(function() { jQuery( "button, a", "#primary" ).button(); jQuery("#secondary .lowCorner").click(function() { shakeTV(); viewMovie(); }); jQuery("#primary #logout").click(mco_logout); jQuery("#primary #playlist").click(mco_playlist); jQuery("#primary #about").click(mco_about); }); } function mco_logout(){ window.location = "http://ikcomponeer.nl/mco2/openid/logout";} function mco_playlist(){ var gfr = jQuery("#iFrameGallery").render({}); jQuery("#galleryIFrame").append(gfr); /* jQuery("#galleryIFrame").modal({ onClose: function(){ jQuery("#galleryIFrame").children().remove(); jQuery.modal.close(); } }); */ jQuery("#galleryIFrame").dialog({ width:879, height:982, beforeClose: function(){ jQuery(this).dialog("destroy"); jQuery("#galleryIFrame").children().remove(); } }).css({"padding-left":"0px","padding-right":"0px","padding-bottom":"0px","padding-top":"0px"}); } function mco_about(){ var options = { title: "Over de Componeertool", buttons: { "OK" : function() { jQuery(this).dialog("destroy"); } }, width: 500, modal: true, closeOnEscape: false, beforeClose: function(event, ui) { jQuery(this).dialog("destroy"); } }; var explain = "

De componeertool is een project van MCO, AVRO, NTR. Je kunt hier je eigen composities maken en er zijn informatiefilmpjes over alle instrumenten te zien. Zo leer je ook nog alle orkestinstrumenten kennen.

De samples op deze site zijn ingespeeld door musici van het MCO. Als je met de muis op de afbeeldingen gaat staan, kun je de filmjpes van de 'making of' bekijken. De samples zullen snel worden aangevuld met nog meer opnames, die voor de composities zijn te gebruiken. Voor meer informatie over deze site of onze muziekeducatie workshops kun je mailen naar: educatie@mco.nl. Of kijk op www.mco.nl/educatie.

"; jQuery("#basicDialog").html(explain); jQuery("#basicDialog").dialog(options); } /* *************************************************************************** * RETURN VAN DE CHALLENGE, WE KUNNEN EEN RESPONSE MET DE LOGIN KLAARMAKEN *************************************************************************** * * Afhankelijk welke omgeving we draaien (server side ingestelde test en * productie omgevingen vandaar het lelijk-gegenereerde script) gaan we de * AVRO of de Fake-functie voor de login gegevens aanroepen. * */ function challengeFromService(value) { ikcomponeerswf().xsLoad({toUrl:'http://ikcomponeer.nl/mco2/openid/getstatus', forFunction:'setUser', serviceReturnType:'json'}); } var adt_media = { "-1":["http://www.youtube.com/embed/eAnglPCT5bs","MCO-making-off-piano.jpg","De opnames voor Ikcomponeer"], "21":["http://www.schooltv.nl/beeldbank/embedded.jsp?clip=20051123_hobo01","Hobo.jpeg","Houtblazers"], "25":["http://www.schooltv.nl/beeldbank/embedded.jsp?clip=20051123_viool01","Viool.jpeg", "Strijkers"], "23":["http://www.schooltv.nl/beeldbank/embedded.jsp?clip=20060411_harp01","Harp.jpeg", "Harp"], "22":["http://www.schooltv.nl/beeldbank/embedded.jsp?clip=20051123_hoorn01","Hoorn.jpeg", "Koperblazers"], "24":["http://www.schooltv.nl/beeldbank/embedded.jsp?clip=20051123_percussie01","Percussie.jpeg", "Percussie"], "34":["http://www.schooltv.nl/beeldbank/embedded.jsp?clip=20110608_houtblazers01","NTR-houtblazer.jpg","Houtblazers"], "38":["http://www.schooltv.nl/beeldbank/embedded.jsp?clip=20110608_viool01","NTR-violist.jpg", "Strijkers"], "35":["http://www.schooltv.nl/beeldbank/embedded.jsp?clip=20110608_hoorn01","NTR-koperblazer-hoorn.jpg","Koperblazers"], "36":["http://www.schooltv.nl/beeldbank/embedded.jsp?clip=20110608_harp01","NTR-divers-harp.jpg","Harp"], "37":["http://www.schooltv.nl/beeldbank/embedded.jsp?clip=20051123_percussie01","Percussie.jpeg","Percussie"], "17":["http://www.schooltv.nl/beeldbank/embedded.jsp?clip=20051123_trompet01","trompet.jpeg","Koperblazers"], "16":["http://www.youtube.com/embed/J5JbIyJMZOw","MCO-making-off-hout.jpg","Houtblazers"], "19":["http://www.youtube.com/embed/I9XUugg4TXE","MCO-making-off-pauken.jpg","Percussie"], "20":["http://www.youtube.com/embed/FFqfJ_oUSRQ","MCO-making-off-strijkers.jpg","Strijkers"], "18":["http://www.youtube.com/embed/9hsbZ_7aLW0","MCO-making-off-piano.jpg","Piano"] } function instrumentGroupClicked(v){ var tojs = v+""; var flim = adt_media[tojs][0]; var voto = adt_media[tojs][1]; var iframe = jQuery(flim.indexOf("yout")>=0?"#iFrameYouTube":"#iFrameSchoolTv").render({url:flim}); var imgurl = "http://ikcomponeer.nl/img/"+voto; var img = jQuery("#fotoPlaatje").render({url:imgurl}); jQuery("#mycarousel").prepend(img); jQuery("#mycarousel div").each(function(index,element){ if(index == 0){ jQuery(element).css({"width": "256px","height": "144px","top":"366px", "left":"-120px"}); jQuery(element).show("slide",{},200); jQuery("img",element).click(function() { iFrameModal(iframe,adt_media[tojs][2]); }); jQuery("img",element).mouseover(function(){ jQuery(this).css("cursor","pointer");}); } else if(index == 1){ jQuery(element).animate({width:"128",height:"72",left:"11",top:"283"}); }else if(index == 2){ jQuery(element).animate({top:"200"}); }else if(index == 3){ jQuery(element).animate({top:"117"}); }else if(index == 4){ jQuery(element).animate({top:"34"}); }else{ jQuery(element).remove(); } }); } function setUser(val){ if(val == false){ notifyOptions(); }else{ var jrm = jQuery("#janrainEngage"); if(jrm != null && jrm != undefined){ jrm.hide(); } loginUser({guid:val,responseString:"own",userName:"own"}); } } /* *************************************************************************** * DE RESPONSE EN DE LOGIN GEGEVENS INGEVAL VAN TEST *************************************************************************** * * Een geslaagde value voor deze functie ziet er in json bijvb. zó uit: * {"guid":"e3f1c1ca-73e5-47bd-a076-ee8d5cce1a40", * "responseString":"9e343ffb1b76a77de939543d60e6ebd6", * "userName":"Wilhelmus van Nassaue"} * * Als we in de test omgeving draaien gebruiken we deze functie om terug te * komen met de login. * * In plaats hiervan, omdat je niet cross-domain mag javascripten, zou het * onderstaande door een ander domein (bijvb. AVRO) moeten worden uitgevoerd. * Immers, de loginUser functie in dit script is voor het andere domein niet * bereikbaar en de ikcomponeerswf functie ook niet. * * Dan dient dus in plaats van ___divId___ de betreffende id te worden * gebruikt (van het flash object / waarmee ook embedComponeertool was aan- * geroepen) en het volgende te worden uitgevoerd: * * if (window.document[___divId___]) { * window.document[___divId___].loginUser(value); * } else { * document.getElementById(___divId___).loginUser(value); * } * */ function loginUser(value) { ikcomponeerswf().loginUser(value); } /* *************************************************************************** * DE GEBRUIKER IS ANONIEM EN MOET INLOGGEN *************************************************************************** * * Als de gebruiker de standaard anonieme gebruiker is dan roept flash deze * functie aan. Afhankelijk welke omgeving we zijn, wordt de AVRO of de fake * login window in het scherm gezet. * */ function openLoginWindowForUser(){ } /* *************************************************************************** * ALERT-HELPERS VOOR GEVALLEN VAN WEGNAVIGEREN MET ONGEWENSTE GEVOLGEN *************************************************************************** */ var uploadingMessage = "De componeertool is nog bezig om je muziek naar de AVRO te sturen. Dat zal mislukken als je de pagina nu afsluit."; var notSavedMessage = "Je hebt je liedje aangepast maar dit is nog niet opgeslagen. Klik op 'opslaan' voordat je deze pagina afsluit."; function ikcomponeerOnBeforeUnloadSetUPL(){ window.onbeforeunload = function() { return uploadingMessage; } } function ikcomponeerOnBeforeUnloadSetSAV(){ window.onbeforeunload = function() { return notSavedMessage; } } function ikcomponeerOnBeforeUnloadSetNILL(){ window.onbeforeunload = null; } /* *************************************************************************** * GEBRUIKERS OP BASIS VAN OPENID EEN ACCOUNT IN DE DATABASE GEVEN *************************************************************************** */ function setRandomTokenAtClient(randomToken){ alert(randomToken); }