// Enyo content used in a Sugar Activity
// Show bi-directionnal communication between Sugar and Enyo

enyo.kind({
	name: "App",
	classes: "onyx main-window",
	components: [
		// HTML5 logo and introduction text
		{kind: "Image", classes: "logo", src: "images/html5-logo.jpg"},	
		{classes: "block-top", components: [
			{content: "This is the HTML5 part of the activity.", classes:"hello-text"},
			{content: "All content is handle by JavaScript code.", classes:"hello-line"}
		]},
		
		// Welcome message using buddy setup
		{classes: "divider", content: "Environment"},
		{components: [
			{content: "Hello", classes: "hello-text"},
			{name: "buddyName", content: "NAME", classes: "hello-text hello-buddy"},
			{content: "!", classes: "hello-text"},
			{content: "(colors and name come from Sugar)", classes: "hello-advice"}
		]},
		
		// Buttons to send basic messages
		{classes: "divider", content: "Basic message"},
		{kind: "onyx.Button", content: "Send string to Python", ontap: "buttonStringClicked"},
		{kind: "onyx.Button", content: "Send object to Python", ontap: "buttonObjectClicked", classes: "spacer"},
		{content: "(send a simple message with a string or an object)", classes: "hello-advice"},
		
		// Counter affected by toolbar activity buttons
		{classes: "divider", content: "Toolbar"},		
		{components: [
			{content: "Page count:", classes: "hello-text"},
			{name: "pageCount", classes: "hello-text hello-buddy"},
			{content: "(use toolbar buttons to update page count)", classes: "hello-advice"}
		]},
		
		// Right part of the screen
		{classes: "right-part", components: [
			// Controls synchronized with matching Python controls
			{classes: "divider", content: "Synchronized controls"},
			{name: "checkbox", kind: "onyx.Checkbox", checked: true, onchange: "checkboxClicked"},
			{content: "Checkbox", classes: "hello-text spacer"},
			{components: [
				{kind: "onyx.InputDecorator", components: [
						{name: "sliderValue", kind: "onyx.Input", classes: "slider-text", onchange: "valueChanged"}
				]},
				{name: "sliderBar", kind: "onyx.Slider", classes: "slider-bar", onChange: "sliderChanged"}
			]},
			{content: "(click to update Python counterpart at the same time)", classes: "hello-advice"},

			// Canvas area
			{classes: "divider", content: "Canvas"},
			{kind: "Canvas", name: "canvas", classes: "canvas-style", attributes: {width: 200, height: 200}},		
			{content: "(use Python buttons to move the turtle)", classes: "hello-advice"},
			{kind: "Image", id: "liogo", src:"images/liogo.png", classes: "liogo-logo", onload: "initLiogo" }
		]}
	],
	
	// Constructor
	create: function() {
		this.inherited(arguments);
		
		// Init sugar interface
		this.sugar = new Sugar();

		// Connect to python events
		this.sugar.connect("helloFromPY", function(args) {
			// Displayed as JSON string to see structure
			alert("JavaScript received "+JSON.stringify(args));
		});
		this.sugar.connect("buddy", enyo.bind(this, "buddyChanged"));
		this.sugar.connect("home_clicked", enyo.bind(this, "upgradePageCount"));
		this.sugar.connect("back_clicked", enyo.bind(this, "upgradePageCount"));
		this.sugar.connect("forward_clicked", enyo.bind(this, "upgradePageCount"));
		this.sugar.connect("py_slider_changed", enyo.bind(this, "pySliderChanged"));
		this.sugar.connect("py_checkbox_changed", enyo.bind(this, "pyCheckboxChanged"));
		this.sugar.connect("liogo_forward_clicked", enyo.bind(this, "bForward"));
		this.sugar.connect("liogo_left_clicked", enyo.bind(this, "bLeft"));
		this.sugar.connect("liogo_right_clicked", enyo.bind(this, "bRight"));
		this.sugar.connect("liogo_clear_clicked", enyo.bind(this, "bClear"));
		
		// Send a message to python
		this.sugar.sendMessage("ready")

		// Init synchronized control
		this.$.sliderBar.setValue(50);
		this.$.sliderValue.setValue(50);
		this.$.pageCount.setContent(1);
		
		// Just to see that console function stay usable
		console.log("Unhandled console message");		
	},

	// Python sent buddy setup
	buddyChanged: function(args) {
		// Redraw buddy context
		this.$.buddyName.applyStyle("background-color", args.colors[1]);
		this.$.buddyName.applyStyle("color", args.colors[0]);
		this.$.buddyName.setContent(args.name);
	},
	
	// Create Liogo component when the turtle image is loaded
	initLiogo: function() {
		// Init mini Logo component
		this.liogo = new Liogo({canvas: this.$.canvas, image: document.getElementById("liogo") });
		this.liogo.draw();
	},
	
	// Send a simple string message to Python
	buttonStringClicked: function() {
		this.sugar.sendMessage("helloFromJS", "Hello Python !");
	},
	
	// Send a dummy JavaScript object to Python
	buttonObjectClicked: function() {
		var person = { name: "Lionel", version: 2.0, language: ["Python", "JavaScript"] };
		person.modified = new Date();
		this.sugar.sendMessage("helloFromJS", person);
	},
	
	// Checkbox clicked, signal the changed to the matching Python control
	checkboxClicked: function() {
		this.sugar.sendMessage("JScheckboxChanged", this.$.checkbox.getChecked());
	},

	// Handle Python message coming from toolbar
	upgradePageCount: function(args) {
		// Process toolbar button click
		var currentValue = parseInt(this.$.pageCount.getContent());
		switch(args)
		{
		case 1:
			currentValue++;
			break;
		case -1:
			currentValue--;
			break;
		case 0:
			currentValue = 1;
			break;
		}
		this.$.pageCount.setContent(currentValue);

		// Change toolbar button sensitivity depending of current page
		var back = "False";
		var forward = "False";
		if (currentValue == 1)
			back = "True"
		else if (currentValue == 10)
			forward = "True"
		this.sugar.sendMessage("disableBack", back);
		this.sugar.sendMessage("disableForward", forward);
	},
	
	// Slider changed, change the value and send a message to matching Python control
	sliderChanged: function(inSender, inEvent) {
		var newvalue = parseInt(this.$.sliderBar.getValue());
		this.$.sliderValue.setValue(newvalue);
		this.sugar.sendMessage("JSsliderChanged", newvalue);
	},

	// Slider value changed, change the slider and send a message to matching Python control	
	valueChanged: function(inSender, inEvent) {
		var newvalue = parseInt(this.$.sliderValue.getValue());
		this.$.sliderBar.setValue(newvalue);
		this.sugar.sendMessage("JSsliderChanged", newvalue);		
	},

	// Python slider value has changed, update the matching JavaScript control
	pySliderChanged: function(args) {	
		var newvalue = parseInt(args);
		this.$.sliderBar.setValue(newvalue);
		this.$.sliderValue.setValue(newvalue);
	},

	// Python checkbox value has changed, update the matching JavaScript control	
	pyCheckboxChanged: function(args) {	
		this.$.checkbox.setChecked(args);
	},
	
	// Python forward turtle button clicked, process it in the mini Logo component
	bForward: function(args) { 
		this.liogo.forward(args);
		this.liogo.draw();
	},
	
	// Python left turtle button clicked, process it in the mini Logo component	
	bLeft: function(args) { 
		this.liogo.left(args);
		this.liogo.draw();
	},
	
	// Python right turtle button clicked, process it in the mini Logo component	
	bRight: function(args) { 
		this.liogo.right(args);
		this.liogo.draw();
	},
	
	// Python clear turtle button clicked, process it in the mini Logo component	
	bClear: function() { 
		this.liogo.clear();
		this.liogo.draw();
	}
});