// Sidebar JS

$(document).ready(function() {	
	//Background color, mouseover and mouseout
	var colorOver = '#31b8da';
	var colorOut = '#1f1f1f';
	//Padding, mouseover
	var padLeft = '20px';
	var padRight = '10px';	
	//Default Padding
	var defpadLeft = $('.wp-tag-cloud li a').css('paddingLeft');
	var defpadRight = $('.wp-tag-cloud li a').css('paddingRight');		
	//Animate the LI on mouse over, mouse out
	$('#jssidebar .wp-tag-cloud li').click(function () {	
		//Make LI clickable
		window.location = $(this).find('a').attr('href');
	}).mouseover(function (){
		//mouse over LI and look for A element for transition
		$(this).find('a')
		.animate( { paddingLeft: padLeft, paddingRight: padRight}, { queue:false, duration:100 } )
		.animate( { backgroundColor: colorOver }, { queue:false, duration:200 });
	}).mouseout(function () {	
		//mouse oout LI and look for A element and discard the mouse over transition
		$(this).find('a')
		.animate( { paddingLeft: defpadLeft, paddingRight: defpadRight}, { queue:false, duration:100 } )
		.animate( { backgroundColor: colorOut }, { queue:false, duration:200 });
	});	
});	

$(document).ready(function() {	

	//Background color, mouseover and mouseout
	var colorOver = '#31b8da';
	var colorOut = '#1f1f1f';
		
	//Animate the LI on mouse over, mouse out
	$('.hover').click(function () {	
		//Make LI clickable
		window.location = $(this).find('a').attr('href');
		
	}).mouseover(function (){
		
		//mouse over LI and look for A element for transition
		$(this).find('a')
		.animate( { backgroundColor: colorOver }, { queue:false, duration:200 });
		$(this).find('input')
		.animate( { backgroundColor: colorOver }, { queue:false, duration:200 });

	}).mouseout(function () {
	
		//mouse oout LI and look for A element and discard the mouse over transition
		$(this).find('a')
		.animate( { backgroundColor: colorOut }, { queue:false, duration:200 });
		$(this).find('input')
		.animate( { backgroundColor: colorOut }, { queue:false, duration:200 });
	});	
	
});
	
// Slider

$(document).ready(function() {

	//Set Default State of each portfolio piece
	$(".paging").show();
	$(".paging a:first").addClass("active");
		
	//Get size of images, how many there are, then determin the size of the image reel.
	var imageWidth = $(".window").width();
	var imageSum = $(".image_reel img").size();
	var imageReelWidth = imageWidth * imageSum;
	
	//Adjust the image reel to its new size
	$(".image_reel").css({'width' : imageReelWidth});
	
	//Paging + Slider Function
	rotate = function(){	
		var triggerID = $active.attr("rel") - 1; //Get number of times to slide
		var image_reelPosition = triggerID * imageWidth; //Determines the distance the image reel needs to slide

		$(".paging a").removeClass('active'); //Remove all active class
		$active.addClass('active'); //Add active class (the $active is declared in the rotateSwitch function)
		
		//Slider Animation
		$(".image_reel").animate({ 
			left: -image_reelPosition
		}, 500 );
		
	}; 
	
	//Rotation + Timing Event
	rotateSwitch = function(){		
		play = setInterval(function(){ //Set timer - this will repeat itself every 3 seconds
			$active = $('.paging a.active').next();
			if ( $active.length === 0) { //If paging reaches the end...
				$active = $('.paging a:first'); //go back to first
			}
			rotate(); //Trigger the paging and slider function
		}, 7000); //Timer speed in milliseconds (3 seconds)
	};
	
	rotateSwitch(); //Run function on launch
	
	//On Hover
	$(".image_reel a").hover(function() {
		clearInterval(play); //Stop the rotation
	}, function() {
		rotateSwitch(); //Resume rotation
	});	
	
	//On Click
	$(".paging a").click(function() {	
		$active = $(this); //Activate the clicked paging
		//Reset Timer
		clearInterval(play); //Stop the rotation
		rotate(); //Trigger rotation immediately
		rotateSwitch(); // Resume rotation
		return false; //Prevent browser jump to link anchor
	});	
	
});

// TipTip

$(function(){
    $(".tip").tipTip();
    $(".right_tip").tipTip({defaultPosition: "right",edgeOffset: 10});
    $(".left_tip").tipTip({defaultPosition: "left",edgeOffset: 10});
    $("#similar img").tipTip({edgeOffset:10});
});

$(document).ready(function() {
    //Tooltips
	$('a[href$=".mp3"]').addClass('tip_trigger');
    $('a[href$=".mp3"]').prepend('<span class="tip">Right-click "Save Link As..." to download</span>');
});

$(document).ready(function() {
//Tooltips
	var tip;
	$(".tip_trigger").hover(function(){

		//Caching the tooltip and removing it from container; then appending it to the body
		tip = $(this).find('.tip').remove();
		$('body').append(tip);

		tip.show(); //Show tooltip

	}, function() {

		tip.hide().remove(); //Hide and remove tooltip appended to the body
		$(this).append(tip); //Return the tooltip to its original position

	}).mousemove(function(e) {
	//console.log(e.pageX)
		  var mousex = e.pageX + 15; //Get X coodrinates
		  var mousey = e.pageY + 15; //Get Y coordinates
		  var tipWidth = tip.width(); //Find width of tooltip
		  var tipHeight = tip.height(); //Find height of tooltip

		 //Distance of element from the right edge of viewport
		  var tipVisX = $(window).width() - (mousex + tipWidth);
		  var tipVisY = $(window).height() - (mousey + tipHeight);

		if ( tipVisX < 20 ) { //If tooltip exceeds the X coordinate of viewport
			mousex = e.pageX - tipWidth - 15;
			$(this).find('.tip').css({  top: mousey, left: mousex });
		} if ( tipVisY < 20 ) { //If tooltip exceeds the Y coordinate of viewport
			mousey = e.pageY - tipHeight - 15;
			tip.css({  top: mousey, left: mousex });
		} else {
			tip.css({  top: mousey, left: mousex });
		}
	});
});