// center scroll on homepage
// JavaScript 

$(document).ready(function() {

	// main center piece
	//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 * 600; //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
		}, 1500 );
		
	}; 
	
	//Rotation + Timing Event
	rotateSwitch = function(){		
		play_slide = 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
		}, 20000); //Timer speed in milliseconds (3 seconds)
	};
	
	rotateSwitch(); //Run function on launch
	
	//On Hover
	$(".test").hover(function() {
		clearInterval(play_slide); //Stop the rotation
	}, function() {
		rotateSwitch(); //Resume rotation
	});	

	
	//On Click
	$(".paging a").click(function() {	
		$active = $(this); //Activate the clicked paging
		//Reset Timer
		clearInterval(play_slide); //Stop the rotation
		rotate(); //Trigger rotation immediately
		rotateSwitch(); // Resume rotation
		return false; //Prevent browser jump to link anchor
	});	
	

		function callback() {
			setTimeout(function() {
				$( "#effect:visible" ).removeAttr( "style" ).fadeOut();
			}, 1000 );
		};

		// set effect from select menu value
		$("#button201").click(function() {
			$("#effect201" ).show( 'puff', '', 500, callback );
			return false;
		});
		
		// set effect from select menu value
		$("#button202").click(function() {
			$("#effect202" ).show( 'puff', '', 500, callback );
			return false;
		});
		$("#button203").click(function() {
			$("#effect203" ).show( 'puff', '', 500, callback );
			return false;
		});
		$("#button204").click(function() {
			$("#effect204" ).show( 'puff', '', 500, callback );
			return false;
		});
		$("#button205").click(function() {
			$("#effect205" ).show( 'puff', '', 500, callback );
			return false;
		});
		$("#button206").click(function() {
			$("#effect206" ).show( 'puff', '', 500, callback );
			return false;
		});
		$("#button207").click(function() {
			$("#effect207" ).show( 'puff', '', 500, callback );
			return false;
		});
		$("#button208").click(function() {
			$("#effect208" ).show( 'puff', '', 500, callback );
			return false;
		});
		$("#button209").click(function() {
			$("#effect209" ).show( 'puff', '', 500, callback );
			return false;
		});
		$("#button210").click(function() {
			$("#effect210" ).show( 'puff', '', 500, callback );
			return false;
		});
		
		//on click hide
		$("#effect201").click(function() {
			$("#effect201" ).hide();
			//return false;
		});
		$("#effect202").click(function() {
			$("#effect202" ).hide();
			//return false;
		});
		$("#effect203").click(function() {
			$("#effect203").hide();
			//return false;
		});
		$("#effect204").click(function() {
			$("#effect204").hide();
			//return false;
		});
		$("#effect205").click(function() {
			$("#effect205").hide();
			//return false;
		});
		$("#effect206").click(function() {
			$("#effect206").hide();
			//return false;
		});
		$("#effect207").click(function() {
			$("#effect207").hide();
			//return false;
		});
		$("#effect208").click(function() {
			$("#effect208").hide();
			//return false;
		});
		$("#effect209").click(function() {
			$("#effect209").hide();
			//return false;
		});
		$("#effect210").click(function() {
			$("#effect210").hide();
			//return false;
		});
		
		//On Hover pause
		$("#effect201").hover(function() {
			clearInterval(play_slide); //Stop the rotation
		}, function() {
			rotateSwitch(); //Resume rotation
		}); 
		$("#effect202").hover(function() {
			clearInterval(play_slide); //Stop the rotation
		}, function() {
			rotateSwitch(); //Resume rotation
		}); 
		$("#effect203").hover(function() {
			clearInterval(play_slide); //Stop the rotation
		}, function() {
			rotateSwitch(); //Resume rotation
		}); 
		$("#effect204").hover(function() {
			clearInterval(play_slide); //Stop the rotation
		}, function() {
			rotateSwitch(); //Resume rotation
		});
		$("#effect205").hover(function() {
			clearInterval(play_slide); //Stop the rotation
		}, function() {
			rotateSwitch(); //Resume rotation
		});
		$("#effect206").hover(function() {
			clearInterval(play_slide); //Stop the rotation
		}, function() {
			rotateSwitch(); //Resume rotation
		});
		$("#effect207").hover(function() {
			clearInterval(play_slide); //Stop the rotation
		}, function() {
			rotateSwitch(); //Resume rotation
		});
		$("#effect208").hover(function() {
			clearInterval(play_slide); //Stop the rotation
		}, function() {
			rotateSwitch(); //Resume rotation
		});
		$("#effect209").hover(function() {
			clearInterval(play_slide); //Stop the rotation
		}, function() {
			rotateSwitch(); //Resume rotation
		});
		$("#effect210").hover(function() {
			clearInterval(play_slide); //Stop the rotation
		}, function() {
			rotateSwitch(); //Resume rotation
		});
		
		//Hide content
		$("#effect201").hide();
		$("#effect202").hide();
		$("#effect203").hide();
		$("#effect204").hide();
		$("#effect205").hide();
		$("#effect206").hide();
		$("#effect207").hide();
		$("#effect208").hide();
		$("#effect209").hide();
		$("#effect210").hide();
		
		$("#button301").click(function() {
			$("#effect301" ).show( 'puff', '', 500, callback );
			return false;
		});
		// set effect from select menu value
		$("#button302").click(function() {
			$("#effect302" ).show( 'puff', '', 500, callback );
			return false;
		});
		$("#button303").click(function() {
			$("#effect303" ).show( 'puff', '', 500, callback );
			return false;
		});
		$("#button304").click(function() {
			$("#effect304" ).show( 'puff', '', 500, callback );
			return false;
		});
		$("#button305").click(function() {
			$("#effect305" ).show( 'puff', '', 500, callback );
			return false;
		});
		$("#button306").click(function() {
			$("#effect306" ).show( 'puff', '', 500, callback );
			return false;
		});
		$("#button307").click(function() {
			$("#effect307" ).show( 'puff', '', 500, callback );
			return false;
		});
		$("#button308").click(function() {
			$("#effect308" ).show( 'puff', '', 500, callback );
			return false;
		});
		$("#button309").click(function() {
			$("#effect309" ).show( 'puff', '', 500, callback );
			return false;
		});
		$("#button310").click(function() {
			$("#effect310" ).show( 'puff', '', 500, callback );
			return false;
		});
		
		//on click hide
		$("#effect301").click(function() {
			$("#effect301" ).hide();
			//return false;
		});
		$("#effect302").click(function() {
			$("#effect302" ).hide();
			//return false;
		});
		$("#effect303").click(function() {
			$("#effect303").hide();
			//return false;
		});
		$("#effect304").click(function() {
			$("#effect304").hide();
			//return false;
		});
		$("#effect305").click(function() {
			$("#effect305").hide();
			//return false;
		});
		$("#effect306").click(function() {
			$("#effect306").hide();
			//return false;
		});
		$("#effect307").click(function() {
			$("#effect307").hide();
			//return false;
		});
		$("#effect308").click(function() {
			$("#effect308").hide();
			//return false;
		});

		$("#effect309").click(function() {
			$("#effect309").hide();
			//return false;
		});
		$("#effect310").click(function() {
			$("#effect310").hide();
			//return false;
		});
		
		//On Hover pause
		$("#effect301").hover(function() {
			clearInterval(play_slide); //Stop the rotation
		}, function() {
			rotateSwitch(); //Resume rotation
		}); 
		$("#effect302").hover(function() {
			clearInterval(play_slide); //Stop the rotation
		}, function() {
			rotateSwitch(); //Resume rotation
		}); 
		$("#effect303").hover(function() {
			clearInterval(play_slide); //Stop the rotation
		}, function() {
			rotateSwitch(); //Resume rotation
		}); 
		$("#effect304").hover(function() {
			clearInterval(play_slide); //Stop the rotation
		}, function() {
			rotateSwitch(); //Resume rotation
		});
		$("#effect305").hover(function() {
			clearInterval(play_slide); //Stop the rotation
		}, function() {
			rotateSwitch(); //Resume rotation
		});
		$("#effect306").hover(function() {
			clearInterval(play_slide); //Stop the rotation
		}, function() {
			rotateSwitch(); //Resume rotation
		});
		$("#effect307").hover(function() {
			clearInterval(play_slide); //Stop the rotation
		}, function() {
			rotateSwitch(); //Resume rotation
		});
		$("#effect308").hover(function() {
			clearInterval(play_slide); //Stop the rotation
		}, function() {
			rotateSwitch(); //Resume rotation
		});
		$("#effect309").hover(function() {
			clearInterval(play_slide); //Stop the rotation
		}, function() {
			rotateSwitch(); //Resume rotation
		});
		$("#effect310").hover(function() {
			clearInterval(play_slide); //Stop the rotation
		}, function() {
			rotateSwitch(); //Resume rotation
		});
		
		$("#effect301").hide();
		$("#effect302").hide();
		$("#effect303").hide();
		$("#effect304").hide();
		$("#effect305").hide();
		$("#effect306").hide();
		$("#effect307").hide();
		$("#effect308").hide();
		$("#effect309").hide();
		$("#effect310").hide();
		
//////////////////////////////////////////////////////////////////
//Tooltips
	 $(".tip_page_1").hover(function(){
        tip = $(this).find('.tip');
        tip.show(); //Show tooltip
		
		//alert('show 201');
    }, function() {
        tip.hide(); //Hide tooltip
		
		//alert('hide 201');
    }).mousemove(function(e) {
		
		//alert('x width:'+document.body.offsetWidth+', y width:'+document.body.offsetHeight);
		var wOffSet=(document.body.offsetWidth-900)/2;
		if(wOffSet<0){wOffSet=0;}
		wOffSet=e.pageX-wOffSet;
		//alert(wOffSet);
		if(wOffSet>360){
			var mousex=wOffSet+415;
		} else {
        	var mousex = wOffSet +625; //Get Y coordinates
		}
		
		//alert(e.pageY);
		if(e.pageY>=500 && e.pageY<=580){
        	var mousey = e.pageY - 355; //Get Y coordinates
			
		}
		else if(e.pageY>580){
			var mousey = 235
		}else if(e.pageY < 326){
			var mousey = 1
		}else{
        	var mousey = e.pageY - 325; //Get Y coordinates
		}
		
        //var mousex = e.pageX - 90; //Get X coodrinates
        var tipWidth = tip.width(); //Find width of tooltip
        var tipHeight = tip.height(); //Find height of tooltip

		//alert(mousey);
        //Distance of element from the right edge of viewport
        var tipVisX = $('.image_reel').width() - (mousex + tipWidth);
        //Distance of element from the bottom of viewport
        var tipVisY = $('.image_reel').height() - (mousey + tipHeight);
        if ( tipVisX < 20 ) { //If tooltip exceeds the X coordinate of viewport
            mousex = e.pageX - tipWidth - 20;
        } if ( tipVisY < 20 ) { //If tooltip exceeds the Y coordinate of viewport
            mousey = e.pageY - tipHeight - 20;
        }
        //Absolute position the tooltip according to mouse position
        tip.css({  top: mousey, left: mousex });
    });
	$(".tip_page_2").hover(function(){
        tip = $(this).find('.tip');
        tip.show(); //Show tooltip
		
		//alert('show 201');
    }, function() {
        tip.hide(); //Hide tooltip
		
		//alert('hide 201');
    }).mousemove(function(e) {
		var wOffSet=(document.body.offsetWidth-900)/2;
		if(wOffSet<0){wOffSet=0;}
		wOffSet=e.pageX-wOffSet;
		//alert(wOffSet);
		if(wOffSet>360){
			//var mousex=wOffSet+415-600;
			var mousex=wOffSet+415+600;
		} else {
        	var mousex = wOffSet+625+600; //Get Y coordinates
		}
		
		//alert(e.pageY);
		if(e.pageY>=500 && e.pageY<=580){
        	var mousey = e.pageY - 355; //Get Y coordinates
			//alert(e.pageY);
		}
		else if(e.pageY>581){
			var mousey = 235
		}else if(e.pageY < 326){
			var mousey = 1
		}else{
        	var mousey = e.pageY - 325; //Get Y coordinates
		}
        var tipWidth = tip.width(); //Find width of tooltip
        var tipHeight = tip.height(); //Find height of tooltip

		//alert(mousey);
        //Distance of element from the right edge of viewport
        var tipVisX = $('.image_reel').width() - (mousex + tipWidth);
        //Distance of element from the bottom of viewport
        var tipVisY = $('.image_reel').height() - (mousey + tipHeight);
        if ( tipVisX < 20 ) { //If tooltip exceeds the X coordinate of viewport
            mousex = e.pageX - tipWidth - 20;
        } if ( tipVisY < 20 ) { //If tooltip exceeds the Y coordinate of viewport
            mousey = e.pageY - tipHeight - 20;
        }
        //Absolute position the tooltip according to mouse position
        tip.css({  top: mousey, left: mousex });
    });
	 $(".tip_left_2").hover(function(){
        tip = $(this).find('.tip');
        tip.show(); //Show tooltip
		
		//alert('show 201');
    }, function() {
        tip.hide(); //Hide tooltip
		
		//alert('hide 201');
    }).mousemove(function(e) {
        var mousex = e.pageX + 510; //Get X coodrinates
        var mousey = e.pageY - 325; //Get Y coordinates
        var tipWidth = tip.width(); //Find width of tooltip
        var tipHeight = tip.height(); //Find height of tooltip

		//alert(mousey);
        //Distance of element from the right edge of viewport
        var tipVisX = $('.image_reel').width() - (mousex + tipWidth);
        //Distance of element from the bottom of viewport
        var tipVisY = $('.image_reel').height() - (mousey + tipHeight);
        if ( tipVisX < 20 ) { //If tooltip exceeds the X coordinate of viewport
            mousex = e.pageX - tipWidth - 20;
        } if ( tipVisY < 20 ) { //If tooltip exceeds the Y coordinate of viewport
            mousey = e.pageY - tipHeight - 20;
        }
        //Absolute position the tooltip according to mouse position
        tip.css({  top: mousey, left: mousex });
    });

/// right side scroll///
		$(".scrolling a:first").addClass("active");
		
		$(".scroll_reel").css({'height' : 0});
		
		//scrolling + Slider Function
		rotateScroll = function(){	
			var scrollID = $active.attr("rel") - 1; //Get number of times to slide
			var scroll_reelPosition = scrollID * 120; //Determines the distance the image reel needs to slide
	
			$(".scrolling a").removeClass('active'); //Remove all active class
			$active.addClass('active'); //Add active class (the $active is declared in the switchScroll function)
			
			//Slider Animation
			$(".scroll_reel").animate({
				top: -scroll_reelPosition
			}, 3000 );
			
		}; 
		
		//Rotation + Timing Event
		switchScroll = function(){		
			play = setInterval(function(){ //Set timer - this will repeat itself every 3 seconds
				$active = $('.scrolling a.active').next();
				if ( $active.length === 0) { //If scrolling reaches the end...
					$active = $('.scrolling a:first'); //go back to first
				}
				rotateScroll(); //Trigger the scrolling and slider function
			}, 5000); //Timer speed in milliseconds (3 seconds)
		};
		
		switchScroll(); //Run function on launch
		
		//On Hover
		$(".scroll_reel .test").hover(function() {
			clearInterval(play); //Stop the rotation
		}, function() {
			switchScroll(); //Resume rotation
		});	
		
		//On Click
		$(".scrolling a").click(function() {	
			$active = $(this); //Activate the clicked scrolling
			//Reset Timer
			clearInterval(play); //Stop the rotation
			rotateScroll(); //Trigger rotation immediately
			switchScroll(); // Resume rotation
			return false; //Prevent browser jump to link anchor
		});
	});