var mainurl = ''; // Main image url
var p_id    = ''; // Current project ID

// Set the modal click link  ------------------------------------------------------------------------------------------------------------------------- 
function setModal()
{
	$('.view_details').click(function(e) {   

		e.preventDefault();   
		
		// Add loading class to the image box
		$('#dialog').addClass('loading');
		
		// Get the screen height and width   
		var maskHeight = $(document).height();   
		var maskWidth = $(window).width();   
	
		$('#boxes').append('<div id="mask"></div>');
	
		// Set heigth and width to mask to fill up the whole screen   
		$('#mask').css({'width':maskWidth,'height':maskHeight});   
		
		// Transition effect        
		$('#mask').fadeIn(10);       
		$('#mask').fadeTo("fast",0.8);     
	
		// Get the window height and width   
		var winH = $(window).height();   
		var winW = $(window).width();   
				
		// Set the popup window to center           
		$('#dialog').css('top',  '20');  //$('#dialog').css('top',  winH/2-$(id).height()/2);   
		$('#dialog').css('left', winW/2-$('#dialog').width()/2);   
	
		// Transition effect   
		$('#dialog').fadeIn(10);    
		
		//Preload the image
		var img = new Image();

		$(img).load(function () {
			
			// Hide the image
			$(this).hide();

			// Remove the Loading class
			$('#dialog').removeClass('loading');

			// Resize and float the image and description containers according to the image size
			if (img.width < 400)
			{
				$('#imagetop').css({"width": 380, "height": img.height});
				$('#descriptiontop').css({"width": 260, "margin": "0 0 0 10px"});
				$('#boxes_close').css({"left":270});
			}
			else
			{
				$('#imagetop').css({"width": 700, "height": img.height});
				$('#descriptiontop').css({"width": 660, "margin": "10px 0 0 0"});
				$('#boxes_close').css({"left":670});
			}			

			// Append the image to the div
			$('#imagetop').empty().append(this);
			
			// Fade the image in
			$(this).fadeIn();
			$('#descriptiontop').show();

		})
		.error(function () {
			alert('There is a problem with the image.');
		})
		.attr('src', mainurl);  
	});   
}


// Get the data through Json ------------------------------------------------------------------------------------------------------------------
function getData(id)
{
	
	$('#main_image').css('cursor', 'auto');
	$.getJSON('plugins/portfolio/frontend/ajax/manage_project_info.php', {p_id: id}, function(j) {

		// Load the new thumbnail 510 image from the url retrieved from the json data				
		var img 	= new Image();			
		$(img).load(function () {				
			$(this).attr('border', '0');
			$(this).attr('title', 'click to expand');
			$(this).attr('alt', 'click to expand');
			$(this).hide();
			$('#main_image').empty().append(this).css('cursor', 'pointer');
			$(this).fadeIn();
		})
		.error(function () {
			alert('There is a problem with the image..');
		})
		.attr('src', j[0].url510); 

		
		// Put the description in the description div
		//$('#descriptiontop').html('<img src="plugins/portfolio/frontend/assets/images/close_btn.jpg" alt="" border="0" id="boxes_close" /><div style="font-size: 14px; font-weight: bold; padding: 0 0 8px 0;">' + j[0].name + '</div>' + j[0].description);
		$('#descriptiontop').html('<img src="plugins/portfolio/frontend/assets/images/close_btn.jpg" alt="" border="0" id="boxes_close" />' + j[0].description);

		// Modal Close button --------------------------------------------------------------------------------------------------------------------------------
		$('#boxes_close').click(function (e) {   
			$('#descriptiontop').hide();
			$('#mask').remove();
			$('.window').hide();
			$('#imagetop').empty();
			return false;
		});        
		
		
		mainurl = j[0].url;	

		// Set the modal link ------------------------------------------------------------------------------------------------------------------------
		setModal();
	});
}



// On Dom Ready ----------------------- ------------------------------------------------------------------------------------------------------------------
$(document).ready(function() {

	$('#main_image').addClass('loading');

	// initialize scrollable ------------------------------------------------------------------------------------------------------------------------------
	$(function() {
    
		$("div.scrollable").scrollable({ size: 6 });     

		var api = $("div.scrollable:first").scrollable();		
		
		$('.next').click(function () {
			api.next();
			return false;
		});

		$('.prev').click(function () {
			api.prev();
			return false;
		});
		
		
		// Click on image inside scrollable ---------------------------------------------------------------------------------------------------------------
    	$("div.scrollable div.items div").click(function() {

			// Fade the actual Image out ------------------------------------------------------------------------------------------------------------------
			$('#main_image').children('img').fadeOut();

			// Make some vars -----------------------------------------------------------------------------------------------------------------------------
			var image 	= $(this).children('img');
			p_id 	    = $(image).attr('id').substr(3);

			// Get the data and set the modal link --------------------------------------------------------------------------------------------------------
			getData(p_id);
				
		}); 
		// End of Click on image inside scrollable -------------------------------------------------------------------------------------------------------

		// First project id -----------------------------------------------------------------------------------------------------------------------------------
		p_id = $("div.scrollable div.items div:first").children('img').attr('id').substr(3);
		getData(p_id);
		
	}); 
});