//================================================================================
//
//    JQUERY FUNCTIONS
//
//================================================================================

//GLOBAL IMAGE DATA
window.galleryData = {
         plazma_urlData :  [],
		 plazma_commentData :  [],
         plazma_imageCount : 0,
         plazma_currentImage: 0
};

var drag = false;
var drag_origin = 0;
var galleryFullScreen = false;

//VERTICAL ALIGN OF MAIN CANVAS - resize does not work :-(
$(document).ready(function()
{
	$( window ).resize(function() {
		centerCanvas();
	});
});


//SCROLL THE VERTICAL IMAGE BAR
$(document).ready(function()
{
    $("#thumbDiv").mousedown(function( event ){
         drag = true;
         drag_origin = event.pageY;
    });

    $("#thumbDiv").mouseup(function( event ){
         drag = false;
    });

    $("#thumbDiv").mouseleave(function( event ){
         drag = false;
    });


    $("#thumbDiv").mousemove(function( event )
    {
        if( drag ){
           var s = $("#sliderDiv");
           var dy = drag_origin - event.pageY;
           dy*=3;

           var currentScroll = s.scrollTop(); 
           var newScroll = currentScroll + dy;
        
           s.scrollTop( newScroll );
           drag_origin = event.pageY;

           //Reposition scrollMarker
           reposition_scrollMark();
        }
    });

    //Reposition scrollMarker
    $("#sliderDiv").scroll(function( event )
    {
         reposition_scrollMark();
    });
});


//KEYBOARD INPUT
$(document).ready(function()
{  
	$(this).keydown(function(e){
		switch (e.which) {
			case 27:
			    //Esc - Hide overlay
				hide_overlayImage();
				break;
			case 37:
				//Arrow-left - previous image
				previousImage();
				break;
			case 39:
				//Arrow-right - next image				
				nextImage();
				break;
			case 32:
				//Space - next image				
				nextImage();
				break;
		}
	});
});


//NAVIGATION ARROWS
$(document).ready(function()
{         
	$("#new_gallery #bottomArrow_img").click( function(){ 
		nextImage();
	});
	
	$("#new_gallery #topArrow_img").click( function(){ 
		previousImage();
	});

	$("#canvasNext").click( function(){ 
		nextImage();
	});

	$("#canvasPrev").click( function(){ 
		previousImage();
	});
});



//================================================================================
//
//    JAVASCRIPT FUNCTIONS
//
//================================================================================


//ADD NEW IMAGE TO GALLERY         
function addGalleryImage(destination, counter, img_path)         
{ 
	var newImage=document.createElement("img");
	
	newImage.setAttribute("onclick", "displayImage(" + counter +  ")");
	newImage.setAttribute("class", "thumbImage");            
	newImage.setAttribute("src", img_path);
	
	newImage.setAttribute("style", "border: 2px solid #EAEAEA; margin-top: 10px; margin-right: 10px; margin-bottom: 10px; margin-left: 2px;");
	newImage.onmousedown = function(event) {
		event.preventDefault();
		return false;
	};
	      
	destination.appendChild(newImage);
	
	window.galleryData.plazma_urlData[window.galleryData.plazma_imageCount] = img_path;
	window.galleryData.plazma_imageCount++;

	//LOAD FIRST IMAGE TO MAIN CANVAS
	if(counter == 0)
	{
		document.getElementById('canvas').setAttribute("src", img_path);	
	}

	//UPDATE IMAGE COUNTER
	var imageTag = document.getElementById('new_gallery').getElementsByClassName("imageNumber");
	imageTag[0].innerHTML = "1/" + window.galleryData.plazma_imageCount;
}

//FIND ALL GALLERY IMAGES AND LOAD THEM TO TARGET GALLERY
function fillGallery_auto(destination, xml_path)
{    
	if( $.browser.msie && $.browser.version < 9 )
	{	
		//Nekompatibilni browser		
		var bad_browser = "<p style='color: #990000'>Omlouvame se, galerie ve vasem prohlizeci INTERNET EXPLORER " + $.browser.version + " nefunguje spravne.</p>";
		
		$('#new_gallery_container').after(bad_browser);
		$('#new_gallery_container').remove();
	}
	else
	{
		var img_counter = 0;
         
		$.get( xml_path, function(data){
			$(data).find('obr').each(function(){  
				$(this).find('path').each(function(){  
					var img_path = $(this).text();
					addGalleryImage(destination, img_counter, img_path);					 
				}); 
				
				$(this).find('comment').each(function(){  
					var img_comment = $(this).text();
					window.galleryData.plazma_commentData[img_counter] = img_comment;
				});
				    
				img_counter++;                    
			});
		});  
	}      
}       

//UPDATE IMAGE ON MAIN CANVAS  
function displayImage (target)
{
	highLight_image(target);
	
	document.getElementById('canvas').setAttribute("src", window.galleryData.plazma_urlData[target]);
	window.galleryData.plazma_currentImage = target;
	
	//UPDATE IMAGE COUNTER        
	var tagspan = $('#new_gallery .imageNumber')[0];
	$(tagspan).html(window.galleryData.plazma_currentImage + 1 + "/" + window.galleryData.plazma_imageCount);
}

//COMPUTES HEIGHT OF THE GALLERY SLIDER  DIV
function compute_sliderHeight()
{
     var slider_images = $('#sliderDiv').children();
     var slider_height = 0;

     for(var i = 0; i<$(slider_images).length;i++)
     {
          slider_height += $(slider_images[i]).height();
          slider_height += 14;
     }

     slider_height += 7;

     return slider_height;
}

//Reposition scrollMarker
function reposition_scrollMark()
{ 
	var slider = $("#sliderDiv");
	var currentScroll = $(slider).scrollTop();        
	var slider_height = compute_sliderHeight();
	var thumbDivHeight = $("#thumbDiv").height();
	var rel_slider_offset = currentScroll / ( slider_height - thumbDivHeight );
	
	var markOffset = 0;

	if( !galleryFullScreen )
	{
		markOffset = $("#thumbDiv").offset().top + ( thumbDivHeight - 20 ) * rel_slider_offset;
	}
	else
	{
		markOffset = 40 + ( thumbDivHeight - 20 ) * rel_slider_offset;
	}
	
	$('.scrollMark').css("top", markOffset + "px");

	centerCanvas();
}

//Scroll to gallery image
function scroll_to_galleryImage()
{
     var slider_images = $('#sliderDiv').children();
     var slider_height = 0;

     for(var i = 0; i<window.galleryData.plazma_currentImage + 1;i++)
     {
          slider_height += $(slider_images[i]).height();
          slider_height += 20;
     }

     slider_height -= $('#thumbDiv').height();
     slider_height -= 10;

     $('#sliderDiv').animate(
         {scrollTop: slider_height},
         300,
         function() {}
     );

     reposition_scrollMark();
}

//Move to next image
function nextImage()
{
	if(window.galleryData.plazma_currentImage < window.galleryData.plazma_imageCount - 1)
	{
		//Highlight new image
          	highLight_image(window.galleryData.plazma_currentImage + 1);

          	window.galleryData.plazma_currentImage++;                   
          	document.getElementById('canvas').setAttribute("src", window.galleryData.plazma_urlData[window.galleryData.plazma_currentImage]);

          	var tagspan = $('#new_gallery .imageNumber')[0];
          	$(tagspan).html(window.galleryData.plazma_currentImage + 1 + "/" + window.galleryData.plazma_imageCount);

		//Set image comment
		$('#imageComment').html(window.galleryData.plazma_commentData[window.galleryData.plazma_currentImage]);

          	scroll_to_galleryImage();
	}
}

//Move to previous image
function previousImage()
{
	if(window.galleryData.plazma_currentImage > 0)
	{
		//Highlight new image
		highLight_image(window.galleryData.plazma_currentImage - 1);
		
		window.galleryData.plazma_currentImage--;                   
		document.getElementById('canvas').setAttribute("src", window.galleryData.plazma_urlData[window.galleryData.plazma_currentImage]);
				
		var tagspan = $('#new_gallery .imageNumber')[0];
		$(tagspan).html(window.galleryData.plazma_currentImage + 1 + "/" + window.galleryData.plazma_imageCount);

		//Set image comment
		$('#imageComment').html(window.galleryData.plazma_commentData[window.galleryData.plazma_currentImage]);

		scroll_to_galleryImage();
	}    
}

//HighLights new image
function highLight_image(targetImage)
{
	//De-highLight old image
	var CI = $('#sliderDiv').children()[window.galleryData.plazma_currentImage];
	$(CI).css("border-color","#EAEAEA");
	
	//HighLight current image
	CI = $('#sliderDiv').children()[targetImage];
	$(CI).css("border-color","#49A8C8");
}

//Show fullscreen overlay
function show_overlayImage()
{
	galleryFullScreen = true;
	$(document.body).css("overflow","hidden");

	$('.galleryOverlay').show('slow',function()
	{    
		$(this).find('div.mainImageContainer').append($('#new_gallery'));
		$('#canvas').css("cursor","default");
		$('#galleryFS').hide();
		$('.gallery_imageTag').css("visibility","visible");
		scroll_to_galleryImage();

		centerCanvas();
	});	


	$('.galleryOverlay').offset({ top: $(window).scrollTop(), left: 0 });	
}

//Hide fullscreen overlay
function hide_overlayImage()
{
	galleryFullScreen = false;
	$(document.body).css("overflow","auto");

	var target = $('#new_gallery_container')[0];
	$(target).append($('#new_gallery'));
	$('#canvas').css("cursor","pointer");
	$('.galleryOverlay').hide('slow');
	$('#galleryFS').show();
	$('.gallery_imageTag').css("visibility","hidden");
	
	scroll_to_galleryImage();
	centerCanvas();		
}

//Unhide gallery on load
function showGallery()
{
	$('#new_gallery_container').show('slow',function()
	{    
		centerCanvas();
		$('#canvasPrev').css("visibility","visible");
		$('#canvasNext').css("visibility","visible");
		$('#galleryFS').css("visibility","visible");

		//Set first image comment
		$('#imageComment').html(window.galleryData.plazma_commentData[window.galleryData.plazma_currentImage]);		
	});
}

//Center main canvas
function centerCanvas()
{
	var me = $("#canvas");
	var parentHeight = $(me).parent().height();
	var myHeight = 	$(me).height();
	var topMargin = (parentHeight - myHeight) / 2 - 2;

	$(me).css("margin-top", topMargin);

	

	//Align left and right arrows, and fullscreen button
	var myWidth = $(me).width();	

	var leftA = $('#canvasPrev');
	var offsetL = $(me).offset();
	offsetL.left += 2;
	$(leftA).offset(offsetL)
	$(leftA).height(myHeight);
	$(leftA).width(myWidth*0.25);

	var rightA = $('#canvasNext');
	$(rightA).width(myWidth*0.25);
	var offsetR = $(me).offset();
	offsetR.left += myWidth * 0.75 + 2;
	$(rightA).offset(offsetR);
	$(rightA).height(myHeight);

	var fsB = $('#galleryFS');
	$(fsB).width(myWidth*0.5);
	var offsetFS = $(me).offset();
	offsetFS.left += $(me).width()*0.25 + 2;
	offsetFS.top += 2;
	$(fsB).offset(offsetFS);
	$(fsB).height(myHeight);
}