var $j = jQuery.noConflict();

$j(document).ready(function() {
	$j('#homeBanner').length ? randomImage() : null;
});

$j(window).load(function() {
	$j('.interactiveImg').length ? imgFade() : null;//check for interactive images then call function
	$j('#contactBtn').contactSlide('slow','swing');//declair contactForm hide/show function
	$j('#formClose').contactSlide('slow','swing');
	$j('#carouselContainer').length ? carouselInit() : null;
	$j('#sliderContent').length ? sliderInit() : null;
	$j("#commentForm").validate(); $j("#signUpForm").validate();
	$j("#enquiryForm").length ? $j("#enquiryForm").validate() : null;
	$j("#loginForm").length ? $j("#loginForm").validate() : null;
	$j('.content-conveyor').css('left','-800px').animate({left: '0px'}, 3000);
	$j('.ui-slider-handle').css('left','300px').animate({left: '0px'}, 3000);
	
	//subNavInit();
});
function randomImage() {
	var altString;
	var randomNumber=Math.floor(Math.random()*9);
	switch(randomNumber) {
		case 0:
			altString = "Technical Director, Netcel";
			break;	
		case 1:
			altString = ".NET Developer, Netcel";
			break;
		case 2:
			altString = "Business Development Manager, Netcel";
			break;
		case 3:
			altString = "Account Administrator, Netcel";
			break;	
		case 4:
			altString = "Interface Developer, Netcel";
			break;	
		case 5:
			altString = "Business Development Manager, Netcel";
			break;	
		case 6:
			altString = ".NET Developer, Netcel";
			break;
		case 7:
			altString = "Lead Designer, Netcel";
			break;		
		case 8:
			altString = "Senior Technical Consultant, Netcel";
			break;
	}
	$j('#randomImage').attr('src','images/homePagePeople/'+randomNumber+'.gif');
	$j('#randomImage').attr('alt',altString);
}

//Generic fade of images
function imgFade() {
	$j('.interactiveImg').bind('mouseenter mouseleave', function() {
	  $j(this).find('strong').animate({opacity: 'toggle'}, 500);
	});
}
$j.fn.contactSlide = function(speed, easing) {
	var x = true;
	var li = $j('#topBar .first');
	return this.click(function() {$j('#abs').slideToggle(speed, easing);
		li.toggleClass('show');
		$j('#contactBtn').toggleClass('UpDown');
	});	
}
$j.fn.fadeToggle = function(speed, easing) {
	return this.find('strong').animate({opacity: 'toggle'}, speed, easing);
}

function sliderInit() {
	//$j('#sliderContent .viewer').css('height','341px');
	
	//vars
	var conveyor = $j(".content-conveyor", $j("#sliderContent")),
	item = $j(".item", $j("#sliderContent"));
	//set length of conveyor
	conveyor.css("width", item.length * parseInt(item.outerWidth(true)));
    //config
    var sliderOpts = {
	  max: (item.length * parseInt(item.outerWidth(true))) - parseInt($j(".viewer", $j("#sliderContent")).css("width")),
      slide: function(e, ui) { 
        conveyor.css("left", "-" + ui.value + "px");
      }
    };
    //create slider
    $j("#slider").slider(sliderOpts);
}

function carouselInit() {
	//cache selectors and create necessary variables
	var carouselContainer = $j('#carouselContainer'),imageContainer = $j('#imageContainer'),statementH1 = $j('#statement').find('h1'),
	projectDescription = $j('#projectDetail').find('.det'),noOfImages = imageContainer.children().length,imgWidth = imageContainer.children('div').outerWidth(true),count = 1,x = 0;
	
	//set initial styles/states
	imageContainer.css('width',noOfImages*imgWidth);
	statementH1.eq(count-1).fadeIn('slow')
	
	//handle the click events
	$j('#leftBtn').click(function() {
		if(count!==1) {x += imgWidth;slideAnimation(x,'L');}//check to see if the slideshow hasn't reached the start (ie its not on slide/image 1) then call the animate function
	});
	$j('#rightBtn').click(function() {
		if(count!==noOfImages) {x -= imgWidth;slideAnimation(x,'R');}//check to see if the slideshow hasn't reached the end (ie its not on the last slide/image) then call the animate function
	});
	function slideAnimation(x,dir) {
		$j('#projectDetail').find('.det:visible').slideUp('slow');//hide the image specific content
		imageContainer.animate({left: ''+x+'px'}, 1000);//slide in the next image
		dir=='L' ? count -- : count++;//increment of decrement the counter so we know whcih image we are on
		$j('#statement').find('h1:visible').fadeOut(function() {//fade out the "visible" statement
			statementH1.eq(count-1).fadeIn('slow');//fade in the next one (had to put -1 as eq starts at zero (not 1, like the counter)
		});
	}
	imageContainer.children('div').click(function() {//handle click event for clicking on the image 
		projectDescription.eq(count-1).slideToggle('slow');//slide down the project specific content (had to put -1 as eq starts at zero (not 1, like the counter)
	});
}

function subNavInit() {
	//cache selectors and create necessary variables
	var topNav = $j('#topNav'),withSub = $j('#withSub'),subNav = $j('#sub'),arrowImg = $j(withSub).find('img');
	
	//On Hover Over
	function megaHoverOver(){
	    subNav.stop().fadeTo('fast', 1).show(); //Find sub and fade it in
	    toggleClass(); changeArrow(false);
	}
	//On Hover Out
	function megaHoverOut(){
	  subNav.stop().fadeTo('fast', 0, function() { //Fade to 0 opactiy
	      $j(this).hide();  //after fading, hide it
	  });
	  toggleClass();
	  changeArrow(true);
	}
	//Set custom configurations
	var config = {
	     sensitivity: 2, // number = sensitivity threshold (must be 1 or higher)
	     interval: 100, // number = milliseconds for onMouseOver polling interval
	     over: megaHoverOver, // function = onMouseOver callback (REQUIRED)
	     timeout: 200, // number = milliseconds delay before onMouseOut
	     out: megaHoverOut // function = onMouseOut callback (REQUIRED)
	};
	subNav.css({'opacity':'0'}); //Fade sub nav to 0 opacity on default
	withSub.hoverIntent(config); //Trigger Hover intent with custom configurations
	
	function toggleClass() {withSub.toggleClass("rolled");}
	function changeArrow(x) {x ? arrowImg.attr('src', '/images/arrowDown.gif') : arrowImg.attr('src', '/images/arrowUp.gif');}
}