$( document ).ready(function() {
    
	$("[liez-calculator]").embedCalculator();
	
});

$.fn.embedCalculator = function(element, options){
	
	return this.each(function(){
				
		var calculator	= $(this);
		var id			= calculator.attr("data-liezcalculator");
		//var button		= calculator.find("button[data-calculate]");
		var $modal 		= $('<div class="liez-modal">');
		var $dialog		= $('<div class="liez-dialog">\
								<div class="liez-dialog-head">\
									<h3 style="color:'+ calculator.attr("data-color") +'">Lease aanvragen</h3>\
								</div>\
									<div class="liez-dialog-body"></div>\
								</div>');
		
		calculator.defaults = {
			css: 		"http://api.liez.test:8888/css/calculator.css",
			base_url: 	"http://api.liez.test:8888/v1/",
			id: 		apikey,
			parameters: {}
		}
		
			
		calculator.init = function()
		{	
			// extend options
			calculator.settings = $.extend({}, calculator.defaults, options);
			
			// load css
			calculator.loadCss()
			
			// convert data-attributes to post parameters
			calculator.setParameters();
			
			// set brand and model
			calculator.setBrandAndModel()
					
			// get data
			calculator.getData();
			
			// button click			
			calculator.on("click",function(){
				
				// create layer
				calculator.createLayer();
				
				calculator.createFrame();

				// fadeIn
				$modal.fadeIn("fast");
				

			});
			
				
		}	
		
		calculator.setBrandAndModel = function()
		{
			$dialog.find(".liez-dialog-head h3").append( $("<span>").text(calculator.settings.parameters.leasebrand+" "+calculator.settings.parameters.leasemodel) );	
		}
		
		calculator.setParameters = function()
		{
			// get attributes
			var data = calculator.data();

			for(var i in data){

				var value 	= data[i];
				var int 	= parseInt(value);
				if(int) value = int;
				calculator.settings.parameters[i] = value;
			}
			
		//	console.log(calculator.settings.parameters);
			
		}
		
		calculator.createFrame = function()
		{
			
			$modal.find(".liez-dialog-body").prepend('<iframe class="liez-embed-frame" id="liez-frame" src="'+ calculator.getFrameUrl() +'"></iframe>');
			
		}
		
		calculator.getData = function(){
					
		    $.ajax({
		        type: "POST",
		        url: calculator.getUrl(),
				data: calculator.getParameters(),
				dataType: "json",
		        success: function(data){
					
					calculator.setData(data);
																	
					calculator.insertAmount();
					
		        }
		    });	
			
		}
		
		calculator.getParameters = function(){
			
			return calculator.settings.parameters;
		}
		
		calculator.insertAmount = function()
		{
			//console.log(calculator.object[0]);
			
			$div = $('<div class="liez-list-item">Financial lease vanaf <span class="liez-amount">€ '+ calculator.object[0].amount.toFixed(2) +' <span class="liez-amout-label">p/m</span></span></div>');
			$div.insertBefore(calculator);
		}
		
		
		calculator.setData = function(data)
		{
			calculator.object = data
		}
		
		
		calculator.getUrl = function()
		{
			return calculator.settings.base_url + 'calculate/' + calculator.settings.id;
		}
		
		calculator.getFrameUrl = function()
		{
			return calculator.settings.base_url + 'start/' + calculator.settings.id + "?"+ $.param( calculator.settings.parameters, true );
		}
		
		
		calculator.createLayer = function()
		{
			$modal.hide().append($dialog);
			$("body").append( $modal );
			
			$modal.click(calculator.deleteLayer);
		}	
		
		
		calculator.deleteLayer = function()
		{
			$modal.remove();
		}	
		
		
		calculator.loadCss = function()
		{
			var head = document.getElementsByTagName('head')[0];
			var style = document.createElement('link');
			style.href = calculator.settings.css;
			style.type = 'text/css';
			style.rel = 'stylesheet';
			head.append(style);
		}

	
		
		// init the plugin
	    calculator.init();
		
		
		
	});
	
}