// 命令送信ごとに増加するIDを作成（iOSのSafariでPOSTがキャッシュされることの対策）
var commandID=0;

function initialize_webiopi(){
    // webiopiの準備が終わってからstyles.cssを適用する
    applyCustomCss('styles.css');

    // GPIOの状態を監視しない
    webiopi().refreshGPIO(false);
}

myImage1=new Image();
myImage1.src="button-1.jpg";
myImage2=new Image();
myImage2.src="button-2.jpg";
myImage3=new Image();
myImage3.src="button-3.jpg";
myImage4=new Image();
myImage4.src="button-4.jpg";
myImage5=new Image();
myImage5.src="point-1.jpg";
myImage6=new Image();
myImage6.src="point-2.jpg";
myImage9=new Image();
myImage9.src="pointer.gif";

ma=2;
function change1(){
	if (ma==1){
		document.img1.src=myImage4.src ;
		ma=2;
		webiopi().callMacro("rightON");
	}
	else if (ma==2){
		document.img1.src=myImage1.src ;
		ma=1;
		webiopi().callMacro("rightOFF");
	}
}

mb=2;
function change2(){
	if (mb==1){
		document.img2.src=myImage3.src ;
		mb=2;
		webiopi().callMacro("leftON");
	}
	else if (mb==2){
		document.img2.src=myImage2.src ;
		mb=1;
		webiopi().callMacro("leftOFF");
	}
}

mc=2;
function change3(){
	if (mc==1){
		document.img3.src=myImage6.src ;
		mc=2;
		webiopi().callMacro("point1ON");
	}
	else if (mc==2){
		document.img3.src=myImage5.src ;
		mc=1;
		webiopi().callMacro("point1OFF");
	}
}

md=2;
function change4(){
	if (md==1){
		document.img4.src=myImage6.src ;
		md=2;
		webiopi().callMacro("point2ON");
	}
	else if (md==2){
		document.img4.src=myImage5.src ;
		md=1;
		webiopi().callMacro("point2OFF");
	}
}

var x = 92;
var pointer_v = document.getElementById("img9");
style="position: relative;" ;
pointer_v.style.left = x +"px"; 

function change5(){
	if (250 <= x ){
		x = x  ;
		pointer_v.style.left = x +"px"; 
	}
	else {
		x = x +5 ;
		pointer_v.style.left = x +"px"; 
		var ratio = (x - 82)/168;
		webiopi().callMacro("setHwPWM", [ratio, commandID++]);
	}
}

function change6(){
	if (x <= 82){
		x = x;
		pointer_v.style.left = x +"px"; 
	}
	else {
		x = x -5 ;
		pointer_v.style.left = x +"px"; 
		var ratio = (x - 82)/168;
		webiopi().callMacro("setHwPWM", [ratio, commandID++]);
	}
}

function applyCustomCss(custom_css){
    var head = document.getElementsByTagName('head')[0];
    var style = document.createElement('link');
    style.rel = "stylesheet";
    style.type = 'text/css';
    style.href = custom_css;
    head.appendChild(style);
}