var points = [['MENDEREK', 'Eğitim ve ileri seviye alanları arasındaki doğal sınır. İyi bir seyir seri, üstünden ilk Ali Barrett atladı', 194, 475, 'R', ''], ['İLERİ SEVİYE SÜRÜCÜ ALANI', 'Öğrencilerin arasında sıkışmaktansa Akçapınar deltasının ağzındaki düz suda gönlünüzde kayın.', 80, 570, 'R', ''], ['YÜZÜCÜ ALANI', 'Arkadaşlarınız, aileniz ya da günübirlik gezmeye gelenler için kitedan arındırılmış bölge.', 392, 427, 'R', ''], ['EĞİTİM ALANI', 'Öğrenciler için ayrılmış, sığ, kumluk, geniş eğitim alanını. Kesintisiz rüzgarıyla dünyanın en iyi eğitim noktalarından biri.', 700, 314, 'R', ''], ['İNDİRME KALDIRMA ALANI', '300 metre uzunluğunda 40 metre genişliğinde kumluk alan.', 770, 370, 'R', 'vp-indirme-kaldirma-alani.jpg'], ['WC', 'Çok değerli bir hizmet', 711, 453, 'L', ''], ['DEPO', 'Islak, kuru tüm malzemelerinizi yanınızda taşımayın. Kite sahili çalışanları malzemenizi temizleyip, havalandıracak ve gece boyu güvenliğini sağlayacak.', 782, 396, 'L', ''], ['CAFE', 'Kaymaktan yorulduğunuz an üç tarafı suyla çevrili Rüzgar Cafe’de barbekü ve ev yemekleriyle enerjinizi toplayabilir, hamak ya da minderlerde dinlenebilirsiniz..', 616, 525, 'L', ''], ['LIQUID FORCE ÇADIRI', '5 dk gölgede mola vermek isteyenlerin mekanı. Akşamları ise altında uçurtmanızı indirmeden, barını toplamadan bırakabilirsiniz. Sabah geldiğinizde pompa yok, ip açma derdi yok...', 705, 380, 'L', 'vp-liquid-force-cadiri.jpg'], ['OTOPARK', 'Güvenlik sebeplerinden dolayı kite sahiline araç giremiyor. Aracınızı park edip hemen önündeki geniş alandan uçurtmanızı kaldırabilirsiniz.', 960, 339, 'L', 'vp-otopark.jpg'], ['AKYAKA', 'Doğası, mimarisi ve insanlarıyla eşsiz bir Türk kasabası. Sahilden 1.5 km’lik yürüyüş 15 dk sürüyor. Gün boyu kite sahili ve Akyaka arasında botla servisimiz var.', 957, 190, 'B', 'vp-akyaka.jpg']];


$(document).ready(function(){
	//  Initialize Backgound Stretcher	   
	$(document).bgStretcher({
		images: ['/images/content/backgrounds/vaziyet-plani.jpg'],
		imageWidth: 1100, imageHeight: 800, nextSlideDelay:10000, slideShowSpeed:500
	});
		
	$('#pusher').css('height', $(window).height() - 212);
	
	var winW = $(window).width();
	var winH = $(window).height();
	var imgW = 1100, imgH = 800;

	if (winW < 1129){
		winW = 1129;
	}
	
	var offsetX = 0;
	var offsetY = 0;
	
	var conversion = winW / imgW;
	
	if ((winW / imgW) < (winH / imgH)){
		conversion = winH / imgH;
		offsetX = (winW - imgW * conversion) / 2;
	}
	else{
		offsetY = (winH - imgH * conversion) / 2;
	}
	
	for(i = 0; i < points.length; i++){
		var point;
		var left = points[i][2] * conversion + offsetX;
		var top = points[i][3] * conversion + offsetY;
		
		if (points[i][4] == 'R'){
			var point = "<div id='" + i + "' class='pointRight' style='left:" + left + "px; top:" + top + "px; display:none;'><div class='line'><img src='/images/layout/vp-line-right.png'></div><div class='head'><div class='left'></div><div class='link'><a href='#'>" + points[i][0] +  "</a></div><div class='right'></div></div><div class='over'><div class='header'></div><div class='inner'><div class='title'>" + points[i][0] + "</div>";
			if (points[i][5] != ''){
				point += "<div class='image'><img src='/images/content/" + points[i][5] + "'></div>";
			}
			point += "<div class='text'>" + points[i][1] + "</div></div><div class='footer'></div></div></div>";
		}
		if (points[i][4] == 'L'){
			var point = "<div id='" + i + "' class='pointLeft' style='left:" + left + "px; top:" + top + "px; display:none;'><div class='line'><img src='/images/layout/vp-line-left.png'></div><div class='head' text='" + points[i][0] + "'><div class='left'></div><div class='link'><a href='#'>" + points[i][0] +  "</a></div><div class='right'></div></div><div class='over'><div class='header'></div><div class='inner'><div class='title'>" + points[i][0] + "</div>";
			if (points[i][5] != ''){
				point += "<div class='image'><img src='/images/content/" + points[i][5] + "'></div>";
			}
			point += "<div class='text'>" + points[i][1] + "</div></div><div class='footer'></div></div></div>";
		}
		if (points[i][4] == 'B'){
			var point = "<div id='" + i + "' class='pointBottom' style='left:" + left + "px; top:" + top + "px; display:none;'><div class='line'><img src='/images/layout/vp-line-bottom.png'></div><div class='head' text='" + points[i][0] + "'><div class='left'></div><div class='link'><a href='#'>" + points[i][0] +  "</a></div><div class='right'></div></div><div class='over'><div class='header'></div><div class='inner'><div class='title'>" + points[i][0] + "</div>";
			if (points[i][5] != ''){
				point += "<div class='image'><img src='/images/content/" + points[i][5] + "'></div>";
			}
			point += "<div class='text'>" + points[i][1] + "</div></div><div class='footer'></div></div></div>";
		}
	
			
		$('#vp').append(point);
	}
	
	$(window).resize(function() {
		windowResized();
	});
	
	function windowResized(){
		$('#pusher').css('height', $(window).height() - 212);
		
		
		var winW = $(window).width();
		var winH = $(window).height();
		var imgW = 1100, imgH = 800;

		var offsetX = 0;
		var offsetY = 0;

		if (winW < 1129){
			winW = 1129;
		}
		
		var conversion = winW / imgW;

		if ((winW / imgW) < (winH / imgH)){
			conversion = winH / imgH;
			offsetX = (winW - imgW * conversion) / 2;
		}
		else{
			offsetY = (winH - imgH * conversion) / 2;
		}
		
		$('#vp .pointRight').each(
			function(){
				$(this).show();
				var left = points[$(this).attr('id')][2] * conversion + offsetX;
				var top = points[$(this).attr('id')][3] * conversion + offsetY;
				
				$(this).css('left', left + "px");
				$(this).css('top', top + "px");
			}
		);
		
		$('#vp .pointLeft').each(
			function(){
				$(this).show();
				var left = points[$(this).attr('id')][2] * conversion + offsetX;
				var top = points[$(this).attr('id')][3] * conversion + offsetY;
				
				$(this).css('left', left + "px");
				$(this).css('top', top + "px");
			}
		);
		
		$('#vp .pointBottom').each(
			function(){
				$(this).show();
				var left = points[$(this).attr('id')][2] * conversion + offsetX;
				var top = points[$(this).attr('id')][3] * conversion + offsetY;
				
				$(this).css('left', left + "px");
				$(this).css('top', top + "px");
			}
		);
		
		$('#vp .head').each(
			function(){
				var width = $(this).children(':first').width() + $(this).children(':first').next().width() + $(this).children(':first').next().next().width() + 4;
				$(this).css('width', width + 'px');
				if (($(this).parent().hasClass('pointLeft')) || ($(this).parent().hasClass('pointBottom'))){
					var left = - width - 29 + 4;
					
					$(this).css('left', left + 'px');
				}

			}
		);
	}
	
	
	function appear(){
		$('#pusher').css('height', $(window).height() - 212);
		
		
		var winW = $(window).width();
		var winH = $(window).height();
		var imgW = 1100, imgH = 800;

		if (winW < 1129){
			winW = 1129;
		}
		
		var offsetX = 0;
		var offsetY = 0;

		var conversion = winW / imgW;

		if ((winW / imgW) < (winH / imgH)){
			conversion = winH / imgH;
			offsetX = (winW - imgW * conversion) / 2;
		}
		else{
			offsetY = (winH - imgH * conversion) / 2;
		}
		
		$('#vp .pointRight').each(
			function(){
				$(this).show();
				var left = points[$(this).attr('id')][2] * conversion + offsetX;
				var top = points[$(this).attr('id')][3] * conversion + offsetY;
				
				$(this).css('left', left + "px");
				$(this).css('top', top + "px");
			}
		);
		
		$('#vp .pointLeft').each(
			function(){
				$(this).show();
				var left = points[$(this).attr('id')][2] * conversion + offsetX;
				var top = points[$(this).attr('id')][3] * conversion + offsetY;
				
				$(this).css('left', left + "px");
				$(this).css('top', top + "px");
			}
		);
		
		$('#vp .pointBottom').each(
			function(){
				$(this).show();
				var left = points[$(this).attr('id')][2] * conversion + offsetX;
				var top = points[$(this).attr('id')][3] * conversion + offsetY;
				
				$(this).css('left', left + "px");
				$(this).css('top', top + "px");
			}
		);
		
		$('#vp .head').each(
			function(){
				var width = $(this).children(':first').width() + $(this).children(':first').next().width() + $(this).children(':first').next().next().width() + 4;
				//iphone fix
				var agent = navigator.userAgent.toLowerCase();
				var is_iphone = (agent.indexOf('iphone')!=-1);
				if (is_iphone){
					$(this).css('width', width + 4 + 'px');
				}
				else{
					$(this).css('width', width + 'px');
				}
				
				if (($(this).parent().hasClass('pointLeft')) || ($(this).parent().hasClass('pointBottom'))){
					var left = - width - 29 + 4;
					if ($(this).attr('text').length > 10){
						left -= 4;
					}
					$(this).css('left', left + 'px');
				}

			}
		);
		
		$('#vp .pointRight .over').css('visibility', 'hidden');
		$('#vp .pointRight .over').each(
			function(){
				$(this).css('width', $(this).parent().children(':first').next().css('width'));
				$(this).css('height', '25px');
			}
		);
		
		
		$('#vp .pointRight .over').hover(
			function () {
				
			},
			function () {
				$(this).css('width', $(this).parent().children(':first').next().css('width'));
				$(this).css('height', '25px');
				$(this).css('top', '-79px');
				$(this).parent().css('z-index', 1);
				$(this).css('visibility', 'hidden');
				
			}
		);
		
		
		$('#vp .pointRight .link a').hover(
			function () {
				//close all - iphone fix
				closeAll();
				
				
				$(this).parent().parent().next().css('visibility', 'visible');
				$(this).parent().parent().next().stop();
				
				$(this).parent().parent().parent().css('z-index', 99);
				$(this).parent().parent().next().animate({
					width: '225px',
					height: $(this).parent().parent().next().children(":first").height() + $(this).parent().parent().next().children(":first").next().height() + $(this).parent().parent().next().children(":first").next().next().height(),
					top: -81 + 27 - ($(this).parent().parent().next().children(":first").height() + $(this).parent().parent().next().children(":first").next().height() + $(this).parent().parent().next().children(":first").next().next().height())
					}, 200);
			},
			function () {
				
			}
		);
		
		
		$('#vp .pointLeft .over').css('visibility', 'hidden');
		$('#vp .pointLeft .over').each(
			function(){
				$(this).css('left', - 30 - $(this).parent().children(':first').next().width());
				$(this).css('width', $(this).parent().children(':first').next().css('width'));
				$(this).css('height', '25px');
			}
		);
		
		
		$('#vp .pointLeft .over').hover(
			function () {
				
			},
			function () {
				$(this).css('width', $(this).parent().children(':first').next().css('width'));
				$(this).css('height', '25px');
				$(this).css('top', '-79px');
				$(this).css('left', - 30 - $(this).parent().children(':first').next().width());
				$(this).parent().css('z-index', 1);
				$(this).css('visibility', 'hidden');
				
			}
		);
		
		
		$('#vp .pointLeft .link a').hover(
			function () {
				//close all - iphone fix
				closeAll();
				$(this).parent().parent().next().css('visibility', 'visible');
				$(this).parent().parent().next().stop();
				
				$(this).parent().parent().parent().css('z-index', 99);
				$(this).parent().parent().next().animate({
					width: '225px',
					height: $(this).parent().parent().next().children(":first").height() + $(this).parent().parent().next().children(":first").next().height() + $(this).parent().parent().next().children(":first").next().next().height(),
					left: - 25 - 225 - 4,
					top: - 81 + 27 - ($(this).parent().parent().next().children(":first").height() + $(this).parent().parent().next().children(":first").next().height() + $(this).parent().parent().next().children(":first").next().next().height())
					}, 200);
			},
			function () {
				
			}
		);
		
		$('#vp .pointBottom .over').css('visibility', 'hidden');
		$('#vp .pointBottom .over').each(
			function(){
				$(this).css('left', - 30 - $(this).parent().children(':first').next().width());
				$(this).css('width', $(this).parent().children(':first').next().css('width'));
				$(this).css('height', '25px');
			}
		);
		
		
		$('#vp .pointBottom .over').hover(
			function () {
				
			},
			function () {
				$(this).css('width', $(this).parent().children(':first').next().css('width'));
				$(this).css('height', '25px');
				$(this).css('top', '51px');
				$(this).css('left', - 30 - $(this).parent().children(':first').next().width());
				$(this).parent().css('z-index', 1);
				$(this).css('visibility', 'hidden');
				
			}
		);
		
		
		$('#vp .pointBottom .link a').hover(
			function () {
				//close all - iphone fix
				closeAll();
				$(this).parent().parent().next().css('visibility', 'visible');
				$(this).parent().parent().next().stop();
				
				$(this).parent().parent().parent().css('z-index', 99);
				$(this).parent().parent().next().animate({
					width: '225px',
					height: $(this).parent().parent().next().children(":first").height() + $(this).parent().parent().next().children(":first").next().height() + $(this).parent().parent().next().children(":first").next().next().height(),
					left: - 25 - 225 - 4
				}, 200);
			},
			function () {
				
			}
		);
		
	}
	
	function closeAll(){
		$('#vp .pointRight .over').each(
			function(){
				$(this).css('width', $(this).parent().children(':first').next().css('width'));
				$(this).css('height', '25px');
				$(this).css('top', '-79px');
				$(this).parent().css('z-index', 1);
				$(this).css('visibility', 'hidden');
			}
		);
		$('#vp .pointLeft .over').each(
			function(){
				$(this).css('width', $(this).parent().children(':first').next().css('width'));
				$(this).css('height', '25px');
				$(this).css('top', '-79px');
				$(this).css('left', - 30 - $(this).parent().children(':first').next().width());
				$(this).parent().css('z-index', 1);
				$(this).css('visibility', 'hidden');
			}
		);
		$('#vp .pointBottom .over').each(
			function(){
				$(this).css('width', $(this).parent().children(':first').next().css('width'));
				$(this).css('height', '25px');
				$(this).css('top', '51px');
				$(this).css('left', - 30 - $(this).parent().children(':first').next().width());
				$(this).parent().css('z-index', 1);
				$(this).css('visibility', 'hidden');
			}
		);
	}
	
	
	setTimeout(appear,250);
	//windowResized();
	
	

});