var map = undefined;

$(function(){
	$(window).resize(function(){
		adjustViewport();
		adjustImage($('div.slideshow img.active'));
	});

	$('div.services').each(function(){
		var baseTimeout = 0;
		
		$('div', $(this)).each(function(){
			var item = $(this);
			item.css({ left: '-600px' });
			setTimeout(function(){
				item.animate({ left: 0 }, 'slow');
			}, baseTimeout);
			baseTimeout += 200;
		});
	});
		
	$('div.slideshow').each(function(){
		var sh = $(this);
		//at first appear first image
		
		var viewport = getViewportSize();
		
		var setupSlideshow = function(){
			var veryfirst = $('img:first', sh);
			veryfirst.css({ zIndex: 100, visibility: "visible", opacity: 0.1 });
			adjustImage(veryfirst);
			veryfirst.animate({opacity: 1.0}, "slow").addClass('active');	
			
			setInterval(function(){
				var active = $('img.active', sh);
				var next = active.next();
				if(!next.length){
					$('img', sh).css({ zIndex: 99 });
					next = veryfirst;
				}
				
				adjustImage(next);
				
				next.addClass('active').css({ zIndex: (active.css('z-index') * 1) + 1, visibility: "visible", opacity: 0.0 }).animate({opacity: 1.0}, 2000, function(){ active.removeClass('active'); });
				
			}, 6000);
		};
		
		// load images
		var imagesPath = "images/slides/";
		var imagesCount = 9;
		var imagesLoaded = 0;
				
		for(var i = 1 ; i <= imagesCount ; i++){
			var imageName = imagesPath + i;
			if(viewport.width < 1300){
				imageName += "_small";
			}
			imageName += ".jpg";
			
			var imageElement = $("<img src=\""+imageName+"\"/>").appendTo(sh);
			imageElement.load(function(){
				imagesLoaded++;
				$('div.loading .progress', sh).text("("+Math.round(100 * (imagesLoaded / imagesCount))+"%)");
				
				if(imagesLoaded == imagesCount){
					$('div.loading', sh).fadeOut('slow');
					setupSlideshow();
				}
			});			
		}
	});
	
	
	$('a.gmaplink').click(function(e){
		e.preventDefault();
		
		$('div.modalpopup').fadeToggle();
		
		if(map == undefined){
			map = new google.maps.Map(document.getElementById("modalcontent"), {
									zoom: 16,
									mapTypeId: google.maps.MapTypeId.HYBRID,
									center: new google.maps.LatLng(47.801628186985,13.03149566351)
									
								});
								
			new google.maps.Marker({
				map: map,
				position: new google.maps.LatLng(47.801628186985,13.03149566351),
				title: "INMATrade"
			});
		}
	});
	
	$('div.modalpopup a.modalclose').click(function(e){
		e.preventDefault();
		
		$('div.modalpopup').fadeOut();
	});
	
	adjustViewport();
});


function adjustViewport(){
	var viewport = getViewportSize();
	if(viewport.width < 1000){
		$('div.container').css({ width: '1000px' });
	} else {
		$('div.container').css({ width: '100%' });
	}
	if(viewport.height > 625){
		$('div.container').css({ height: (viewport.height - 170)+'px' });
	} else {
		$('div.container').css({ height: '460px' });
	}
	
	
	
}

function adjustImage(image){
	var viewport = $('div.container');
	var sz = {};
		
	if(image.height()){
		sz = { height: image.height(), width: image.width()};
	} else {
		sz = { height: 1188, width: 1900 }; // Warning! Hardcoded values, stay alert :3
	}
	
	var proportion = sz.width / sz.height;
	
	if(viewport.width() >= viewport.height() * proportion ){
		sz.width = viewport.width();
		sz.height = sz.width / proportion;
		image.css({ width: viewport.width()+'px', height: 'auto' });
	} else {
		sz.height = viewport.height();
		sz.width  = sz.height * proportion;
		image.css({ height: viewport.height()+'px', width: 'auto' });
	}
		
	
	image.css('top',  ((viewport.height() / 2) - (sz.height / 2)) + 'px');
	image.css('left', ((viewport.width()  / 2) - (sz.width  / 2)) + 'px'); 

}

function getViewportSize(){
	if (typeof window.innerWidth != 'undefined') {
		return { width: window.innerWidth, height: window.innerHeight };
	} else if (typeof document.documentElement != 'undefined' && typeof document.documentElement.clientWidth != 'undefined' && document.documentElement.clientWidth != 0) {
		return { width: document.documentElement.clientWidth, height: document.documentElement.clientHeight };
	} else {
		return { width: document.getElementsByTagName('body')[0].clientWidth, height: document.getElementsByTagName('body')[0].clientHeight };
	}
 
	return null;
}