var flipdigit = function(id,digit,to){
	//console.log(digit + to);
	var toUpperImage = base+"theme1/images/"+to+"up.jpg";
	var toLowerImage= base+"theme1/images/"+to+"down.jpg";
	$("#"+id+ " #"+ digit+ " .upper .back img").attr("src",toUpperImage);
	$("#"+id+ " #"+ digit+ " .lower .back img").attr("src",$("#"+id+  " #"+digit+ " .lower .front img").attr("src"));
	$("#"+id+ " #"+ digit+ " .lower .front img").attr("src",toLowerImage).css("width","16px").css("height","0px");
	flipFront(id,digit);
}
var flipdecimal = function(id,to){
	//console.log("to"+to);
	var toUpperImage = base+"theme1/images/"+to+"up.jpg";
	
	$("#"+id+ " #decimal .upper .back img").attr("src",toUpperImage);
	
	$("#"+id+ " #decimal .upper .front img").animate({
	   "width" : "16px",
	   "height": ["0", "swing"],
	   "marginTop":"16px",
	   "easing": "easein"
	}, 1000, function() {
		
	});
}
var flipFront = function ( id,digit)  {  
	$("#"+id+ " #"+ digit+ " .upper .front img").animate({
	   "width" : "16px",
	   "height": ["0", "swing"],
	   "marginTop":"16px",
	   "easing": "easein"
	}, 1000, function() {
		flipBottom(id,digit);
	});
}//end flip 


var flipBottom = function (id,digit){
	$("#"+id+ " #"+ digit+ " .lower .front img").animate({
	   "width" : "16px",
	   "height": ["16px", "swing"],
	    "marginTop":"0px",
	   "easing": "easein"
	}, 1000, function() {
		//$("#"+id+" #"+ digit+ " .upper .back").append("<img src='images/2up.jpg'/>"); 
	});
}

var flip = function(id, to){
	
	var decimal = parseInt(roundVal(to % 1 *100));
	
	if(decimal < 10) decimal = '0'+decimal;
	
	//console.log('decimal'+decimal);
	var firstDigit = parseInt(to % 10);
	var secondDigit = parseInt(to / 10)%10;
	var thirdDigit = parseInt(to /100)%10;
	var fourthDigit = parseInt(to/1000)%10;
	
	
	
	$(this).oneTime(1000 * 1, function() {
			
	    flipdecimal(id,decimal);
	    
	});
	
	var i = 1;
	$(this).oneTime(1000 * 3, function() {
			
	    flipdigit(id,"digit"+i,firstDigit);
	    i=2;
	});
	
	$(this).oneTime(1000 * 5, function() {
			
	    flipdigit(id,"digit"+i,secondDigit);
	   i=3;
	});
	
	$(this).oneTime(1000 * 7, function() {
			
	    flipdigit(id,"digit"+i,thirdDigit);
	    i=4;
	});	
	$(this).oneTime(1000 * 9, function() {
			
	    flipdigit(id,"digit"+i,fourthDigit);
	    
	});	
}

var createFlip = function(id, number){
	var decimal = parseInt(number%1 *100);
	if(decimal < 10) decimal = '0'+decimal;
	var firstDigit = parseInt(number % 10);
	var secondDigit = parseInt(number / 10)%10;
	
	var thirdDigit = parseInt(number /100)%10;
	
	
	var fourthDigit = parseInt(number/1000)%10;
	
	var content = createEuro ();
	content += createDigit('digit4', fourthDigit);
	content += createDigit('digit3', thirdDigit);
	content += createDigit('digit2', secondDigit);
	content += createDigit('digit1', firstDigit);
	content += createDecimal (decimal);
	
	$("#"+id).html(content);	
}
		

var createDigit = function(digit, number){
	var content = '<div class="digit" id="'+digit+'">';
	content += '<div class="upper">';
	content += '<div class="back"> <img src="'+base+'theme1/images/'+number+'up.jpg" /></div>';
	content += '<div class="front"><img src="'+base+'theme1/images/'+number+'up.jpg" /> </div>';
	content += '</div>';
	
	content += '<div class="lower">';
	content += '<div class="back"> <img src="'+base+'theme1/images/'+number+'down.jpg" /></div>';
	content += '<div class="front"><img src="'+base+'theme1/images/'+number+'down.jpg" /> </div>';
	content += '</div>';
	
	content += '</div>';
	return content;
	
}

var createDecimal = function(number){
	var content = '<div class="digit" id="decimal">';
	content += '<div class="upper">';
	content += '<div class="back"> <img src="'+base+'theme1/images/'+number+'up.jpg" /></div>';
	content += '<div class="front"><img src="'+base+'theme1/images/'+number+'up.jpg" /> </div>';
	content += '</div>';
	
	content += '<div class="lower">';
	content += '<div class="back"> <img src="'+base+'theme1/images/point.jpg" /></div>';
	content += '<div class="front"><img src="'+base+'theme1/images/point.jpg" /> </div>';
	content += '</div>';
	
	content += '</div>';
	return content;
	
}
var createEuro = function(){
	var content = '<div class="digit" >';
	content += '<div class="upper">';
	content += '<div class="back"> <img src="'+base+'theme1/images/eurodown.jpg" /></div>';
	content += '<div class="front"><img src="'+base+'theme1/images/euroup.jpg" /> </div>';
	
	content += '</div>';
	
	content += '<div class="lower">';
	content += '<div class="back"> <img src="'+base+'theme1/images/eurodown.jpg" /></div>';
	content += '<div class="front"><img src="'+base+'theme1/images/eurodown.jpg" /> </div>';
	content += '</div>';
	
	content += '</div>';
	return content;
	
}

var roundVal = function(val){
	var dec = 2;
	var result = Math.round(val*Math.pow(10,dec))/Math.pow(10,dec);
	return result;
}

