jQuery(document).ready(function($) {

	var theme_url = 'https://ss.flowinthost.com.au/';

			var ss_app = $('#ss_boards');
		
	var board_width = '';
	if(ss_app.outerWidth()<900) {
		ss_app.addClass('boards_tablet');
		board_width = ' style="width:25%"';
	}

			var ss_wls = $('#ss_wheels');
		
	var wheel_width = '';
	if(ss_wls.outerWidth()<720) {
		wheel_width = ' style="width:33.33%"';
	}

	if(ss_wls.outerWidth()<900) {
		ss_wls.addClass('wheels_tablet');
	}
								
			var ss_lang = ss_app.attr('lang');
		if(!ss_lang) ss_lang = 'en';
	
	$('<link/>', {
		rel: 'stylesheet',
		type: 'text/css',
		href: theme_url + 'css/?selector=0&wheels=0&ver' + Date.now()
	}).appendTo('head');

	// get json

	// var jsondata = {};
	var boards = {};
	var wheels = {};
	var strings = {};

	// alert('b:'+ss_app.length+' / w:'+ss_wls.length);

	$.getJSON('https://ss.flowinthost.com.au/ajax_data/?lang='+ss_lang, function( data ) {
		// alert('test');
		var jsondata = data;

		console.log(jsondata);

		strings = jsondata['strings'];
		boards = jsondata['boards'];
		wheels = jsondata['wheels'];

		var ss_html = '';

		// create boards app
		if(ss_app.length>0) {
			ss_html = '<div class="ss_heading">' + strings['smoothstar'] + '</div>';
			ss_html += '<div class="ss_label ss_select_height"><label><span>' + strings['height'] + '</span><div class="ss_input_box"><input id="ss_height" name="ss_height" type="range" value="175" min="0" max="250" placeholder=""><span class="ss_height_info">5\'9" / 175cm</span></div></label></div>';
			ss_html += '<div class="ss_label ss_select_weight"><label><span>' + strings['weight'] + '</span><div class="ss_input_box"><input id="ss_weight" name="ss_weight" type="range" value="80" min="0" max="150" placeholder=""><span class="ss_weight_info">176lbs / 80kg</span></div></label></div>';
			ss_html += '<div class="ss_calculate_row"><input type="button" id="ss_calculate" value="' + strings['calculate'] + '"></div>';
			ss_html += '<div id="ss_board_select"></div>';
			ss_app.html(ss_html);
		}

		// create wheels app
		if(ss_wls.length>0) {
			ss_html = '<div class="ss_heading">' + strings['wheels'] + '</div>';
			ss_html += '<div class="ss_label ss_select_weight"><label><span>' + strings['weight'] + '</span><div class="ss_input_box"><input id="ssw_weight" name="ssw_weight" type="range" value="80" min="0" max="150" placeholder=""><span class="ssw_weight_info">176lbs / 80kg</span></div></label></div>';
			ss_html += '<div class="ss_label ss_select_terrain"><span>' + strings['terrain'] + '</span><div class="ss_radio_box"><label><input type="radio" name="ss_terrain" class="ss_terrain" value="0" checked><span>' + strings['smooth'] + '</span></label><label><input type="radio" name="ss_terrain" class="ss_terrain" value="5"><span>' + strings['rough'] + '</span></label><label><input type="radio" name="ss_terrain" class="ss_terrain" value="10"><span>' + strings['course'] + '</span></label></div></div>';
			ss_html += '<div class="ss_calculate_row"><input type="button" id="ssw_calculate" value="' + strings['calculate'] + '"></div>';
			ss_html += '<div id="ss_wheel_select"></div>';
			ss_wls.html(ss_html);
		}

		// create wheels app
	});

	var smaller_range = '';
	var larger_range = '';

	ss_app.on('click','#ss_calculate', function() {
		var item_width = ( ss_app.width() / Object.keys(boards).length ).toFixed(2);
		// alert(item_width);
		var item_height = 0;
		var b_select = $('#ss_board_select');
		var show_boards = [];
		var ss_h = parseFloat($('#ss_height').val());
		var ss_w = parseFloat($('#ss_weight').val());
		var boards_html = '';
		var range_info = '';
		var ss_link = '';
		var wheels_option = '';
		var highlight_board = '';
		var img_to_use = '';

		$.each( boards, function(index,value) {
			item_height = ( parseFloat(value['model']) * item_width / 18 ).toFixed(2);
			// alert(item_height);
			// alert(parseFloat(value['model'] + ' ' + item_width));
			highlight_board = '';
			range_info = '';
			img_to_use = value['outline'];
			if(ss_h>=parseFloat(value['min_h'])&&ss_h<=parseFloat(value['max_h'])) {
				show_boards.push(parseInt(value['range']));
				highlight_board = ' highlight';
				img_to_use = value['thumb'];
			}
			ss_link = (value['link']) ? '<div class="ss_link_container"><a class="ss_link" href="' + value['link'] + '" target="_blank">' + strings['select'] + '</a></div>' : '';
			wheels_option = (ss_w>value['max_w']) ? '<div class="ss_wheel_options_container"><a class="ss_wheel_options" href="#">+' + strings['wheel_options'] + '</a></div>' : '';
			boards_html += '<div'+board_width+' data-model="' + value['model'] + '" data-range="' + value['range'] + '" class="ss_board' + highlight_board + '"><div class="ss_baseline"><div class="ss_img_container"><img style="height:' + item_height + 'px" src="' + img_to_use + '" alt=""><div class="ss_range_info"></div></div><div class="ss_board_info"><div class="ss_board_name">'+value['name']+'</div><div class="ss_opt_height">' + cm_to_feet(value['opt_h']) + ' / ' + value['opt_h'] + strings['cm'] + '</div>' + range_info + ss_link + wheels_option + '</div></div></div>';
		});
		b_select.html(boards_html);

		if(show_boards.length>1) {
			show_boards.sort();
			show_boards.reverse();
			larger_range = strings['responsive'] + '<br>' + strings['turning'];
			smaller_range = strings['drive'] + '<br>' + strings['hold'];
			$.each( show_boards, function(index,value) {
				if(index==0) {
					$('.highlight[data-range="' + value + '"] .ss_range_info').html(larger_range);
				} else if(index==(show_boards.length-1)) {
					$('.highlight[data-range="' + value + '"] .ss_range_info').html(smaller_range);
				}
			});
		}
	});

	ss_wls.on('click','#ssw_calculate', function() {
		var item_width = ( ss_wls.width() / Object.keys(wheels).length ).toFixed(2);
		// alert(item_width);
		var item_height = 0;
		var b_select = $('#ss_wheel_select');
		var show_wheels = [];
		var ss_w = parseFloat($('#ssw_weight').val()) + parseFloat($('.ss_terrain:checked').val());
		// alert(ss_w);
		// alert( parseFloat($('.ss_terrain:checked').val()) );
		var boards_html = '';
		var range_info = '';
		var ss_link = '';
		var highlight_board = '';
		var img_to_use = '';
		var smoother = strings['smoother'];
		var rougher = strings['rougher'];
		$('.surface_info').html('');

		$.each( wheels, function(index,value) {
			if(ss_w>=parseInt(value['min_w'])&&ss_w<=parseInt(value['max_w'])) {
				highlight_board = ' whighlight';
				show_wheels.push(value['size']);
			} else {
				highlight_board = '';
			}
			boards_html += '<div'+wheel_width+' class="ss_wheel' + highlight_board + '" data-size="' + value['size'] + '" data-min="' + value['min_w'] + '" data-max="' + value['max_w'] + '">';
				boards_html += '<div class="ss_baseline">';
					boards_html += '<div class="ssw_img_container"><div class="surface_info"></div></div>';
					boards_html += '<div class="wheel_size">' + value['size'] + '</div>';
					boards_html += '<div class="wheel_dimensions">' + value['height'] + 'mm x ' + value['width'] + 'mm</div>';
					boards_html += '<div class="wheel_hardness">' + strings['hardness'] + ' ' + value['hardness'] + '</div>';
					ss_link = (value['link']) ? '<div class="ss_link_container"><a class="ss_link" href="' + value['link'] + '" target="_blank">' + strings['select'] + '</a></div>' : '';
					boards_html += ss_link;
				boards_html += '</div><div class="or_label">OR</div>';
			boards_html += '</div>';

			/*
			item_height = ( parseFloat(value['model']) * item_width / 18 ).toFixed(2);
			highlight_board = '';
			range_info = '';
			img_to_use = value['outline'];
			if(ss_h>=parseFloat(value['min_h'])&&ss_h<=parseFloat(value['max_h'])) {
				show_boards.push(parseInt(value['range']));
				highlight_board = ' highlight';
				img_to_use = value['thumb'];
			}
			ss_link = (value['link']) ? '<div class="ss_link_container"><a class="ss_link" href="' + value['link'] + '" target="_blank">' + strings['select'] + '</a></div>' : '';
			boards_html += '<div data-wheel="' + value['model'] + '" data-range="' + value['range'] + '" class="ss_board' + highlight_board + '"><div class="ss_baseline"><div class="ss_img_container"><img style="height:' + item_height + 'px" src="' + img_to_use + '" alt=""><div class="ss_range_info"></div></div><div class="ss_board_info"><div class="ss_board_name">'+value['name']+'</div><div class="ss_opt_height">' + cm_to_feet(value['opt_h']) + ' / ' + value['opt_h'] + strings['cm'] + '</div>' + range_info + ss_link + wheels_option + '</div></div></div>';
			*/
		});
		b_select.html(boards_html);

		$('.or_label').hide();

		if(show_wheels.length>1) {
			$.each( show_wheels, function(index,value) {
				if(index==0) {
					$('.whighlight[data-size="' + value + '"] .surface_info').html(smoother);
					$('.whighlight[data-size="' + value + '"] .or_label').show();
				} else {
					$('.whighlight[data-size="' + value + '"] .surface_info').html(rougher);
				}
			});
		}
	});

	ss_app.on('input','#ss_height', function() {
		b_height_info();
	});

	ss_app.on('input','#ss_weight', function() {
		b_weight_info();
	});

	ss_wls.on('input','#ssw_weight', function() {
		bw_weight_info();
	});

	function b_height_info() {
		var ssh = parseInt($('#ss_height').val());
		var maxh = parseInt($('#ss_height').attr('max'));
		var ssh_text = cm_to_feet(ssh) + ' / ' + ssh + 'cm';
		var lefth = (ssh/maxh).toFixed(2) * 100;
		$('.ss_height_info').html(ssh_text).css('left',lefth+'%');
	}

	function b_weight_info() {
		var ssw = parseInt($('#ss_weight').val());
		var maxw = parseInt($('#ss_weight').attr('max'));
		var ssw_text = kg_to_lb(ssw) + 'lbs / ' + ssw + 'kg';
		var leftw = (ssw/maxw).toFixed(2) * 100;
		$('.ss_weight_info').html(ssw_text).css('left',leftw+'%');
	}

	function bw_weight_info() {
		var ssw = parseInt($('#ssw_weight').val());
		var maxw = parseInt($('#ssw_weight').attr('max'));
		var ssw_text = kg_to_lb(ssw) + 'lbs / ' + ssw + 'kg';
		var leftw = (ssw/maxw).toFixed(2) * 100;
		$('.ssw_weight_info').html(ssw_text).css('left',leftw+'%');
	}

	function cm_to_feet(cms) {
		var inches = (parseFloat(cms)*0.393700787).toFixed(0);
    	var feet = Math.floor(inches/12);
    	inches %= 12;
    	return feet + "'" + inches + '"';
	}

	function kg_to_lb(kgs) {
		var pounds = (parseFloat(kgs)*2.20462262185).toFixed(0);
		return pounds;
	}
			
});