CanvasHTML5_DrawPicture("jspe", "presdisp");
CanvasHTML5_DrawPicture("eden-content", "presdispcanv");

/*

${{

// Creates the text area to code onto
$('<canvas id="jspe"></canvas>').appendTo($('#eden-content'));

$("#jspe-dialog").attr("width", ($('#eden-content').width()-40)/2);
$("#jspe-dialog").attr("height", $("#tabs").height()-80);

// Puts a border on the canvas to show where it ends
$('#d1canvas').css('border-style', 'solid');
$('#jspe-dialog').css('border-style', 'solid');

// Some things to make this all resize
$(window).resize(function() {
	$("#jspe-dialog").attr("height", $("#tabs").height()-80);
	$("#jspe-dialog").attr("width",($('#eden-content').width()-40)/2);
	$("#d1canvas").attr("width",($('#eden-content').width()-40)/2);
	root.lookup("jspeleft").assign($('#jspe-dialog').position().left , this).value();
	$('#jspe-dialog_slide').css("width",(($('#eden-content').width()-40)/2)-60);
});


}}$;

## Make the canvas half the screen
canvas.width = ${{ ($('#eden-content').width()-40)/2 }}$;

*/

## SlideButton to overcome Button limitations
${{
SlideButton = function (name, label, x, y, enabled) {
	this.name = name;
	this.label = label;
	this.x = x;
	this.y = y;
	this.enabled = enabled;
}
}}$;

func SlideButton { ${{
  var name = arguments[0];
  var label = arguments[1];
  var x = arguments[2];
  var y = arguments[3];
  var enabled = arguments[4];
  return new SlideButton(name, label, x, y, enabled);
}}$; }

${{
SlideButton.prototype.draw = function(context) {
  var me = "jspe_" + this.name;
  var me2 = this.name;
  var but = $("#"+me).get(0);
  if (but === undefined) {
	var dis = "";
	if (this.enabled == true) { dis = ""; }
	else { dis = "disabled=\"true\""; }

	var can = $("#eden-content");
	var buthtml = $("<input type=\"button\" id=\"" + me + "\" value=\"" + this.label + "\" " + dis + " style=\"position: absolute; left: " + this.x + "px; top: " + this.y + "px;\"></input").click(function() {
		root.lookup(me2 + "_clicked").assign(true);
	}).appendTo(can);

	buthtml.get(0).togarbage = false;

	//Initialise
	root.lookup(me2 + "_clicked").assign(false);
  } else {
	but.value = this.label;
	but.togarbage = false;
	if (this.enabled == true) { but.disabled = false; }
	else { but.disabled = true; }
	but.style.left = "" + this.x + "px";
	but.style.top = "" + this.y + "px";
  }
};
}}$;
${{
SlideButton.prototype.toString = function() {
  return "SlideButton(" + this.name + ", " + this.label + ", " + this.x + ", "+this.y+", "+this.enabled+")";
};
}}$;


## Slide
${{
Slide = function (html) {
        this.html = html;
}
}}$;

func Slide { ${{
  var html = arguments[0];
console.log(html);
  return new Slide(html);
}}$; }


${{
Slide.prototype.draw = function(context) {
  var me = "jspe_slide";
  var but = $("#"+me).get(0);

  var jspe = $('#jspe-dialog');
  var content = this.html.replace(/<jseden>/g,"<div><pre>").replace(/<\/jseden>/g,"</pre><a href=\"#\" onclick=\"execute(this)\">execute</a> <a href=\"#\" onclick=\"copy(this)\">copy to input</a><br /></div>");

  if (but === undefined) {
        var can = $("#eden-content");
	var divstyle = "position: absolute; left: " + ($('#jspe-dialog').position().left + 20) + "px; top: 40px"; 
	var buthtml = $("<div id=\"" + me + "\" style=\""+divstyle+"\">" + content + "</div>").appendTo(can);

        buthtml.get(0).togarbage = false;

        //Initialise
  } else {
        but.innerHTML = content;
        but.togarbage = false;
	but.style.left = ($('#jspe-dialog').position().left + 20) + "px";
	but.style.top = "40px";
  }
  $('#jspe-dialog_slide').css("width",(($('#eden-content').width()-40)/2)-20);
};
}}$;

${{
Slide.prototype.toString = function() {
  return "Slide("+this.html+")";
};
}}$;

${{
  copy = function(e) {
	$("#show-input").click();
	// Copies to EDEN interpreter window
	edeninput.setValue($(e).siblings('pre').html());
  }

  execute = function(e) {
	// Evaluates and stores in the symbol table
	eval(Eden.translateToJavaScript($(e).siblings('pre').text()));
	// this line (fixed by Nick Pope 30-11-2012) used to read: 
	// eval(Eden.translateToJavaScript($(e).siblings('pre').html()));
  }
}}$;

proc clearSlides { ${{
  var jspe = document.getElementById("jspe");
  jspe.width = jspe.width;

  $("#eden-content > :not(canvas)").each(function() {
	if(/jspe_/.test(this.id)) {
		this.togarbage = true;
	}
  });

}}$; };

proc cleanupSlides { ${{
  $("#eden-content > :not(canvas)").each(function() {
	if (this.togarbage == true) {
		$(this).remove();
	}
  });
}}$; };

proc drawSlides : slides {
  clearSlides();
  ${{
  var slides = context.lookup('slides').value();
  var jspe = $('#jspe-dialog').get(0).getContext('2d');

  if (slides === undefined) { return; }

  for (var i = 0; i < slides.length; i++) {
  if (slides[i] === undefined) { continue; }
  slides[i].draw(jspe);
  }
  }}$;
  cleanupSlides();
};


jspeleft = ${{ $('#jspe-dialog').position().left }}$;

buttonPrevEnabled is true;
buttonNextEnabled is true;

buttonPrev is SlideButton("buttonPrev","Previous Slide", jspeleft, ${{ $('#jspe-dialog').height()+15 }}$, buttonPrevEnabled);

## buttonSave = SlideButton("buttonSave","Add Slide", int(${{ $('#jspe-dialog').position().left }}$) + 100, ${{ $('#jspe-dialog').height()+15 }}$, true);

buttonNext is SlideButton("buttonNext","Next Slide", jspeleft + 100,  ${{ $('#jspe-dialog').height()+15 }}$, buttonNextEnabled);

slideList is [];

proc disableButtons : currentSlide {
	buttonPrevEnabled is (currentSlide <= 1) ? false : true;
	buttonNextEnabled is (currentSlide >= slideList#) ? false : true;
}

proc prevSlide : buttonPrev_clicked {
	if (currentSlide > 2) {
		currentSlide--;
	} else {
		currentSlide = 1;
	}
}

proc nextSlide : buttonNext_clicked {
	if (currentSlide < slideList#) {
		currentSlide++;
	} else {
		currentSlide = slideList#;
	}
}


## something like an onclick of some kind which 
slides is [buttonPrev, buttonNext, slideNumber, slideList[currentSlide]];

currentSlide = 0;
## slideNumber is Div("slidenumber",100,100,100,50,"<h3>Slide Number: "+currentSlide+"</h3>","");

${{
$('#canvas_buttonPrev').attr('id', 'jspe_buttonPrev');
$('#canvas_buttonNext').attr('id', 'jspe_buttonNext');
}}$;