var prefix = '';
var defaultDegree = 0;
var defalutScale = 100;
var degree = defaultDegree;
var scale = defalutScale;

function setup() {
	//ベンダープリフィックス
	var check = document.createElement('div');
	var prefixList = ['Webkit', 'Moz', 'O', 'ms', ''];
	for( var i = 0; i < prefixList.length; i++ ) {
		if(check.style[prefixList[i] + 'Transform' ] !== undefined ) {
			prefix = prefixList[i];
			break;
		}
	}

	//コントロールのイベントのセットアップ
	if(document.querySelectorAll) {//ie7
		var controls = document.querySelectorAll('input[type="range"]');
		var value = 0;
		for (var i = 0; i < controls.length; i++) {
			switch(controls[i].id) {
				case 'rotate':
					value = degree;
					break;
				case 'size':
					value = scale;
					break;
			}
			
			if(check.addEventListener) {
				controls[i].addEventListener('change', changeHandler, false);
			}
			if(check.attachEvent) {
				controls[i].attachEvent('onchange', changeHandler);
			}
			updateValue(controls[i], value);
		}
		
		//resetボタン
		var reset = document.getElementById('reset');
		if(check.addEventListener) {
			reset.addEventListener('click', resetHandler, false);
		}
		if(check.attachEvent) {
			reset.attachEvent('onclick', resetHandler, false);
		}
		
		//全部終わったらトランスフォーム
		transform();
	}
}

function changeHandler(e) {
	var t;
	if(e.target) {
		t = e.target;
	}
	if(e.srcElement) {
		t = e.srcElement;
	}
	
	var tmp = 0;
	switch(t.id) {
		case 'rotate':
			tmp = Math.max(t.value, -360);
			tmp = Math.min(t.value, 360);
			degree = tmp;
			updateValue(t, degree);
			break;
		case 'size':
			tmp = Math.max(t.vaule, 0);
			tmp = Math.min(t.value, 200);
			scale = tmp;
			updateValue(t, scale);
			break;
	}
	
	transform();
}

//コントロールのデータを更新する
function updateValue(control, val) {
	control.value = val;
	var output = control.parentNode.querySelector('output');
	output.value = val;
}

//画像のトランスフォーム
function transform() {
	var rotateStr = 'rotate(' + degree + 'deg)';
	var sizeStr = 'scale(' + (scale / 100) + ')';
	var trans = document.getElementById('trans');
	trans.style[prefix + 'Transform'] = rotateStr + ' ' + sizeStr;
}

//リセットボタン
function resetHandler(e) {
	degree = defaultDegree;
	scale = defalutScale;
	updateValue(document.getElementById('rotate'), degree);
	updateValue(document.getElementById('size'), scale);
	transform();
}