function touchHandler(event)
{
   

      var touches = event.changedTouches,
        first = touches[0]
    var type = "";
       
    switch(event.type)
    {
       
        case "touchstart":
            type = "mousedown";
            break;
        case "touchmove":
            type="mousemove";
            break;
        case "touchend":
            type="mouseup";
           
            break;
        case "tap":
           // type="click";
            type="click";
            break;
       
        default:
            
            return;
    }

    //initMouseEvent(type, canBubble, cancelable, view, clickCount,
    //           screenX, screenY, clientX, clientY, ctrlKey,
    //           altKey, shiftKey, metaKey, button, relatedTarget);
    

   
    var simulatedEvent = document.createEvent("MouseEvent");
    simulatedEvent.initMouseEvent(type, true, true, window, 1,
        first.screenX, first.screenY, first.clientX, first.clientY, false,
        false, false, false, 0/*left*/, null);


if (type == "mousemove") {
       event.preventDefault();
    } else {
        
    }
   
   first.target.dispatchEvent(simulatedEvent);
  
   


    console.log(event.target+': '+event.type+' -> '+type)

}
function myTouchHandler(event){
     switch(event.type)
    {

        case "touchstart":
            type = "mousedown";
            break;
        case "touchmove":
            type="mousemove";
            break;
        case "touchend":
            type="mouseup";

            break;
        case "tap":
           // type="click";
            type="click";
            break;

        default:

            return;
    }
    $(event.target).trigger(type, event)
    console.log('## '+event.target+': '+event.type+' -> '+type);
    

}

function init()
{
    document.addEventListener("touchstart", touchHandler, true);
    document.addEventListener("touchmove", touchHandler, true);
    document.addEventListener("touchend", touchHandler, true);
    document.addEventListener("touchcancel", touchHandler, true);
    document.addEventListener("tap", touchHandler, true);
    
}
if(navigator.userAgent.match(/iPad/i)){//TODO BROWSERWEICHE
init()
}
$(document).ready(function() {
    console.log(navigator.userAgent+' '+navigator.userAgent.match(/iPad/i))
	var $page = new Page()
	$(window).unload(function() {
		$page.store();
	});
});

function Page() {
	var wsCenter = {
		x : 4 * 136 + 8,
		y : 8 + 1 * 136 + 100
	}; // Kreismittelpunkt
	var nWs = 12; // Anzahl der Werks�tze
	var nWsVis = 9; // Anzahl der sichtbaren Werks�tze
	var dx = 136; // Breite eines WS-Icons mit Abstand
	var weiss;
	var circle;
	var uu
	// Werte die per store gespeichert und per fetch gelesen werden
	var expandedWsOldTop = 0;
	var expandedWsNum = 0;
	var expandedWsOldZ = 0
	var expandedWs = {
		num : 0,
		oldTop : 0,
		oldZIndex : 0
	}
	var phi0 = parseInt(ws0 * dx);
	phi0=-parseInt(136/3)
	console.log(ws0, phi0)

	var draggableObjRot = function() {
		var phi0;
		var xx0;
		var xx1;
		var direction;
		return {
			cursor : 'move',
			cursorAt : {
				top : 25,
				left : 25
			},
			helper : function(event) {
				return $('<div class="ui-widget-header" style="z-index:1000;width:50px;height:50px;border:solid 1px #f00"></div>');
			},
			start : function(event, ui) {
				if (expandedWsNum != 0) {
					collapse(expandedWsNum)
				}
				expandedWsNum = 0
				xx0 = event.screenX
				phi0 = circle.phi;
				direction = ($(this).attr("class").substr(0, 5) == "drag1");
				circle.prepare();
			},
			drag : function(event, ui) {
				xx1 = event.screenX;
				circle.phi = phi0 + (xx1 - xx0) * (direction ? 1 : -1);
				circle.draw();
			},
			stop : function(event, ui) {
				circle.engage()
			}
		}
	};

	var draggableObjVert = function(wsNum) {
		var wsId = '#ws_' + wsNum;
		var ws = $(wsId);
		var wsA = $(wsId + 'div  > a > img');
		var wsRect = getWsRect(wsId)
		var cnstr = [ wsRect.left, wsRect.top - wsRect.height + wsRect.width,
				wsRect.left, wsRect.top + wsRect.height - 50 ];
		this.test=ws
		var offset;
		var yMax = ws.position().top
		var yMin = yMax - wsRect.height + wsA.outerHeight()
		yMin = ws.attr('yMin');
		return {
			containment : cnstr,
			distance : 4,
			scroll : false,
			cursor : 'move',
			cursorAt : {
				top : 25,
				left : 25
			},
			helper : function(event) {
				return $('<div class="ui-widget-header" style="z-index:1000;width:'
						+ wsRect.width
						+ 'px;height:50px;border:solid 1px #f00"></div>');
			},
			start : function(event, ui) {
				offset = ws.position().top - event.screenY;
			},
			drag : function(event, ui) {
				console.log('offset')
				console.log(ws.css('top'),Math.min(Math.max(event.screenY + offset, yMin), yMax))
				ws.css( {
					"top" : Math.min(Math.max(event.screenY + offset, yMin), yMax)
				})
			},
			stop : function(event, ui) {
				var y = ws.position().top;
				var yNew = yMax + 126 * Math.round((y - yMax) / 126);
				ws.animate( {
					top : yNew
				}, {
					duration : Math.abs(y - yNew)
				});

			}
		};
	};

	this.store = function() {
		var props = new Array('phi0', 'expandedWsNum', 'expandedWsOldTop');
		$.cookie('phi0', circle.phi);
		$.cookie('expandedWsNum', expandedWsNum);
		$.cookie('expandedWsOldTop', expandedWsOldTop);
	};
	this.fetch = function() {
		phi0 = $.cookie('phi0') ? parseInt($.cookie('phi0')) : phi0;
		expandedWsNum = $.cookie('expandedWsNum') ? parseInt($
				.cookie('expandedWsNum')) : expandedWsNum;
		expandedWsOldTop = $.cookie('expandedWsOldTop') ? parseInt($
				.cookie('expandedWsOldTop')) : expandedWsOldTop;
		console.log('phi0: ' + phi0, 'expandedWsNum: ' + expandedWsNum,
				'expandedWsOldTop: ' + expandedWsOldTop);
	};

	this.fetch();

	$("body, html").css("overflow", "hidden");

	// Einstellung Unselektierbar
	if (window.ie || window.opera)
		this.lab.setProperty("unselectable", "on");

	if (window.gecko)
		this.lab.setStyle("MozUserSelect", "none");
	if (window.webkit)
		this.lab.setStyle("KhtmlUserSelect", "none");

	circle = new Circle(wsCenter, nWs, nWsVis, dx, phi0);
	var buttonPrevWs = new Button($('#buttonPrevWs'), true);
	var buttonNextWs = new Button($('#buttonNextWs'), true);
	var buttonPrevImg = new Button($('#buttonPrevImg'), true);
	var buttonNextImg = new Button($('#buttonNextImg'), true);
	$('#buttonWrap').click(function(e){e.preventDefault();e.stopImmediatePropagation();})
	buttonNextImg.click(function(e){
		e.preventDefault();
		e.stopImmediatePropagation();
		var state = circle.shiftBy($('#ws_'+expandedWsNum).attr('vertOffset'),expandedWsNum)

		buttonPrevImg.setEnabled(!state.isFirst);
		buttonNextImg.setEnabled(!state.isLast);
		//console.log(uu)
		//uu.drag({screenY:100},0)

	})
	buttonPrevImg.click(function(e){
		e.preventDefault();
		e.stopImmediatePropagation();
		//console.log(uu)
		//uu.drag({screenY:100},0)
		var state = circle.shiftBy(-$('#ws_'+expandedWsNum).attr('vertOffset'),expandedWsNum)
		buttonPrevImg.setEnabled( !state.isFirst);
		buttonNextImg.setEnabled( !state.isLast);
	})
	buttonNextWs.click(function(e){
		e.preventDefault();
		e.stopImmediatePropagation();
		circle.rotateBy(circle.dPhi)
	})
	buttonPrevWs.click(function(e){
		e.preventDefault();
		e.stopImmediatePropagation();
		circle.rotateBy(-circle.dPhi)
	})
	/*
	buttonNextImg.bind('mousedown', function(e) {
		//$(this).attr('src','icons/arrow_rb_32_down.gif')
		e.preventDefault();
		e.stopImmediatePropagation();
		circle.startShift(10,expandedWsNum)
	});
	buttonNextImg.bind('mouseup mouseleave', function(e) {
		//$(this).attr('src','icons/arrow_wb_32_down.gif')
		e.preventDefault();
		e.stopImmediatePropagation();
		circle.stopShift()
	});
	buttonPrevImg.bind('mousedown', function(e) {
		//$(this).attr('src','icons/arrow_rb_32_up.gif')
		e.preventDefault();
		e.stopImmediatePropagation();
		circle.startShift(-10,expandedWsNum)
	});
	buttonPrevImg.bind('mouseup mouseleave', function(e) {
		//$(this).attr('src','icons/arrow_wb_32_up.gif')
		e.preventDefault();
		e.stopImmediatePropagation();
		circle.stopShift()

	});

*/
/*
	buttonNextWs.bind('click', function(e) {
		$(this).attr('src','icons/arrow_rb_32_right.gif')
		e.preventDefault();
		e.stopImmediatePropagation();
		circle.startRotate(8);
	});
	buttonNextWs.bind('mouseup mouseleave', function(e) {
		$(this).attr('src','icons/arrow_wb_32_right.gif')
		e.preventDefault();
		e.stopImmediatePropagation();
		circle.stopRotate();
	});

	buttonPrevWs.bind('mousedown', function(e) {
		$(this).attr('src','icons/arrow_rb_32_left.gif')
		e.preventDefault();
		e.stopImmediatePropagation();
		circle.startRotate(-10);
	});
	buttonPrevWs.bind('mouseup mouseleave', function(e) {
		$(this).attr('src','icons/arrow_wb_32_left.gif')
		e.preventDefault();
		e.stopImmediatePropagation();
		circle.stopRotate();
	});
	*/

	// im Kreis anordnen
	circle.prepare();
	circle.draw();

	// WS und SZ draggable machen
	$(".drag1 , .drag2").draggable(draggableObjRot());

	$("#canvas").click(function(e) {
		if(expandedWsNum) {
			collapse(expandedWsNum);
			circle.prepare();
			circle.draw();
		}
	});

	for ( var i = 1; i < 13; i++) {
		var wsId = "#ws_" + i;
		var szId = "#sz_" + i;
		$(wsId).mouseover(function() {
		});
		$(wsId + ' a').click(clickWs);
		$(szId).click(function() {
			loadSz(getSzNum(this));
		});

		// $(szId).mouseover(function() { $(this).css({"border-color":
		// "red"});});
		// $(szId).mouseout( function() { $(this).css({"border-color":
		// "dimgray"});});
		// Zuweisung des Links der SZ zum Akkordeon

	}

	if (expandedWsNum != 0) {
		expandFirst(expandedWsNum, expandedWsOldTop);
		$('#buttonWsWrap').hide()
		$('#buttonImgWrap').show()
	}else{
		buttonPrevWs.setEnabled( true)
		buttonNextWs.setEnabled( true)
		buttonPrevImg.setEnabled( false)
		buttonNextImg.setEnabled( false)
		$('#buttonWsWrap').show()
		$('#buttonImgWrap').hide()
	}

	// /////////////////

	function expand(wsNum) {
		var $ws = $("#ws_" + wsNum);
		var $wst = $("#wst_" + wsNum);
		var $wsTail = $("#wsTail" + wsNum);
		var szId = "#sz_" + wsNum;
		if (expandedWsNum != 0) {
			collapse(expandedWsNum);
		}
		expandedWsOldTop = $ws.position().top;
		expandedWsNum = wsNum;
		expandedWsOldZ = $wst.css('z-index');

		// Optik

		$wst.css('z-index', 200 + $wst.css('z-index'));
		$wsTail.css( {
			"opacity" : 0
		});
		$(".slz a").css( {
			"opacity" : .5
		});
		$(".ws a").css( {
			"opacity" : .5
		});
		$(szId + ' a').css( {
			"opacity" : 1
		});
		$(".wst").css( {
			"opacity" : 0
		});
		for ( var j = 1; j <= nWs; j++) {
			$("#ws_" + j + " a").css( {
				"opacity" : (j == wsNum ? 1 : 0.5)
			});
		}

		$wst.css( {
			"opacity" : 1,
			"font-weight" : "bold",
			"left" : $ws.position().left - 130,
			"top" : $ws.position().top + 200,
			"text-align" : "right"
		});
		circle.showTail($ws);

		$wsTail.animate( {
			opacity : 1
		}, {
			duration : 200
		});
		uu=new draggableObjVert(wsNum)
		$ws.draggable("destroy").draggable(uu)
                //.bind('touchstart touchend touchmove',myTouchHandler)
               // $($ws).addEventListener("touchstart", function(e){cobsole.log('heho')}, true);


		buttonPrevWs.setEnabled(false)
		buttonNextWs.setEnabled(false)
		buttonPrevImg.setEnabled(true)
		buttonNextImg.setEnabled(true)
		$('#buttonWsWrap').hide()
		$('#buttonImgWrap').show()
		// Einblenden
		// $wst.show();
		// $wsTail.show();

		expandedWsOldTop = $ws.position().top;
	}

	function collapse(wsNum) {
		var $ws = $("#ws_" + wsNum);
		var $wst = $("#wst_" + wsNum);
		var $wsTail = $("#wsTail" + wsNum);
		$wst.css('z-index', -200 + $wst.css('z-index'));
		$wst.css( {
			"opacity" : 0.5,
			"font-weight" : "normal",
			"left" : $ws.position().left,
			"top" : expandedWsOldTop + 136,
			"text-align" : "center"
		});

		$ws.css('top', expandedWsOldTop);
		$ws.css('height', '122px');
		circle.hideTail($ws);
		// $wsTail.hide();
		// $(curWsId).animate({top:expandedWsOldTop}, {duration:200});
		// $(curWsTailId).animate({opacity:0}, {duration:500,complete:function()
		// {$(curWsTailId).hide()}});

		$ws.draggable("destroy").draggable(draggableObjRot(wsNum));
		buttonPrevWs.setEnabled(true)
		buttonNextWs.setEnabled(true)
		buttonPrevImg.setEnabled(false)
		buttonNextImg.setEnabled(false)
		$('#buttonWsWrap').show()
		$('#buttonImgWrap').hide()
		expandedWsNum = 0;

	}

	function expandFirst(wsNum, wsTop) {
		var $ws = $("#ws_" + wsNum);
		expand(wsNum);
		expandedWsNum = wsNum;
		$ws.position().top = wsTop;
		expandedWsOldTop = $ws.position().top;
	}

	function clickWs(e) {
		e.preventDefault();
		e.stopImmediatePropagation();
		console.log('clickWs', e);
		var wsNum = getWsNum(this);
		var imgNum = getImgNum(this);
		if (expandedWsNum != wsNum) {
			expand(wsNum);
			expandedWsNum = wsNum;
		} else {
			var href = $(this).attr('href');
			var parts = href.split('#');
			window.location.href = parts[0];
		}
	}

	// ////////////////
	function loadZoom(wsNum, imgNum) {
		alert('loadZoom(' + wsNum + ', ' + imgNum + ')');
	}

	function loadSz(szNum) {
		var url = $('#sz_' + szNum + ' a').attr('href');
		//alert('loadSz(' + szNum + ')' + "\n" + url);
	}

	function getSzNum(this_) {
		return parseInt($(this_).attr('id').split('_')[1]);
	}
	function getWsNum(this_) {
		return parseInt($(this_).attr('id').split('_')[1]);
	}
	function getImgNum(this_) {
		return parseInt($(this_).attr('id').split('_')[2]);
	}
	function getWsRect(wsId) {
		var ws = $(wsId);
		var wsImg = $(wsId + ' img');
		var wsImgCount = $(wsId + ' img').size();
		return {
			left : ws.position().left,
			top : ws.position().top,
			height : wsImg.outerHeight() * wsImgCount,
			width : wsImg.outerWidth()
		};
	}

}

function Circle(center_, nWs_, nWsVis_, dx_, phi0) {

	// this.watch('phi', onPhiChanged);
	var center = center_;
	var nWs = nWs_; // Anzahl der Werks�tze
	var nWsVis = nWsVis_; // Anzahl der sichtbaren Werks�tze
	var dx = dx_; // Breite eines WS-Icons mit Abstand
	var r = nWsVis * 136 / Math.PI; // Radius
	var phiMax = 2 * nWsVis * dx; // Umfang. Entspricht unserem "normierten"
									// MaximalWinkel
	var vMove = 100
	this.dPhi = dx; // "Normierter" Winkel um Kreis um einen WS weiter zu drehen
	this.phi = phi0;

	var active;

	function onPhiChanged(name, oldValue, newValue) {

		// while (newValue < 0) {newValue += phiMax * nWs}
		// while (newValue >= phiMax * nWs) {newValue -= phiMax * nWs}
		return newValue;
	}
	function getWsRect(wsId) {
		var ws = $(wsId);
		var wsImg = $(wsId + ' img');
		var wsImgCount = $(wsId + ' img').size();
		return {
			left : ws.position().left,
			top : ws.position().top,
			height : wsImg.outerHeight() * wsImgCount,
			width : wsImg.outerWidth()
		};
	}
	var trigFn = new Array();
	var c0 = 2 * Math.PI / phiMax;
	for ( var i = 0; i <= phiMax; i++) {
		trigFn[i] = {
			c : -Math.round(Math.cos(i * c0) * r),
			s : Math.round(Math.sin(i * c0) * 100)
		};
	}
	function fixAngelShort(phi_) {
		while (phi_ < 0) {
			phi_ += phiMax;
		}
		while (phi_ >= phiMax) {
			phi_ -= phiMax;
		}
		return phi_;
	}
	this.hideTail = function(ws) {
		if (arguments.length > 1) {
			ws = $(this);
		} else {
			if ('number' == typeof ws) {
				ws = $('#ws_' + ws);
			}
			;
		}
		var $wsTail = ws.children('.tail');
		$wsTail.hide();
		ws.css('height', $wsTail.css('top'));
		// $wsTail.css('height',122)

	};
	this.showTail = function(ws) {
		if (arguments.length > 1) {
			ws = $(this);
		} else {
			if ('number' == typeof ws) {
				ws = $('#ws_' + ws);
			}
		}
		var $wsTail = ws.children('.tail');

		$wsTail.show();
		ws.css('height', ws.attr('Height') + 'px');
		// $wsTail.css('height',$wsTail.attr('oldHeight'))

	};

	this.prepare = function() {
		// $("#m1 , #m2 , #m3 , #m4").animate({top: "5px",left: "5px"}, 500);
		// menue(); TODO
		
		$(".ws").each(this.hideTail);

		$(".ws").css( {
			height : '122px'
		})// TODO
		$("")
		$(".head a").css( {
			"opacity" : 1
		});
		$(".wst").css( {
			"opacity" : 1,
			"font-weight" : "normal",
			"text-align" : "center"
		});
		$(".slz a").css( {
			"opacity" : 1
		});

		$(".drag1 , .drag2 , .wst").stop();
		// $(".drag1 .head > a > img , .drag2").css({"border-color":
		// "dimgray"});

	};

	this.draw = function() {
		var nWsXdPhi = nWs * this.dPhi;
		var c0 = phiMax * nWs;

		var phiLocalWs;
		var phiLocalSz;
		// Position berechnen
		//
		for ( var i = 0; i < nWs; i++) {
			// jeweilige Winkel...

			if (this.phi < 0) {
				phiLocalWs = (c0 + this.phi + i * this.dPhi) % (nWsXdPhi);
				phiLocalWs -= phiMax;
			} else {
				phiLocalWs = (this.phi + i * this.dPhi) % (nWsXdPhi);
			}
			if (phiLocalWs < 0) {
				phiLocalWs += phiMax;
			}

			phiLocalSz = phiLocalWs + phiMax / 2;
			// var rSz = trig(phiLocalSz);
			// var rWs = trig(phiLocalWs);
			var rSz = trigFn[fixAngelShort(phiLocalSz)];
			var rWs = trigFn[fixAngelShort(phiLocalWs)];
			var szPos = {
				x : center.x + rSz.c,
				y : center.y + rSz.s
			};
			var wsPos = {
				x : center.x + rWs.c,
				y : center.y + rWs.s
			};
			var wsY = rWs.s;
			var szY = rSz.s;

			// GW Selectoren werden gebildet
			var wsNum = i + 1;
			var szId = "#sz_" + wsNum;
			var wsId = "#ws_" + wsNum;
			var wsTxtId = "#wst_" + wsNum;
			var selSzWsWsTxt = wsId + " , " + szId + " , " + wsTxtId;

			// console.log(i + "\t" + selWs + "\t" + wsPos.x + "\t" + wsPos.y);


			$(wsId).attr('phi', Math.round(phiLocalWs / this.dPhi));
			$(wsId).attr('y0',wsPos.y);
			var wsHeight=$(wsId).attr('height');
			var yMax = wsPos.y
			var yMin = yMax-wsHeight+$(wsId + ' img').outerHeight()
			$(wsId).attr('yMax',wsPos.y);
			$(wsId).attr('yMin',wsPos.y-$(wsId).attr('tailHeight'));

			
			if (wsY < 0) {
				$(selSzWsWsTxt).hide();
			} else {
				$(selSzWsWsTxt).show();
				// Position zuweisen
				$(szId).css( {
					top : szPos.y,
					left : szPos.x,
					"z-index" : 300 + szY
				});
				$(wsId).css( {
					top : wsPos.y,
					left : wsPos.x,
					"z-index" : 400 + wsY * 2
				});
				$(wsTxtId).css( {
					top : wsPos.y + 136,
					left : wsPos.x,
					"z-index" : 401 + wsY * 2
				});// TODO: absolute?
                                if(!navigator.userAgent.match(/iPad/i) && false){
                                var op;
                                var fade = 50;
                                op = Math.min(Math.max(wsY, 0), fade) / fade;
                                $(selSzWsWsTxt).css( {				"opacity" : op			});
                                }

			}

			
		}
	};

	this.engage = function() {
		var phiNew = Math.round(this.phi / this.dPhi) * this.dPhi;
		// this.rotateTo(phiNew)

	};
	// Animation TODO:Abruch
	this.rotateTo = function(phiEnd) {
		
			var me = this;
			$('#phi').css('left', this.phi+'px');
			$('#phi').animate( {
				left : phiEnd
			}, {
				duration : 500,
				step : function(e) {
					me.phi = Math.round(e);
					me.draw();
				}
			})
			// this.draw();
			// this.phi = phiEnd;
		
	};
	this.rotateBy = function(dPhi) {
		var phiEnd=this.phi+dPhi
		this.rotateTo(phiEnd)
	};
	this.shiftBy = function(dY,wsNum){
		console.log(dY,wsNum)
		
		var wsId = '#ws_' + wsNum;
		var ws = $(wsId);
		ws.stop(true, true)
		var yMax = ws.attr('yMax');
		var yMin = ws.attr('yMin');
		var yEnd = parseInt(dY)+ws.position().top
		yEnd = Math.max(yMin,Math.min( yMax, yEnd ));
		var res={isFirst:(yEnd==yMin),isLast:(yEnd==yMax)}
		console.log(dY,wsNum,yEnd)
		ws.animate( {
				top : yEnd
			}, {
				duration : 500

			})
		return res
	}


	var me = this;
	var t=0
	var tN=0
	this.rotation={step:0,active:null};
	this.shift={step:0,active:null};
	this.startShift = function(step,wsNum){
		var wsId = '#ws_' + wsNum;
		var ws = $(wsId);

		this.shift.step = step;
		this.shift.ws = ws;
		this.shift.yMax = ws.attr('yMax');
		this.shift.yMin = ws.attr('yMin');
		console.log(this.shift);
		clearInterval(this.shift.active);
		t=(new Date()).getTime()
		this.shift.active = setInterval(this.doShift, 50);
	}
	this.doShift = function(){
		tN=(new Date()).getTime()
		var dy=parseInt(me.shift.step*(tN-t)/50)
		var y = me.shift.ws.position().top +dy;
		y = Math.max(me.shift.yMin,Math.min(me.shift.yMax,y));
		me.shift.ws.css({top:y+'px'})
		t=tN

	}
	this.stopShift = function(){
		clearInterval(me.shift.active);
		var y = me.shift.ws.position().top;
		var yMax = parseInt(me.shift.ws.attr('yMax'));
		var yNew =  yMax+ 120 * Math.round((y - yMax) / 120);
		console.log('stop',y,yNew)
		me.shift.ws.animate( {
			top : yNew
		}, {
			duration : Math.abs(y - yNew)
		});
	}

	this.startRotate = function(step) {
		me.rotation.step=step;
		clearInterval(me.rotation.active);
		t=(new Date()).getTime()
		me.rotation.active = setInterval(me.doRotate, vMove);
		console.log('startRotate')
	}
	this.doRotate = function() {
		clearInterval(me.rotation.active);
		tN=(new Date()).getTime()
		var dT=tN-t
		me.phi+=parseInt(me.rotation.step*dT/vMove)
		me.draw()
		t=tN




		var ti=Math.max(0,vMove-dT)
		console.log('doRotate','dT:'+ti)
		me.rotation.active = setInterval(me.doRotate, ti);

	};
	this.stopRotate = function() {
		clearInterval(me.rotation.active);
	}

}