$(function(){
	
	$.fn.styleGallery  = function() {
	
		var $this		=	$(this);
		var $pages		=	($this.find('.page').length)-2;
		var $pageNum	=	0;
		var $target		=	$this.find('#overview-inner');
		var $speed		=	500;
		var $currentId	= 	false;
		
		var $pagewidth	=	$this.find('.page').width();
		
		$this.find('.page .item img').each(function(){
			//$(this).css({opacity: 0});
			$(this).bind("load", function () { 
				$(this).animate({
					opacity:1
				});
				
				/*$(this).parent().find('.loader').animate({
					opacity:0
				}, 100);*/
			});
		});
		
		$this.find("#prev").live('click', function(){
			if( $('#fulloverlay').is(':visible'))
			{
				$continue = false;
				
				if($("#item_" + $currentId).prev().length > 0) {
					$continue = true;
					$currentId = $("#item_" + $currentId).prev().attr("id").replace("item_","");
				}
				else if($("#item_" + $currentId).parent().prev().find(".item:last").length > 0)
				{
					$continue = true;
					$currentId = $("#item_" + $currentId).parent().prev().find(".item:last").attr("id").replace("item_","");
				}
				
				if($continue)
				{
					getGalleryContent($currentId);
				}
			} 
			else 
			{
				if ($pageNum != 0) {
					$pageNum--;
					$($target).animate({
						marginLeft: -($pagewidth*$pageNum)
					}, { duration: $speed, queue: false });
				}
			}
			e.preventDefault();
		});
		
		$this.find("#next").live('click', function(e){
			
			if( $('#fulloverlay').is(':visible'))
			{
				$continue = false;
				
				if($("#item_" + $currentId).next(".item").length > 0) 
				{
					$continue = true;
					$currentId = $("#item_" + $currentId).next(".item").attr("id").replace("item_","");
				}
				else if($("#item_" + $currentId).parent().next().find(".item:first").length > 0)	
				{
					$continue = true;
					$currentId = $("#item_" + $currentId).parent().next().find(".item:first").attr("id").replace("item_","");
				}
				
				if($continue)
				{
					getGalleryContent($currentId);
				}
				
			} 
			else 
			{
				if ($pageNum <= $pages) {
					$pageNum++;
					$($target).animate({
						marginLeft: -($pagewidth*$pageNum)
					}, { duration: $speed, queue: false });
					console.log(-($pagewidth*$pageNum));
				}
			}
			
			e.preventDefault();
		});
		
		function getGalleryContent($itemId)
		{
			jQuery.ajax({
				type: "POST",
				url: "/includes/get_stylegallery.php",
				dataType: "json",
				data: {itemId: $itemId},
				success: function(JSON){

					$jsonData = JSON;
					
					$("#fulloverlay .gallery-image").html($jsonData['image']);
					$("#fulloverlay .gallery-title").html($jsonData['title']);
					$("#fulloverlay .gallery-shoe").html($jsonData['shoetitle']);
					$("#fulloverlay .gallery-name").html($jsonData['name']);
					$("#fulloverlay .gallery-btn a").attr('href', $jsonData['link']);
					Cufon.refresh();
					
					$("#fulloverlay").show();
					$("#fulloverlay").animate({
						opacity:1
					});
				}
			});

			//					$("#fulloverlay").append($currentId);
		}
		
		$this.find(".overlay-close").live('click', function(e) 
		{
			$("#fulloverlay").animate(
			{
				opacity:0
			},
			function()
			{
				$("#fulloverlay").hide();
			});
			
			e.preventDefault();
		});
/*
	$("#country").change(function() {
		var $country = $(this).val();
		
		$("#cities").attr("disabled",1);
		$('#dealers-loader').show();
		
		$.ajax({
			url: "/cmsfiles/operators/dealers_json.php",
			dataType: 'json',
			type: 'post',
			data: {country: $country},
			success: function(JSON) 
			{
				var $html_select = "";
				$jsonData = JSON;
				
				$.each(JSON, function(key, value){
					$html_select += '<option value="' + key + '">' + key + '</option>';
				});
				
				$("#cities").html($html_select);
				
				$city = $("#cities").val();
				
				create_layout($jsonData[$city]);
				
				$("#cities").removeAttr("disabled");
			}
		});
	});
*/
		$this.find(".item").live('click', function(){
			// Haal de huidige ID op van de database (key)
			$currentId 	= $(this).attr('id').replace("item_","");
			
				$("#fulloverlay").show();
				$("#fulloverlay .gallery-content-inner").animate({
					opacity:1
				}, 1000, getGalleryContent($currentId));
			
			
			// $content 	= $(this).parent(".page").html();
			// Div openen en over de hele content leggen
			// console.log($(this).parent(".page").html("<div class='1111'>aaaa</div>"));
			
					
		});

		$this.find('.item').hover(
			function(){
				$(this).removeClass('nonactive');
				$($(this).parent().find('.nonactive .overlay')).animate({
					opacity: 0.5
				}, { duration: $speed, queue: false });
			}, function(){
				$(this).addClass('nonactive');
				$($(this).parent().find('.item .overlay')).animate({
					opacity: 0
				}, { duration: $speed, queue: false });
			});
		}

	$('#stylegallery').styleGallery();
});