// JavaScript Document


function navOver(img){
		
		var navItem = document.getElementById(img);
		if(navItem != null){
			
			navItem.src ="images/" + img + "_ovr.png";
		}
		
}

function navOut(img){
		
		var navItem = document.getElementById(img);
		if(navItem != null){
			
			navItem.src ="images/" + img + "_off.png";
		}
		
}
function swapImage(selection){
		
		var projImage = document.getElementById("project-image");
		var project = document.getElementById("project-image").name;
		var currentImage =  document.getElementById("project-image").src;
		var currentImage = currentImage.slice(-5);
		var currentImage = currentImage.slice(0,1);
		var currentIcon = document.getElementById(currentImage);
		
		if(projImage != null){
			
			projImage.src ="images/projects/" + project + selection.name + ".jpg";
			currentIcon.src = "images/" + currentImage + "icon_off.gif";
			selection.src = "images/" + selection.name + "icon_on.gif";
			
			
		}
		
}



this.tooltip = function(){	
	/* CONFIG */		
		xOffset = 10;
		yOffset = 20;		
		// these 2 variable determine popup's distance from the cursor
		// you might want to adjust to get the right result		
	/* END CONFIG */		
	$("a.tooltip").hover(function(e){											  
		this.t = this.title;
		this.n = this.name;
		this.title = "";									  
		$("body").append("<p id='tooltip'><strong>"+ this.n + "</strong> " + this.t +"</p>");
		$("#tooltip")
			.css("top",(e.pageY - xOffset) + "px")
			.css("left",(e.pageX + yOffset) + "px")
			.fadeIn("fast");		
    },
	function(){
		this.title = this.t;		
		$("#tooltip").remove();
    });	
	$("a.tooltip").mousemove(function(e){
		$("#tooltip")
			.css("top",(e.pageY - xOffset) + "px")
			.css("left",(e.pageX + yOffset) + "px");
	});			
};

window.onload = function () {
	
			tooltip();
			
            var container = $('div.sliderGallery');
            var ul = $('ul', container);
            
            var itemsWidth = ul.innerWidth() - container.outerWidth();
           
            $('.slider', container).slider({
                min: 0,
                max: itemsWidth,
                handle: '.handle',
                stop: function (event, ui) {
                    ul.animate({'left' : ui.value * -1}, 1200);
                },
                slide: function (event, ui) {
                    ul.css('left', ui.value * -1);
                }
            });
        };