// media-player.js
// by Gav Ford
// gav@revford.co.uk
// http://revford.co.uk
// 2010-08-28, updated 2010-08-29
// A media players using JavaScript and HTML5
// where lots of " where causing problems in document.write, replace with "

// update 2010-08-29 moved lots of the code into it's own functions, so I can reuse it in the video player.
// simplified the interface from two to one button




  function buttonplay(thisfile)
    {
    return('<span class="clickme" onclick="mediaplay(' + '&#34;' + thisfile + '&#34;' + ')">' +
           '<img src="images/media-play.png" alt="&gt;">' +
           '</span>')
    }



  function buttonpause(thisfile)
    {
    return('<span class="clickme" onclick="mediapause(' + '&#34;' + thisfile + '&#34;' + ')">' +
           '<img src="images/media-pause.png" alt="||">' +
           '</span>')
    }



  function mediaplay(thismedia)
    {
    var thisplayer = document.getElementById(thismedia);
    thisplayer.play();
  

    document.getElementById(thismedia+'ctrl').innerHTML=buttonpause(thismedia);
    }

  function mediapause(thismedia)
    {
    var thisplayer = document.getElementById(thismedia);
    thisplayer.pause();

    document.getElementById(thismedia+'ctrl').innerHTML=buttonplay(thismedia);
    }

  function errormessage()
    {
    document.write("\n\n");
    document.write('    <div class="error"><p><span class="red">BROWSER FAIL</span>  ' + "\n");
    document.write('    Your browser is letting you down.</p>' + "\n\n");

    document.write('    <p>This page makes use of HTML5 for either audio or video and your browser doesn&#39;t support it.');
    document.write('    The current versions of all the good graphical browsers can do this.</p>' + "\n\n");

    document.write('    <p>If you&#39;re using a modern browser, update to the latest version.  If you&#39;re using');
    document.write('    Microsoft Internet Explorer try one of these.</p>' + "\n\n");

    document.write('    <a href="http://mozilla.com">Mozilla Firefox</a><br>' + "\n");
    document.write('    <a href="http://www.google.com/chrome">Google Chrome</a><br>' + "\n");
    document.write('    <a href="http://www.opera.com">Opera</a><br>' + "\n");
    document.write('    <a href="http://www.apple.com/safari">Apple Safari</a><br>' + "\n");
    document.write('    </div>' + "\n\n");
    }


  function audioplayer(audiofile)
    {
    document.write("\n\n\n");

    document.write('<link rel="stylesheet" type="text/css" href="css/media.css" media="screen">' + "\n\n");

    document.write('  <audio src="' + audiofile + '" id="' + audiofile + '">' + "\n");
    errormessage();
    document.write('  </audio>' + "\n\n");


    document.write('<div class="audioplayer" id="' + audiofile + 'ctrl">');
    document.write(buttonplay(audiofile));
    document.write('</div>' + "\n\n\n");
    }


  function videoplayer(videofile)
    {
    document.write("\n\n\n");

    document.write('<link rel="stylesheet" type="text/css" href="css/media.css" media="screen">' + "\n\n");

    document.write('<div class="videoplayer">' + "\n");

    document.write('  <video src="' + videofile + '" id="' + videofile + '">' + "\n");
    errormessage();
    document.write('  </video>' + "\n\n");

    document.write('  <br>' + "\n");

    document.write('<div class="videocontrol" id="' + videofile + 'ctrl">' + "\n");
    document.write(buttonplay(videofile));
    document.write('</div>' + "\n");
    document.write('</div>' + "\n\n\n");
    }