window.onload = function(){
	init_qtip();
	init_send_link();
}


function init_send_link() {
	var send_link_btn = dom.query('#send_link_btn');
	var send_link_div = dom.query('#send_link');
	var send_link_div_wrapper = dom.query('#send_link_wrapper');
	var send_link_submit = dom.query('#send_link_submit');
	var send_link_cancel = dom.query('#send_link_cancel');
	var success_flag = dom.query('#flag');
	
	var y_name = '';
	var y_mail = '';
	var f_name = '';
	var f_mail = '';
	var msg = '';
	
	
	
	/*
	var test_btn = dom.query('#test_btn');
	var off = send_link_div.offset();
	var pos = send_link_div.position();
	
	test_btn.click(function(){
		alert('Offset-Top: ' + off.top);
		alert('Offset-Left: ' + off.left);
		alert('Position-Top: ' + pos.top);
		alert('Position-Left: ' + pos.left);
		//send_link_div.offset.left('100');
	});
	*/
	
	

	send_link_btn.click(function(){ 
		var posY = dom.query(document).scrollTop() +( dom.query(window).height() / 2 - ( send_link_div.height() / 2 ) );
		var posX = dom.query(document).scrollLeft() +( dom.query(window).width() / 2 - ( send_link_div.width() / 2 ) );
		getInputs();
		send_link_div.css('top', posY);
		send_link_div.css('left', posX);
		send_link_div.fadeIn();
		send_link_div_wrapper.fadeIn();
		send_link_div_wrapper.height(dom.query(document).height());
		send_link_div_wrapper.width(dom.query(document).width());
	});
	
	send_link_cancel.click(function(){
		init_send_link();
		clearFieldsandFadeOut();
	});
	
	send_link_div_wrapper.click(function(){
		init_send_link();
		send_link_div.fadeOut();
		send_link_div_wrapper.fadeOut();
	});
	
	send_link_submit.click(function(){
		getInputs();
		dom.query.ajax({
  			url: 'includes/send_friend_check.php?your_name='+y_name+'&your_mail='+y_mail+'&friends_name='+f_name+'&friends_mail='+f_mail+'&message='+msg,
   		success: function(data){
     			send_link_div.html(data);
     			init_send_link();
   		}
		});
	});


	if (success_flag.val() == 'true') {
		setTimeout(function() {
			clearFieldsandFadeOut();
		}, 3000);
	}


	function clearFieldsandFadeOut() {
		send_link_div.fadeOut();
		send_link_div_wrapper.fadeOut();
		dom.query.ajax({
  			url: 'includes/send_friend_check.php?start=yes&your_name=&your_mail=&friends_name=&friends_mail=&message=',
   		success: function(data){
     			send_link_div.html(data);
     			init_send_link();
   		}
		});
	}

	function getInputs() {
		y_name = dom.query('#send_your_name').val();
		y_mail = dom.query('#send_your_mail').val();
		f_name = dom.query('#send_friends_name').val();
		f_mail = dom.query('#send_friends_mail').val();
		msg = dom.query('#send_message').val();
	}	
}







function init_qtip() {
	
	var car1 = dom.query('#cars_container #car_1');
	var car2 = dom.query('#cars_container #car_2');
	var car3 = dom.query('#cars_container #car_3');
	var car4 = dom.query('#cars_container #car_4');
	var car5 = dom.query('#cars_container #car_5');
	var car6 = dom.query('#cars_container #car_6');
	var car7 = dom.query('#cars_container #car_7');
	var car8 = dom.query('#cars_container #car_8');
	
	var fnVar = dom.query.fn;
	
	
	fnVar.qtip.styles.mystyle = {
	   	width: 350,
		padding: 10,
		background: 'white',
		color: 'black',
		textAlign: 'left',
		border: {
	 		width: 7,
			radius: 5,
			//color: 'white'
	 		//color: '#524C48'
	 		color: '#EF6707'
		},
		tip: {
     		size: {
        		x: 20,
        		y: 20
     		}
   		}
	}
	
	car1.qtip({
	   	content: {
      		url: 'includes/car_descriptions.php',
      		data: { id: 8 },
      		method: 'get'
   		},
	   	show: 'mouseover',
	   	hide: 'mouseout',
	 	position: {
      		corner: {
         		target: 'rightMiddle',
         		tooltip: 'leftTop'
      		}
   		},
   		style: {
   			tip: {
   				corner: 'leftTop'
   			},
   			name: 'mystyle'
   		}
	});
	
	
	
	car2.qtip({
	   	content: {
      		url: 'includes/car_descriptions.php',
      		data: { id: 2 },
      		method: 'get'
   		},
	   	show: 'mouseover',
	   	hide: 'mouseout',
	   	position: {
      		corner: {
         		target: 'bottomMiddle',
         		tooltip: 'topMiddle'
      		}
   		},
   		style: {
   			tip: {
   				corner: 'topMiddle'
   			},
   			name: 'mystyle'
   		}
	});
	
	
	
	car3.qtip({
	   	content: {
      		url: 'includes/car_descriptions.php',
      		data: { id: 3 },
      		method: 'get'
   		},
	   	show: 'mouseover',
	   	hide: 'mouseout',
	 	position: {
      		corner: {
         		target: 'leftMiddle',
         		tooltip: 'rightTop'
      		}
   		},
   		style: {
   			tip: {
   				corner: 'rightTop'
   			},
   			name: 'mystyle'
   		}
	});
	
	
	
	car4.qtip({
	   	content: {
      		url: 'includes/car_descriptions.php',
      		data: { id: 4 },
      		method: 'get'
   		},
	   	show: 'mouseover',
	   	hide: 'mouseout',
	 	position: {
      		corner: {
         		target: 'rightMiddle',
         		tooltip: 'leftMiddle'
      		}
   		},
   		style: {
   			tip: {
   				corner: 'leftMiddle'
   			},
   			name: 'mystyle'
   		}
	});
	
	
	
	
	car5.qtip({
	   	content: {
      		url: 'includes/car_descriptions.php',
      		data: { id: 5 },
      		method: 'get'
   		},
	   	show: 'mouseover',
	   	hide: 'mouseout',
	 	position: {
      		corner: {
         		target: 'leftMiddle',
         		tooltip: 'rightMiddle'
      		}
   		},
   		style: {
   			tip: {
   				corner: 'rightMiddle'
   			},
   			name: 'mystyle'
   		}
	});
	
	
	
	
	car6.qtip({
	   	content: {
      		url: 'includes/car_descriptions.php',
      		data: { id: 6 },
      		method: 'get'
   		},
	   	show: 'mouseover',
	   	hide: 'mouseout',
	 	position: {
      		corner: {
         		target: 'rightMiddle',
         		tooltip: 'leftBottom'
      		}
   		},
   		style: {
   			tip: {
   				corner: 'leftBottom'
   			},
   			name: 'mystyle'
   		}
	});
	
	
	
	car7.qtip({
	   	content: {
      		url: 'includes/car_descriptions.php',
      		data: { id: 7 },
      		method: 'get'
   		},
	   	show: 'mouseover',
	   	hide: 'mouseout',
	 	position: {
      		corner: {
         		target: 'topMiddle',
         		tooltip: 'bottomMiddle'
      		}
   		},
   		style: {
   			tip: {
   				corner: 'bottomMiddle'
   			},
   			name: 'mystyle'
   		}
	});
	
	
	
	
	car8.qtip({
	   	content: {
      		url: 'includes/car_descriptions.php',
      		data: { id: 1 },
      		method: 'get'
   		},
	   	show: 'mouseover',
	   	hide: 'mouseout',
	 	position: {
      		corner: {
         		target: 'leftMiddle',
         		tooltip: 'rightBottom'
      		}
   		},
   		style: {
   			tip: {
   				corner: 'rightBottom'
   			},
   			name: 'mystyle'
   		}
	});
	
}