IPA1 - Temperature Converter

var THEME = require('themes/flat/theme');
var SLIDERS = require('controls/sliders');
var BUTTONS = require('controls/buttons');

var whiteS = new Skin({fill:"white"});
var greyS = new Skin({fill:"grey"});
var mainCon = new Container({left:0, right:0, top:0, bottom:0, skin: whiteS});
application.add(mainCon);

var mySlider = SLIDERS.HorizontalSlider.template(function($){ return{
	height:50, left:0, right:50,
	behavior: Object.create(SLIDERS.HorizontalSliderBehavior.prototype, {
		onValueChanged: { value: function(container){
			SLIDERS.HorizontalSliderBehavior.prototype.onValueChanged.call(this, container);
			application.remove(sliderValue);
			sliderValue = new Container({
                left:245, right:0, top: 205, height:10,
                skin: whiteS,
                contents:[
                    new Label({string: Math.round(this.data.value*100)/100, style: labelStyle})
                ]
            });

            application.add(sliderValue);
			trace("Value is: " + this.data.value + "\n");
	}}})
}});

var myRadioGroup = BUTTONS.RadioGroup.template(function($){ return{
	top:0, bottom:50, left:0, right:0,
	behavior: Object.create(BUTTONS.RadioGroupBehavior.prototype, {
	    getSelectedName: { value: function(){
            if ("selectedName" in this) return this.selectedName; 
        }},
		onRadioButtonSelected: { value: function(buttonName){
		    this.selectedName = buttonName;
			trace("Radio button with name " + buttonName + " was selected.\n");
	}}})
}});

var textFont = new Style({font: "30px", color:"#333333"});
var labelStyle = new Style({font: "20px", color:"#333333"});

var buttonBehavior = function(content, data){
	BUTTONS.ButtonBehavior.call(this, content, data);
}
buttonBehavior.prototype = Object.create(BUTTONS.ButtonBehavior.prototype, {
	onTap: { value:  function(button){
		var currValue = getSliderValue();
		var currIn = getRadioSettingIn();
		var currOut = getRadioSettingOut();
		if (currIn == "Fahrenheit") {
		    if (currOut == "Celsius") {
		        currValue = (currValue-32)*5/9;
		    }
		    else if (currOut == "Kelvin") {
		        currValue = (currValue-32)*5/9 + 273.15;
		    }
		}
		else if (currIn == "Celsius") {
		    if (currOut == "Fahrenheit") {
		        currValue = currValue*1.8 + 32;
		    }
		    else if (currOut == "Kelvin") {
		        currValue = currValue + 273.15;
		    }
		}
		else if (currIn == "Kelvin") {
		    if (currOut == "Fahrenheit") {
		        currValue = (currValue - 273.15)*1.8 + 32;
		    }
		    else if (currOut == "Celsius") {
		        currValue = currValue - 273.15;
		    }
		}
		currValue = Math.round(currValue*100)/100;
		application.remove(result);
		resultLabel = new Label({string: currValue, style: labelStyle});
		result = new Container({
	        left:200, right:15, top:25, height:20,
	        skin: whiteS,
	        contents:[
		        resultLabel
	        ]
        });

        application.add(result);
		trace("Current value is " + currValue + "\n");
		trace("Current input is " + currIn + "\n");
		trace("Current output is " + currOut + "\n");
		trace("Button was tapped.\n");
	}}
});

var myButtonTemplate = BUTTONS.Button.template(function($){ return{
	top:0, bottom:0, left:0, right:0,
	contents:[
		new Label({left:0, right:0, height:20, string:$.textForLabel, style:textFont})
	],
	behavior: new buttonBehavior
}});

var slider = new mySlider({ min:-274, max:274, value:0,  });
var radioGroupIn = new myRadioGroup({ buttonNames: "Fahrenheit,Celsius,Kelvin" });
var radioGroupOut = new myRadioGroup({ buttonNames: "Fahrenheit,Celsius,Kelvin" });
var button = new myButtonTemplate({textForLabel:"Convert"});

var getSliderValue = function() {
	return slider.behavior.data.value;
};

var getRadioSettingIn = function() {
    return radioGroupIn.behavior.getSelectedName();
};

var getRadioSettingOut = function() {
    return radioGroupOut.behavior.getSelectedName();
};

var output = new Container({
	left:200, right:15, top:0, height:20,
	skin: whiteS,
	contents:[
		new Label({string: "Output", style: labelStyle})
	]
});

application.add(output);

var result = new Container({
    left:200, right:15, top:25, height:20,
	skin: whiteS,
	contents:[
		new Label({string: 0, style: labelStyle})
    ]
});

application.add(result);

var sliderValue = new Container({
    left:245, right:0, top: 205, height:10,
    skin: whiteS,
    contents:[
        new Label({string: 0, style: labelStyle})
    ]
});

application.add(sliderValue);

var startScale = new Container({
	left:15, right:200, top:80, height:20,
	skin: whiteS,
	contents:[
		new Label({string: "Start Scale", style: labelStyle})
	]
});

application.add(startScale);

var endScale = new Container({
	left:200, right:15, top:80, height:20,
	skin: whiteS,
	contents:[
		new Label({string: "End Scale", style: labelStyle})
	]
});

application.add(endScale);

var buttonCon = new Container({left:0, right:200, top:0, bottom:200, skin:greyS});
application.add(buttonCon);
buttonCon.add(button);

var radioCon = new Container({width:120, left:15, top:100});
application.add(radioCon);
radioCon.add(radioGroupIn);

var radioOutCon = new Container({width:120, right:15, top:100});
application.add(radioOutCon);
radioOutCon.add(radioGroupOut);

var sliderCon = new Container({left:5, width:290, top:200, height:30});
application.add(sliderCon);
sliderCon.add(slider);