// on mouse
(function(onLoad) {
	try {
		window.addEventListener('load', onLoad, false);
	} catch (e) {
		window.attachEvent('onload', onLoad);
	}
})(function() {
	var tags = ["img","input"];
	for( var i=0, len=tags.length; i<len; i++ ) {
		var over = function() { this.src = this.src.replace('_d.', '_h.'); };
		var out  = function() { this.src = this.src.replace('_h.', '_d.'); };
		var el = document.getElementsByTagName(tags[i]);
		for (var j=0, len2=el.length; j<len2; j++) {
			var attr = el[j].getAttribute('src');
			if (!el[j].src.match(/_d\./)&&attr) continue;
			el[j].onmouseover = over;
			el[j].onmouseout  = out;
		}
	}
});



// tab Change
function tabChange(mode) {
	if (mode ==1) {
		document.getElementById("tab01").style.display = 'block';
		document.getElementById("tab02").style.display = 'none';
	} else if (mode ==2) {
		document.getElementById("tab01").style.display = 'none';
		document.getElementById("tab02").style.display = 'block';
	}
}



// 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 = $(".image_area").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
	});	
	
});