// JavaScript Document
$(window).load(function () {  
 	//$("#result_img_wrapper").draggable().css("z-index", 2000);
	//submit_text();
	
	//pagging Starts
	//how much items per page to show
	var show_per_page = 5; 
	//getting the amount of elements inside content div
	var number_of_items = $('#content').children().size();
	//calculate the number of pages we are going to have
	var number_of_pages = Math.ceil(number_of_items/show_per_page);
	
	$('#total_page').html(number_of_pages);
	$('#show_page').html(1);
	//set the value of our hidden input fields
	$('#current_page').val(0);
	$('#show_per_page').val(show_per_page);
	
	//now when we got all we need for the navigation let's make it '
	
	/* 
	what are we going to have in the navigation?
		- link to previous page
		- links to specific pages
		- link to next page
	*/
	var navigation_html = '<a class="previous_link" href="javascript:previous();"><</a>';
	var current_link = 0;
	while(number_of_pages > current_link){
		navigation_html += '<a class="page_link" href="javascript:go_to_page(' + current_link +')" longdesc="' + current_link +'">'+ (current_link + 1) +'</a>';
		current_link++;
	}
	navigation_html += '<a class="next_link" href="javascript:next();">></a>';
	
	$('#page_navigation').html(navigation_html);
	
	//add active_page class to the first page link
	$('#page_navigation .page_link:first').addClass('active_page');
	
	//hide all the elements inside content div
	$('#content').children().css('display', 'none');
	
	//and show the first n (show_per_page) elements
	$('#content').children().slice(0, show_per_page).css('display', 'block');
	//pagging Ends
});

function submit_text(){
	$("#result_img").html($("#txt_box").val());
	//$("#dimension_img").html($("#txt_box").val());
	$("#dimension_img1").html($("#txt_box").val());
	
	drop_shadow('#6699DA');
	$("#txt_msg").val($("#txt_box").val());
	$("#txt_count").val(($("#txt_box").val().length)-($("#txt_box").val().split(/\b[\s,\.-:;]*/).length -1));
	//var text_length = $("#txt_count").val()+' letters'
	//text_length = $("#txt_box").val()+'&nbsp;'+text_length;
	
	$("#result_img1").html($("#txt_box").val()); 
	$("#result_dimen").html($("#txt_box").val()); 
	
	if($("#txt_box").val() != 'Typ uw tekst hier'){
		$('#next_btn').removeClass('next_btn');
		$('#next_btn').addClass('next_btn_select');
	}
	
	create_basic1($("#txt_msg").val(), HexToDec(), $("#font_type").val(), 75);
	
	//$("#txtcalc").html("Hoogte= "+$("#result_dimen").height()+"mm &nbsp;&nbsp;Breedte="+$("#result_dimen").width()+"mm");
	
	$('#result_dimen img').load(function() {
		$("#txtcalc").html("Hoogte= 100mm &nbsp;&nbsp;Breedte="+$("#result_dimen img").width()+"mm");
	});
	
	
	create_basic();
}


function create_basic1(msg, colorvalue, fontvalue, fontSize){ 
	var myImage = "http://www.3dletters.nl/wp-content/themes/3dletter/custom_made/createImage.php?msg="+msg+"&fColor="+colorvalue+"&fontType="+fontvalue+"&fontSize="+fontSize;
	$("#result_dimen").html('<img src="'+myImage+'" />'); 
}

function change_color(color_value){
	$("#result_img").css({"color":"#"+color_value}); 
	$("#result_img1").css({"color":"#"+color_value});
	
	$("#font_color").val(color_value);
	create_basic();
}

function change_light_color(color_value){
	$("#back_light_color").val(color_value);
	if(color_value != 'remove' && color_value != 'rgb'){ 
		drop_shadow(color_value);
	}
	else if(color_value == 'remove'){$("#result_img").removeShadow();$("#result_img1").removeShadow();}
	else if(color_value == 'rgb'){  
		var color_array = new Array ( "#6699DA", "#ABED72", "#FC799B", "#ECBA7B", "#F6FC7E", "#CBD0B0", "#DCF3ED" );
		for(i=0;i<7;i++){
			drop_shadow(color_array[i]);
		}
	}
}

function drop_shadow(color_val){ 
	
	if($('#front_light').hasClass('front_light_on')){
		$("#result_img").removeShadow();
		$("#result_img").dropShadow({left: 2, top: 2, blur: 2, opacity: 1, color: $("#back_light_color").val(), swap: true });
		$("#result_img1").removeShadow();
		$("#result_img1").dropShadow({left: 2, top: 2, blur: 2, opacity: 1, color: $("#back_light_color").val(), swap: true });
	}
	else if($('#back_light').hasClass('back_light_on')){ 
		$("#result_img").removeShadow();
		$("#result_img").dropShadow({left: 2, top: 2, blur: 2, opacity: 1, color: color_val });
		$("#result_img1").removeShadow();
		$("#result_img1").dropShadow({left: 2, top: 2, blur: 2, opacity: 1, color: color_val });
	}
}

function change_font(font_value1,font_value2){
	$("#result_img").css({"fontFamily":font_value2});
	$("#result_img1").css({"fontFamily":font_value2});
	$("#result_dimen").css({"fontFamily":font_value2});
	$("#txt_selected").val(font_value2);
	$("#result_img").redrawShadow();
	$("#result_img1").redrawShadow();
	$("#font_type").val(font_value1);
	create_basic();
}

function newfun(numbers) { 
	for(i=1;i<=numbers;i++){ 
		$("#font_type"+i).val($("#txt_box").val());
	}
}

function create_basic(){ 
	var msg = $("#txt_msg").val();
	var colorvalue = HexToDec();
	var fontvalue = $("#font_type").val();
	var myImage = "http://www.3dletters.nl/wp-content/themes/3dletter/custom_made/dbuilder.php?msg="+msg+"&rgbmix="+colorvalue+"&font="+fontvalue+"&size=30";
	$("#img_url").val(myImage);
	//alert($("#img_url").val());
}

function HexToDec(){
	Input = $("#font_color").val(); //Input = '#'+Input;alert(Input);
	Input = Input.toUpperCase();
	a = GiveDec(Input.substring(0, 1));
	b = GiveDec(Input.substring(1, 2));
	c = GiveDec(Input.substring(2, 3));
	d = GiveDec(Input.substring(3, 4));
	e = GiveDec(Input.substring(4, 5));
	f = GiveDec(Input.substring(5, 6));
	x = (a * 16) + b;
	y = (c * 16) + d;
	z = (e * 16) + f;
	var rgbresult = x+','+y+','+z
	return rgbresult;
}

function GiveDec(Hex){
	if(Hex == "A")
	  Value = 10;
	else
	if(Hex == "B")
	  Value = 11;
	else
	if(Hex == "C")
	  Value = 12;
	else
	if(Hex == "D")
	  Value = 13;
	else
	if(Hex == "E")
	  Value = 14;
	else
	if(Hex == "F")
	  Value = 15;
	else
	  Value = eval(Hex);
	return Value;
}

function change_front_light(){
	if($('#front_light').hasClass('front_light_off')){
		$('#front_light').removeClass('front_light_off');
		$('#front_light').addClass('front_light_on');
		$('#back_light').removeClass('back_light_on');
		$('#back_light').addClass('back_light_off');
		$("#result_img").removeShadow();
		$("#result_img1").removeShadow();
		$("#result_img").dropShadow({left: 2, top: 2, blur: 2, opacity: 1, color: $("#back_light_color").val(), swap: true });
		$("#result_img1").dropShadow({left: 2, top: 2, blur: 2, opacity: 1, color: $("#back_light_color").val(), swap: true });
	}
}

function change_back_light(){
	if($('#back_light').hasClass('back_light_off')){
		$('#back_light').removeClass('back_light_off');
		$('#back_light').addClass('back_light_on');
		$('#front_light').removeClass('front_light_on');
		$('#front_light').addClass('front_light_off');
		$("#result_img").removeShadow();
		$("#result_img").dropShadow({left: 2, top: 2, blur: 2, opacity: 1, color: $("#back_light_color").val()});
		$("#result_img1").removeShadow();
		$("#result_img1").dropShadow({left: 2, top: 2, blur: 2, opacity: 1, color: $("#back_light_color").val()});
	}
}

function change_night_view(){
	if($('#night_view').hasClass('night_view_off')){
		$('#night_view').removeClass('night_view_off');
		$('#night_view').addClass('night_view_on');
		$('#day_view').removeClass('day_view_on');
		$('#day_view').addClass('day_view_off');
	$('#result_sample').removeClass('result_sample');
	$('#result_sample').addClass('result_sample_night');
	}
}

function change_day_view(){
	if($('#day_view').hasClass('day_view_off')){
		$('#day_view').removeClass('day_view_off');
		$('#day_view').addClass('day_view_on');
		$('#night_view').removeClass('night_view_on');
		$('#night_view').addClass('night_view_off');
		$('#result_sample').removeClass('result_sample_night');
		$('#result_sample').addClass('result_sample');
	}
}

function next_step(step){
	if(step == 1){
		if($("#txt_box").val() == 'Typ uw tekst hier'){
			alert('Vul uw tekst');
			return false;
		}
		else{ 
			$('#design_div').hide();
			$('#nav').hide();
			$('#dimensions_div').show();
			$("#created_img").attr("src",$("#img_url").val());
			$("#created_img1").attr("src",$("#img_url").val());
		}
	}
	else if(step == 2){
		if($("#omschrijving").val() == ''){
			
			alert('Selecteer uw omschrijving');			
			return false;
		}
		else{
			//document.getElementById('loding_div').innerHTML = "<img src='http://www.3dletters.nl/wp-content/themes/3dletter/images/ajax-loader.gif' border='0' />";
			$("#loding_div").html("<img src='http://www.3dletters.nl/wp-content/themes/3dletter/images/ajax-loader.gif' border='0' />");
			$('#hd_action').val(1);
			$('#threed-frm').submit();
			$('#design_div').hide();
			$('#nav').hide();
			$('#dimensions_div').hide();
			$('#result_sample').hide();
		}
	}
	else if(step == 3){
		if($("#name").val() == ''){
			
			alert('Vul uw naam in');
			return false;
		}
		if($("#address").val() == ''){
			
			alert('Vul uw adres');
			return false;
		}
		if($("#postcode").val() == ''){
			
			alert('Voer uw postcode in');
			return false;
		}
		if($("#location").val() == ''){
			
			alert('Voer je Woonplaats');
			return false;
		}
		if($("#country").val() == ''){
			
			alert('Geef uw land');
			return false;
		}
		if($("#mail").val() == ''){
			
			alert('Vul uw e-mail');
			return false;
		}
		if($("#phone").val() == ''){
			
			alert('Voer uw telefoon');
			return false;
		}
		else{
			$('#hd_action1').val(1);
			$('#contact_info').submit();
		}
			
	}
}

function finish_step2(){ 
	if($("#omschrijving").val() != ''){
		
		$('#next_btn1').removeClass('next_btn');
		$('#next_btn1').addClass('next_btn_select');
	}
}

//after submit form
function finished_result(){
		//alert(coming);
}
//paggination Starts
function previous(){
	
	new_page = parseInt($('#current_page').val()) - 1;
	//if there is an item before the current active link run the function
	if($('.active_page').prev('.page_link').length==true){
		go_to_page(new_page);
	}
	
}

function next(){
	new_page = parseInt($('#current_page').val()) + 1;
	//if there is an item after the current active link run the function
	if($('.active_page').next('.page_link').length==true){
		go_to_page(new_page);
	}
	
}
function go_to_page(page_num){ 
	//get the number of items shown per page
	var show_per_page = parseInt($('#show_per_page').val());
	
	//get the element number where to start the slice from
	start_from = page_num * show_per_page;
	
	//get the element number where to end the slice
	end_on = start_from + show_per_page;
	
	//hide all children elements of content div, get specific items and show them
	$('#content').children().css('display', 'none').slice(start_from, end_on).css('display', 'block');
	
	/*get the page link that has longdesc attribute of the current page and add active_page class to it
	and remove that class from previously active page link*/
	$('.page_link[longdesc=' + page_num +']').addClass('active_page').siblings('.active_page').removeClass('active_page');
	
	//update the current page input field
	$('#current_page').val(page_num);
	$('#show_page').html(page_num+1);
}
//Paggination Ends