MediaWiki:Common.js

From Progzoo
Jump to: navigation, search
  (function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
  (i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
  m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
  })(window,document,'script','//www.google-analytics.com/analytics.js','ga');

  ga('create', 'UA-1828419-2', 'auto');
  ga('send', 'pageview');

/* Lachlan Kidson 2015-06-26 */
$(function(){

$('#p-namespaces ul li').remove();
$('#p-Languages li').appendTo('#p-namespaces ul');
$('#p-Languages').remove();
//$(".menu ul li").remove();
//$("#p-cactions span").replaceWith("<span>Show Sidebar</span>");
$("<p style='font-size: 0.7em; '><b>ProgZoo Sections</b></p>").appendTo(".menu ul");
$("#p-Progzoo_Sections li").appendTo(".menu ul");
$("<p style='font-size: 0.7em; '><b>Toolbox</b></p>").appendTo(".menu ul");
$('#p-tb li').appendTo(".menu ul");
$("<p style='font-size: 0.7em; '><b>Other</b></p>").appendTo(".menu ul");
$('#p-Other li').appendTo(".menu ul");
$("#p-Progzoo_Sections li").remove();
$('#p-Other li').remove();
$('#p-tb li').remove();
});

//Quiz setup
$(function(){
  $('.quiz .q').each(function(i,val){
     $(this).prepend((i+1)+". ");i
  });
  $('.quiz .q .d').click(function(){
     $('.d',$(this).parent()).removeClass('picked');
     $(this).addClass('picked');
  });
  $('div.i').each(function(){ // Replace div.i with input
     var dataregex = $(this).attr("data-regex");
     var dataregexflags = $(this).attr("data-regex_flags");
     var text = $(this).text();
     $(this).replaceWith('<input class="picked" data-regex="'+dataregex+'" data-regex_flags="'+dataregexflags+'">'+text+'</input>');
  });
  $('.quiz').append($('<button />',{text: 'Score the test',click:function(){
    $('.q').fadeOut(0).fadeIn("slow");
    $('.feedback',$(this).parent()).remove();
    $('input.picked').each(function(){
        var flags = $(this).attr("data-regex_flags");
        var myRegExp = $(this).attr("data-regex");
        var check = new RegExp(myRegExp, flags);
        if (check.test($(this).val())){
            $(this).addClass("y");
        } else {$(this).removeClass("y");}
    });
    var selection =
        $('.quiz .q').map(function(){
          var stringToSub = $('.picked',this).parent().text();
          return stringToSub.substring(0, stringToSub.indexOf('.'));
       }).toArray().join(',').replace(/^[,\s]+|[,\s]+$/g, '').replace(/,[,\s]*,/g, ',');
    var scores = 
        $('.quiz .q').map(function(){
            return $('.picked.y',this).length;
        }).toArray().join(',');
    var score = 0;
    var split = scores.split(',');
    for(var i = 0, len = split.length; i < len; i++){
        score += parseInt(split[i]);
    } 
    var outOf = selection.split(',').length;
    if (selection == ""){outOf = 0};
    $.getJSON('http://sqlzoo.net/userDetails.php',{
      action:'recordQuiz',
      wgPageName:mw.config.get('wgPageName'),
      wgUserName:mw.config.get('wgUserName'),
      selection:selection,
      score:score,
      scores:scores,
      outOf:outOf
    })
    $('.picked').removeClass('mark-correct').addClass('mark-wrong');
    $('.picked.y').removeClass('mark-wrong').addClass('mark-correct');
    $(this).after($('<div />',{text: 'Your score is '+score+' out of '+outOf,'class':'feedback'}));
  }}));
  $('button').css({
   "background-image": "linear-gradient(to bottom, #337AB7 0px, #265A88 100%)",
   "background-color": "#306AA0",
   "color": "#FFF",
   "padding": "10px 16px",
   "font-size": "18px",
   "line-height": "1.3",
   "border-radius": "6px",
   "border-color": "#245580",
   "border-width": "1px",
   "cursor": "pointer"
  })
});



/* Any JavaScript here will be loaded for all users on every page load. */
var uid;
var prefixToLang = {'C#':'cs','C++':'cpp','perl':'pl','PHP':'php','Python':'py','Ruby':'rb',
                    'VB':'vb'};


$(document).ready(function(){
  $('#wpRemember').attr('checked',true);
  uid = readCookie('uid');
  if (!uid){
    uid = Math.random()*1E9;
    createCookie('uid',uid,1000);
  }
  var gforms = $('form[name^="g"]');
  var lang = prefixToLang[wgCanonicalNamespace] || 'java';
  $(document).data('lang',lang);
  var tlist =  $('div.tutlist>div[class!="fc"]');
  for (var i=0;i<tlist.length;i++){
    var t = $(tlist[i]);
    var pbid=wgPageName; //The one that is not a link is this one!
    if (t.find('a[href]').length>0){
      pbid = unescape(t.find('a').attr('href').split(/\//).pop());
    }
    //Have to override bloody !important
    var progBar = $('<div class="progBar"/>').css({border:'1px solid black'});
    if (pbid){
      progBar.attr('id','progBar_'+pbid);
      progBar.data('name',pbid);
    }
    t.append(progBar);
  }
  var tutProg = $('.progBar').map(function(){return $(this).data('name');}).toArray().join(" ");
  $('form[name^="f"]').each(function(i,e){redoForm(this,i);});
  if (tutProg || gforms.length>0){
    $.ajax({url:'/getAttempts.cgi',dataType:'json','type':'post',cache:false,
        data:{
           lang:lang,progress:tutProg,
           page:wgPageName,uid:uid,wgUserName:wgUserName
        },
    success:function(d){
      var fforms = $('form[name^="f'+lang+'"]');
      var gforms = $('form[name^="g'+lang+'"]');
      for(var i=0;i<gforms.length;i++){
        var gfrm = $(gforms[i]);
        var quest = gfrm.find('input[name="quest"]').val();
        if (d[quest]){
          $('form[name="f'+lang+quest+'"] textarea[name="c"]')
             .val(d[quest].txt);
          if (d[quest].bst){
            var hs = Math.round(d[quest].bst);
            var hiscore = $('#hiscore'+lang+'_'+quest);
            hiscore.html(' High score: '+hs+'%');
            hiscore.data('highscore',hs);
            hiscore.show();
          }
        }
        $('form[name="f'+lang+quest+'"] textarea[name="c"]')
             .attr('readonly',false);
      }
      if (d.progress){
        $('.progBar').each(function(){
          var dx = d.progress[$(this).data('name')];
          if (dx){
            setProgBar($(this),dx.count,dx.max);
          }
        });
      }
    }});
  }

  //Process hints - this is because the hint extension hook no longer works
  $('.dhint').each(function(i,e){
    $(this).before($('<div/>',{text:$(this).attr('title'),'class':'hint',
      style:'cursor:pointer;display:inline-block',
      click:function(){$(this).next().toggle('slow')}}));
    $(this).addClass('hint').hide();
  });
});

function setProgBar(t,numCorrect,numQuestions){
  var x = Math.min(24,Math.round(24*numCorrect/Math.max(1,numQuestions)));
  t.css({width:24-x,borderLeft:x,borderLeftStyle:'solid',borderTopColor:'black'});
  if (numCorrect && numQuestions)
    t.attr('title', numCorrect+' completed of '+numQuestions);
}

function getGparams(lang,t){
  var gins = $('form[name="g'+lang+t+'"] input');
  var gpars = {};
  for (var i=0;i<gins.length;i++)
    gpars[$(gins[i]).attr('name')] = $(gins[i]).val();
  return gpars;
}

var pollTime = 2000; //Time between checking the queue
function goBaby(t,lang){
  var params = {
    };
  var gpars = getGparams(lang,t);
  var fform = $('form[name="f'+lang+t+'"]');
  var shell = fform.find('input[name="shell"]').val();
  if (!shell)
    shell = unescape($('form[name="shell"] input').val());
  if (!shell || shell=='undefined') shell = 'QcQ';
  if (fform.find('input[name="answer"]').val())
    params['answer'] = repl(shell,{width:gpars.width,height:gpars.height,
                                 frag:fform.find('input[name="answer"]').val()});
  params['copy'] = gpars['copyFile'];
  params['file'] = gpars['className'];
  params['frag'] = fform.find('textarea[name="c"]').val();
  params['gimmeTicket'] = Math.random();
  params['imgOut'] = gpars['imgOut'];
  params['lang'] = gpars['lang'];
  if (fform.find('[id^="pre"]').length>0){
    var p = fform.find('[id^="pre"]').contents();
    var txt = "";
    for(var i=0;i<p.length;i++){
      if (p[i].textContent)
        txt += p[i].textContent;
      else
        txt += $(p[i]).val();
    }
    params['prog'] = repl(shell,{width:gpars.width,height:gpars.height,
                               frag:txt});
    params['frag'] = txt;
    //oParams.frag=(fForm.record)?fForm.record.value
    //                           :gForm.elements['prog'].value;
  }else{
    params['prog'] = repl(shell,{width:gpars.width,height:gpars.height,
                               frag:fform.find('textarea[name="c"]').val()});
  }
  params['quest'] = gpars['quest'];
  params['classpath'] = gpars['classpath'];
  params['switches'] = gpars['switches'];
  params['tut'] = wgPageName;
  params['tutSize'] = $('form[name^="f"]').length;
  params['uid'] = uid;
  params['version'] = wgCurRevisionId;
  params['wgUserName'] = wgUserName;
  $('#q'+t).data('params',params);
  $('#tgt_'+lang+t).show();
  var res = $('#tgtres_'+lang+t);
  res.empty();
  $('#tgtend_'+lang+t).empty();
  res.data('queue',{});
  $.ajax({url:'../r.cgi?uid='+uid,data:params,dataType:'json',cache:false,'type':'post',
    success:function(d){
      if (d.ticket){
        var imRunning;
        for (var i=0;i<d.queue.length;i++)
          if (d.queue[i].ticket==d.ticket){
            imRunning = d.queue[i].isRunner;
            break;
          }
        informRunStatus(lang,t,imRunning);
        var waitFor = imRunning?0:pollTime;
        if (imRunning)
          keepAsking(d.ticket,lang,t);
        else{
          setTimeout(function(){keepAsking(d.ticket,lang,t);},waitFor);
          showQueue(lang,t,d);
        }
      }
    }});
}

function repl(text,subList){
  text = text.replace(/QcQ/g,subList.frag);
  text = text.replace(/QwidthQ/g,subList.width);
  text = text.replace(/QheightQ/g,subList.height);
  return text;
}

function redoForm(frm,i){
  //Replace Q( xxx )Q phrases
  var lang = $(document).data('lang');
  var s = 'form[name="g'+lang+(i+1)+'"] input[name="deftxt"]';
  s = $(s).val();
  var re =  /Q\(Q(.*?)Q\)Q/gim;
  var found = re.exec(s);
  if (!found) return;
  var lst = [];
  var prev = 0;
  while (found){
    lst.push(s.substring(prev,found.index));
    var inp = $('<input/>',{value:found[1],size:found[1].length+3
         ,style:'border-width:2px 2px 2px 2px;'
               +'border-color:black;background-color:white;padding:0px 8px'
           });
    lst.push(inp);
    prev = re.lastIndex;
    found = re.exec(s);
  }
  lst.push(s.substring(prev));
  var ne = $("<pre/>",{style:'background-color:rgb(200,200,230)',
                  id:'pre'+lang+i});
  for (var j=0;j<lst.length;j++)
    ne.append(lst[j]);
  $(frm).append(ne);
  $(frm).find('[name="c"]').css('display',  'none');
}

function informRunStatus(lang,q,isRunner){
  $('#tgtmsg_'+lang+q).html(isRunner?('Your program is running on '+isRunner)
                                    :'Your job is in a queue...');
}

function keepAsking(ticket,lang,q){
  //Request the result for ticket
  //If it is still being queued then ask again later
  var resId = 'tgtres_'+lang+q;
  var res = $('#'+resId);
  $.ajax({url:'../r.cgi?ticket='+ticket,'type':'post',data:{ticket:ticket,lang:lang},cache:false,dataType:'json',
   success:function(d){
    if (!d.queue){//Display the answer or error
        $('#tgtmsg_'+lang+q).empty();
        res.empty();
        if (d.processedBy){
          $('#tgtend_'+lang+q).html("You have been served by: "+d.processedBy);
        }
        if (d.score){
          var rscore = +Math.round(d.score);
          var score = $('<div class="score"/>').html('Your score is '+rscore+'%');
          res.append(score);
          res.show();
          var hisc = $('#hiscore'+lang+'_'+q);
          if (!hisc.data('highscore') || rscore>hisc.data('highscore')){
            $('#hiscore'+lang+'_'+q).html(' High score: '+rscore+'%');
            hisc.show();
            hisc.data('highscore',rscore);
            if (rscore==100){ //Recalculate progress bar if any
              var allQuestions = $('span[id^="hiscore"]');
              var rightQ = allQuestions.filter(function(i,e){return $(e).data('highscore')==100;});
              setProgBar($('#progBar_'+wgPageName),rightQ.length,allQuestions.length);
            }
          }
          if (d.score>=98){
            $('#tgtend_'+lang+q)
              .append($('<br/>'))
              .append($('<button/>',{text:'Show Model Answer',click:function(){
                var qdiv = $(this).parents('div.q');
                var answer = $('form[name^=\"f\"] input[name=\"answer\"]',qdiv).val();
                $(this).after($('<pre/>',{text:answer}));
              }}));
          }
        }
        var usrTxt='';
//        if (d.usrTxt) d.usrTxt = d.usrTxt.replace(/\n/g,'<br/>');
//        if (d.ansTxt) d.ansTxt = d.ansTxt.replace(/\n/g,'<br/>');
        if (d.usrTxt || !d.usrImg)
          usrTxt = $('<pre style="border-style: solid; padding: 0.5em; padding-right: 20px; max-height: 30em;overflow-x:hidden"/>').text(d.usrTxt);
        var ansTxt='';
        if (d.ansTxt)
          ansTxt = $('<pre style="border-style: solid; padding: 0.5em; padding-right: 20px; max-height: 30em; overflow-x:hidden"/>').text(d.ansTxt);
        var usrImg='';
        if (d.usrImg){
          usrImg = $('<img/>');
          usrImg.attr('src',d.usrImg);
          usrImg.css('border','1px solid gray');
        }
        var ansImg='';
        if (d.ansImg){
          ansImg = $('<img/>',{src:d.ansImg,style:'border:1px solid gray'});
        }
        var usrGen = usrTxt;
        if (!usrGen) usrGen = usrImg;
        var ansGen = ansTxt;
        if (!ansGen) ansGen = ansImg;
        if (usrGen){
          var trh = $('<tr><th>Your answer</th></tr>');
          if (ansGen) trh.append($('<th>The right answer</th>'));
          var trr = $('<tr/>').append($('<td/>',{css:{verticalAlign:'top'}})
					.append(usrGen));
          if (ansGen) trr.append($('<td/>',{css:{verticalAlign:'top'}})
					.append(ansGen));
          var table = $('<table class="result"/>');table.append(trh);table.append(trr);
          res.append(table); 
        }
        if (d.error){
          var errMsg = $('<pre/>',{style:'border:medium solid gray;padding:0.5em'})
                          .text(d.errorMsg);
          res.append(errMsg);
        }
        if (typeof(diarem) != "undefined")
          diarem(d,lang,q);
    }else{
      //Display queue then ask again in a couple of seconds
      if (showQueue(lang,q,d))
        setTimeout(function(){keepAsking(ticket,lang,q);},pollTime);
      else
        $('#tgtmsg_'+lang+q).html("You are no longer in the queue. Ticket "+
           ticket + " was lost. Sorry .");
    }
  }});
}

function showQueue(lang,q,d){
  var amIstillInTheQueue;
  var tgt = $('#tgtres_'+lang+q);
  var marker = $('#queueMarker');
  if (marker.length==0){
    tgt.append($('<div style="height:80" id="queueMarker">|</div>'));
  }
  var prevQ = tgt.data('queue');
  if (!prevQ) prevQ = {};
  var thisQ = {};
  for (var i=0;i<d.queue.length;i++){
    var xpos = i*30+80;
    var item = {q:d.queue[i]};
    if (prevQ[item.q.ticket]){
      item.img = prevQ[item.q.ticket].img;
      item.img.animate({left:xpos},300);
    }else{
      item.img = $('<img/>',{src:item.q.uimg,css:{position:'absolute',left:xpos}});
      tgt.prepend(item.img);
    }
    item.img.css('border','solid medium '+(item.q.isRunner?'blue':'transparent'));
    thisQ[item.q.ticket] = item;
    if (item.q.ticket==d.ticket){
      amIstillInTheQueue = true;
      var me = $('#meInQueue');
      if (me.length==0)
        me = $('<img id="meInQueue" style="position:absolute" src="/youarehere.gif"/>',
               {css:{'position':'absolute',left:xpos}});
      tgt.append(me);
      me.animate({left:xpos});
    }
  }
  for (var t in prevQ){
    if (!thisQ[t])
      prevQ[t].img.remove();
  }
  tgt.data('queue',thisQ);
  return amIstillInTheQueue;
}

function flip(id){ //Show or hide hints
  $('#'+id).toggle('slow');
}

function flipSize(id){ // Change font in text area - useful for data projects
  $('form[name="'+id+'"] textarea').toggleClass('biggerTextarea');
}

function flipWhole(t,lang){//Show the whole program
  var swid = 'sw'+t+'_'+lang;
  var sw = $('#'+swid);
  var text = getProgText(lang,t);
  if (sw.length==0){
    sw = $('<textarea/>',{id:swid,val:text,'class':'sw',width:'90%',
                          rows:text.match(/\n/gi).length,readonly:'readonly'});
    $('#q'+t+' div.tgtC').before(sw);
  }else{
    sw.remove();
  }
}

function getProgText(lang,t){
  var fform = $('form[name="f'+lang+t+'"]');
  shell = fform.find('input[name="shell"]').val();

  if (!shell || shell=='undefined') shell = unescape($('form[name="shell"] input').val());
  if (!shell || shell=='undefined') shell='QcQ';
  var name = 'f'+lang+t;
  shell = shell.replace(/QcQ/,$('form[name="'+name+'"] textarea[name="c"]').val());
  shell = repl(shell,getGparams(lang,t));
  return shell;
}

function resetForm(lang,q){
  var dt = $('form[name="g'+lang+q+'"] input[name="deftxt"]');
  if (dt.length>0){
    var t = dt.val();
    if (t.length>0 && t[0]=="\n")
      t = t.substr(1);
    $('form[name="f'+lang+q+'"] textarea[name="c"]').val(t);
  }
}

function createCookie(name,value,days) {
if (days) {
        var date = new Date();
        date.setTime(date.getTime()+(days*24*60*60*1000));
        var expires = "; expires="+date.toGMTString();
}
else var expires = "";
document.cookie = name+"="+value+expires+"; path=/";
}

function readCookie(name) {
var nameEQ = name + "=";
var ca = document.cookie.split(';');
for(var i=0;i < ca.length;i++) {
        var c = ca[i];
        while (c.charAt(0)==' ') c = c.substring(1,c.length);
        if (c.indexOf(nameEQ) == 0) return c.substring(nameEQ.length,c.length);
}
return null;
}

function sidebarDown(){
  $('#sidebarslidebox').toggle();
  $('#sidebarslidedown').html(
     $('#sidebarslidebox').is(':visible')?'Hide Sidebar':'Show Sidebar');
}

function doAll(){
  var i =1;
  while (document.forms['fjava'+i]){
    var f=document.forms['fjava'+i].c.value += "//"+Math.random()+"\n";
    setTimeout('goBaby('+i+',"java")',3000*Math.random());
    i++;
  }
}

function maxLen(la){
  var r=0;
  for (var i=0;i<la.length;i++)
    r=Math.max(r,la[i].length);
  return r;
}

function resizeTA(n,lang){
  var c = document.forms['f'+lang+n].c;
  var la = c.value.replace(/\t/g,'  ').split('\n');
  var rows = la.length;
  var cols = maxLen(la);
  c.rows = rows+2;
  c.cols = cols+2;
  $('.ace_editor',document.forms['f'+lang+n]).css({width:(10+cols)+'ex',height:(2*rows)+'ex'});
}


function openHistory(n,lang){
  window.open('http://progzoo.net/manage.pl?tut=' + wgPageName+
              '&quest='+n+'&lang='+lang,
  'history');
}

function openProfile(n,lang){
  window.open('http://progzoo.net/manage.pl?profile=' + encodeURIComponent(wgPageName)+
              '&quest='+n+'&lang='+lang,
  'history');
}

 
function diarem(d, lang, q) {

    $('.showErrorMessageOverlay').remove();
var doShelliesStuff = true;

    var shellProg = $('form[name="f'+lang+q+'"] input[name="shell"]').val();

    if (!shellProg)
    {
    	shellProg = $('form[name="shell"] input[name="import"]').val();
    }

    shellProg = unescape(shellProg);

    var width1 = 28;
    var width2 = 25;
    var destination = $('#q'+q+' div.usercontrols textarea');
    //Inserted by Andrew 24th March 2012
    if (!d.errorMsg) return;
    var cp = d.errorMsg.split('\n')[2].length - 2;

    var beforeafter = shellProg.split(/QcQ/);
    var lineOffset = beforeafter[0].split(/\n/).length;
    var effLineNo = (d.errorLine && d.errorLine.length>0)?d.errorLine[0]*1-lineOffset:1;
    var paddingGuess = 15;
    var pixPerCharV = ($('form[name="f'+lang+q+'"] textarea').height()-paddingGuess*2)/
                       $('form[name="f'+lang+q+'"] textarea').attr('rows');
    var pixPerCharH = ($('form[name="f'+lang+q+'"] textarea').width()-paddingGuess*2)/
			  $('form[name="f'+lang+q+'"] textarea').attr('cols');
    var topPosition = (destination.offset().top) + (effLineNo * pixPerCharV) - paddingGuess;
    var leftPosition = (destination.offset().left) + (cp * pixPerCharH) + pixPerCharH;



if(doShelliesStuff){

        var progzooErrorMessage = progzooErrorMessage();

        switch (d.errsig) {
                case "';' expected":
                    progzooErrorMessage.showShowErrorMessageOverlay("You may have missed a semi-colon in your code...<br><br>Semi-colon are important in Java so that the compiler can recognise the end of a line.<br><br>Have a look at your code and make sure all appropriate lines have there semi-colons!<br><br><img src=\"http://i50.tinypic.com/eipce9.png\">")
                    break;
                case "illegal start of expression":
                    progzooErrorMessage.showShowErrorMessageOverlay("You may have a missing curly bracket!<br><br>Curly brackets show when methods and other actions, for example, If Statements and For Loops, end. They make for more readable and concise code.<br><br>Count your curly brackets. Is there an even number?<br><br><img src=\"http://i50.tinypic.com/2yui0le.png\">")
                    break;
                case "cannot find symbol":
                    progzooErrorMessage.showShowErrorMessageOverlay("You've possibly mis-spelled a method name.<br><br>Try checking any methods you're calling. Are there similar calls i.e. \"g.fillRect\" and \"g.fillRectangle\"? One of them is bound to be incorrect...<br><br><img src=\"http://i46.tinypic.com/nz0n5.png\">")
                    break;
                case "class, interface, or enum expected":
                    progzooErrorMessage.showShowErrorMessageOverlay("You may have too many curly brackets in your code...<br><br>Curly brackets show when methods and other actions, for example, If Statements and For Loops, end. They make for more readable and concise code.<br><br>Count your curly brackets. Is there an even number?<br><br><img src=\"http://i46.tinypic.com/6jen87.png\">")
                    break;
		  default:               

        }


    if (d.errsig == "';' expected")
    {
        var arrow = $('<div/>').css({ background: 'url(/~08014201/curved_arrow.gif) no-repeat',
            backgroundSize: '100%',
            position: 'absolute',
            left: leftPosition,
            top: topPosition,
            width: 100,
            height: 100
        });

        arrow.attr('id', 'arrow');

        $('body').prepend(arrow);

        for (var i = 0; i <= 10; i++) {
            arrow.animate({ width: width1 });
            arrow.animate({ width: width2 });
        }

        $('#arrow').hide('slow', function () { });
    }

}

function progzooErrorMessage() {            
            var errorMessage = "";
            var control = {};
            var displayErrorMessageOverlay = $('<div class="showErrorMessageOverlay"><div class="clickable_area"><p>Click here to read the error description!</p></div><div class="hideButton">Hide</div></div>');
            var errorMessageOverlay = $('<div class="errorMessageOverlay"><div class="closeButton" style=" position: absolute; right: 5px; top: 2px; cursor: pointer;">Close</div><div class="errorMessage"></div></div>');


            //MOVE TO STYLESHEET
            displayErrorMessageOverlay.css({
                height: '50px',
                width: '100%',
                background: 'rgba(255, 69, 0, 0.85)',
                position: 'fixed',
                top: '-50px',
                left: '0px',
                cursor: 'pointer',
                color: 'white',
                zIndex: 10,
                fontWeight:'bold'
            });

            errorMessageOverlay.css({
                width: '25%',
                background: 'rgba(255, 69, 0, 0.8)',
                border: '1px solid black',
                position: 'fixed',
                top: '300px',
                left: '37.5%',
                display: 'none',
                padding: '20px',
                color: 'white'
            });

            displayErrorMessageOverlay.find('.clickable_area').css({
                position:'absolute',
                height:'100%',
                width: '100%',
                zIndex: 5
            });

            displayErrorMessageOverlay.find('p').css({
                position:'absolute',
                width: '100%',
                textAlign: 'center',
                top: '3px',
                fontWeight:'inherit'
            });

            displayErrorMessageOverlay.find('.hideButton').css({
                position:'absolute',
                zIndex: 20,
                top:'15px', 
                right:'14px',
                fontWeight:'inherit'
            });

            //END OF STYLES

            control.showShowErrorMessageOverlay = showShowErrorMessageOverlay;
            control.hideShowErrorMessageOverlay = hideShowErrorMessageOverlay;
            control.showErrorMessageOverlay = showErrorMessageOverlay;
            control.hideErrorMessageOverlay = hideErrorMessageOverlay;

            control.showErrorMessage = showErrorMessage;
            $('body').append(displayErrorMessageOverlay);
            $('body').append(errorMessageOverlay);
            displayErrorMessageOverlay.find('.clickable_area').click(showErrorMessage);
            displayErrorMessageOverlay.find('.hideButton').unbind().click(hideShowErrorMessageOverlay);
            $('.errorMessageOverlay .closeButton').click(hideErrorMessageOverlay);

            function showShowErrorMessageOverlay(stuff) {
                errorMessage = stuff;
                $('.showErrorMessageOverlay').stop().animate({ top: '0px' }, 350, 'linear');
            }
            function hideShowErrorMessageOverlay() {
                return $('.showErrorMessageOverlay').stop().animate({ top: '-50px' }, 350, 'linear');
            }
            function showErrorMessageOverlay() {
                $('.errorMessageOverlay .errorMessage').empty().append(errorMessage);
                return $('.errorMessageOverlay').stop(true, true).fadeIn(500);
            }
            function hideErrorMessageOverlay() {
                return $('.errorMessageOverlay').stop(true, true).fadeOut(500);
            }
            function showErrorMessage() {
                $.ajax({ url: 'http://progzoo.net/shelley.pl', data: { clicked: 'show' } });
                hideShowErrorMessageOverlay().promise().done(showErrorMessageOverlay);
            }

            return control;
    }

}