$(document).ready(function() {
     		

     		/************ PORTFOLIO NAVIGATION ********************************************/
			var horpos = 1;
     		var verpos = 0;
     		
      		 $('.first').click(function() {
				//reset vertical position and get selected horizontal position				
				verpos=0;
				newhorpos=$(this).attr("id");
					
				if(horpos!=newhorpos){
					
					
					document.getElementById("portdescsub"+horpos).style.visibility = 'hidden';
					//clear the video player div
     		 		$('#videoplayer').text('');
					//remove play button if leaving a video item
					if(document.getElementById("playbutton"+horpos)){
                        document.getElementById("playbutton"+horpos).style.visibility = 'hidden';
					}
					//get new horizontal position and slide images
					if(newhorpos>horpos){
					   newmarginleft=642*(newhorpos-horpos)	
      		 		   $('.imgslide').animate({marginLeft:"-=" + newmarginleft + "px"}, 1000, 'linear');
					}
					if(newhorpos<horpos){
					   newmarginleft=642*(horpos-newhorpos)	
      		 		   $('.imgslide').animate({marginLeft:"+=" + newmarginleft + "px"}, 1000, 'linear');
					}
					//position old portfolio item back to top item
      		 		$('#port' + horpos).animate({marginTop:"0px"}, 1000, 'swing');
      		 		
      		 		//unselect old protfolio item in grid nav
      		 		$('#portnavleft').find('.selected').parents("ul:first").removeClass('active');
      		 		$('#portnavleft').find('.selected').removeClass("selected");
					
      		 		horpos=newhorpos;
					
					//make play button visible if it is a video item
					if(document.getElementById("playbutton"+horpos)){
                        document.getElementById("playbutton"+horpos).style.visibility = 'visible';
					}
      		 		//select new portfolio item in grid nav
      		 		$('#col' + horpos + ' ul li:first a').addClass('selected');      		 	
      		 		$('#col' + horpos + ' ul').addClass('active');
 					document.getElementById("portdescsub"+horpos).style.visibility = 'visible';
					
					
					loadimages(newhorpos);
				}
					return false;
    
    		});
    		
    		
    		$('#portnavleft ul.active li a').live("click",function(){
    		
    			var currpos = $(this).parent('li').attr('id');
    			currpos = currpos.substring(1);    			
    			newMargin = (currpos-verpos) * 484;
    			verpos = currpos;
    			$('#port' + horpos).animate({marginTop:"-="+newMargin+"px"}, 1000, 'swing');
    			
    			
    			$('#portnavleft').find('.selected').removeClass("selected");
					
				$('#col' + horpos + ' ul li:eq(' + verpos + ') a img').addClass("selected");
    		
    		});
    		
    		
      		 
      		 $('first').find('.selected').click(function(){
      		 	$(this).addClass('selected');
      	
      		 });
			/*
     		
      		 $('.first').click(function() {
      		 	$('#portnavleft').find('.selected').parents("ul:first").removeClass('active');
      		 	$('#portnavleft').find('.selected').removeClass("selected");
      		 	
      		 	$(this).addClass('selected');      		 	
      		 	$(this).parents("ul:first").addClass('active');
      		 	$('#portnavleft div ul#active li a').removeClass('hidden'); 
    
    		});
      		 
      		 $('first').find('.selected').click(function(){
      		 	$(this).addClass('selected');
      	
      		 });
			 */
      		 /*******************LEFT ARROW**********************************************/
      		 $('#leftarrow a').click(function(){
      		 	if(horpos > 1)
      		 	{
					verpos=0;
					document.getElementById("portdescsub"+horpos).style.visibility = 'hidden';
      		 		$('.imgslide').animate({marginLeft:"+=642px"}, 1000, 'swing',function(){
      		 			loadimages(horpos);
      		 			$('#port' + horpos).animate({marginTop:"0px"}, 1000, 'swing');
      		 			
      		 		});
					//remove play button if leaving a video item
					if(document.getElementById("playbutton"+horpos)){
                        document.getElementById("playbutton"+horpos).style.visibility = 'hidden';
					}
					//position old portfolio item back to top item
      		 		
      		 		$('#portnavleft').find('.selected').parents("ul:first").removeClass('active');
      		 		$('#portnavleft').find('.selected').removeClass("selected");
      		 		horpos--;
					//clear the video player div
     		 		$('#videoplayer').text('');
					//make play button visible if it is a video item
					if(document.getElementById("playbutton"+horpos)){
                        document.getElementById("playbutton"+horpos).style.visibility = 'visible';
					}
      		 		//select new portfolio item in grid nav
      		 		$('#col' + horpos + ' ul li:first a').addClass('selected');      		 	
      		 		$('#col' + horpos + ' ul').addClass('active');
 					document.getElementById("portdescsub"+horpos).style.visibility = 'visible';
 					
 					//loadimages(horpos);
 					
      		 	}
      		 	return false;
      		 });
      		 
      		 /*******************RIGHT ARROW*********************************************/
      		 $('#rightarrow a').click(function(){
      		 	if(horpos < maxright)
      		 	{
					verpos=0;
					document.getElementById("portdescsub"+horpos).style.visibility = 'hidden';
      		 		$('.imgslide').animate({marginLeft:"-=642px"}, 1000, 'swing',function(){
      		 			loadimages(horpos);
      		 			$('#port' + horpos).animate({marginTop:"0px"}, 1000, 'swing');
      		 		
      		 		});
					//remove play button if leaving a video item
					if(document.getElementById("playbutton"+horpos)){
                        document.getElementById("playbutton"+horpos).style.visibility = 'hidden';
					}
					//position old portfolio item back to top item
      		 		$('#port' + horpos).animate({marginTop:"0px"}, 1000, 'swing');
      		 		
      		 		//unselect old protfolio item in grid nav
      		 		$('#portnavleft').find('.selected').parents("ul:first").removeClass('active');
      		 		$('#portnavleft').find('.selected').removeClass("selected");
      		 		horpos++;
					//clear the video player div
     		 		$('#videoplayer').text('');
					//make play button visible if it is a video item
					if(document.getElementById("playbutton"+horpos)){
                        document.getElementById("playbutton"+horpos).style.visibility = 'visible';
					}
      		 		//select new portfolio item in grid nav
      		 		$('#col' + horpos + ' ul li:first a').addClass('selected');      		 	
      		 		$('#col' + horpos + ' ul').addClass('active');
 					document.getElementById("portdescsub"+horpos).style.visibility = 'visible';
     		 		
     		 	
     		 	}
      		 	return false;
      		 });
      		 
      		 
      		 /*******************KEYPRESS********************************************/
      		  $(document).keypress(function(e){
			   //check to see if current portfolio item is not the first one
      		 	
      		 	switch(e.keyCode){
      		 	
      		 	case 38:
      		 	  if(verpos >0)
      		 	  {
      		 		$('#port' + horpos).animate({marginTop:"+=484px"}, 1000, 'swing');
					$('#col' + horpos + ' ul li:eq(' + verpos + ') a img').removeClass("selected");
					verpos--;
					$('#col' + horpos + ' ul li:eq(' + verpos + ') a img').addClass("selected");
					break;
				  }
      		 	  return false;
				case 40:
	              if($('#col' + horpos + ' ul li:eq(' + verpos + ')').is(":last-child")==false){
					$('#port' + horpos).animate({marginTop:"-=484px"}, 1000, 'swing');
      		 		$('#portnavleft').find('.selected').removeClass("selected");
					verpos++;
					$('#col' + horpos + ' ul li:eq(' + verpos + ') a img').addClass("selected");
					break;
				  }
      		 	  return false;
				case 39:
					if(horpos < maxright)
      		 		{
						verpos=0;
						document.getElementById("portdescsub"+horpos).style.visibility = 'hidden';
      		 			$('.imgslide').animate({marginLeft:"-=642px"}, 1000, 'swing',function(){
      		 				loadimages(horpos);
      		 				$('#port' + horpos).animate({marginTop:"0px"}, 1000, 'swing');
      		 		
      		 			});
						//remove play button if leaving a video item
						if(document.getElementById("playbutton"+horpos)){
                       		document.getElementById("playbutton"+horpos).style.visibility = 'hidden';
						}
						//position old portfolio item back to top item
      		 			$('#port' + horpos).animate({marginTop:"0px"}, 1000, 'swing');
      		 		
      		 			//unselect old protfolio item in grid nav
      		 			$('#portnavleft').find('.selected').parents("ul:first").removeClass('active');
      		 			$('#portnavleft').find('.selected').removeClass("selected");
      		 			horpos++;
						//clear the video player div
     		 			$('#videoplayer').text('');
						//make play button visible if it is a video item
						if(document.getElementById("playbutton"+horpos)){
                       		document.getElementById("playbutton"+horpos).style.visibility = 'visible';
						}
      		 			//select new portfolio item in grid nav
      		 			$('#col' + horpos + ' ul li:first a').addClass('selected');      		 	
      		 			$('#col' + horpos + ' ul').addClass('active');
 						document.getElementById("portdescsub"+horpos).style.visibility = 'visible';	
     		 		}
     		 		break;
     		 	case 37:
     		 		if(horpos > 1)
      		 	{
					verpos=0;
					document.getElementById("portdescsub"+horpos).style.visibility = 'hidden';
      		 		$('.imgslide').animate({marginLeft:"+=642px"}, 1000, 'swing',function(){
      		 			loadimages(horpos);
      		 			$('#port' + horpos).animate({marginTop:"0px"}, 1000, 'swing');
      		 			
      		 		});
					//remove play button if leaving a video item
					if(document.getElementById("playbutton"+horpos)){
                        document.getElementById("playbutton"+horpos).style.visibility = 'hidden';
					}
					//position old portfolio item back to top item
      		 		
      		 		$('#portnavleft').find('.selected').parents("ul:first").removeClass('active');
      		 		$('#portnavleft').find('.selected').removeClass("selected");
      		 		horpos--;
					//clear the video player div
     		 		$('#videoplayer').text('');
					//make play button visible if it is a video item
					if(document.getElementById("playbutton"+horpos)){
                        document.getElementById("playbutton"+horpos).style.visibility = 'visible';
					}
      		 		//select new portfolio item in grid nav
      		 		$('#col' + horpos + ' ul li:first a').addClass('selected');      		 	
      		 		$('#col' + horpos + ' ul').addClass('active');
 					document.getElementById("portdescsub"+horpos).style.visibility = 'visible';
 					
 					//loadimages(horpos);
 					
      		 	}
     		 	break;
     		 	
     		 	
				}
				
      		 	return false;
      		 });
      		 
      		 
      		 
      		 
      		 
      		 
      		 
      		 
      		 	/*******************UP ARROW********************************************/
      		  $('#uparrow a').click(function(){
			   //check to see if current portfolio item is not the first one
      		 	if(verpos >0)
      		 	{
      		 		$('#port' + horpos).animate({marginTop:"+=484px"}, 1000, 'swing');
					$('#col' + horpos + ' ul li:eq(' + verpos + ') a img').removeClass("selected");
					verpos--;
					$('#col' + horpos + ' ul li:eq(' + verpos + ') a img').addClass("selected");
				}
      		 	return false;
      		 });
      		 
      		 
      		 /*******************DOWN ARROW**********************************************/
      		 $('#downarrow a').click(function(){
			   //check to see if current portfolio item is the last one
	           if($('#col' + horpos + ' ul li:eq(' + verpos + ')').is(":last-child")==false){
      		 		$('#port' + horpos).animate({marginTop:"-=484px"}, 1000, 'swing');
      		 		$('#portnavleft').find('.selected').removeClass("selected");
					verpos++;
					$('#col' + horpos + ' ul li:eq(' + verpos + ') a img').addClass("selected");
      		 		
			   }
      		 	return false;
      		 });
      		 
      		 /******************PEOPLE PAGE ACCORDION***********************************/
      		 $('#people').accordion({ 
    			active: true, 
    			header: '.head',
  				alwaysOpen: false, 
    			navigation: true, 
    			event: 'click', 
   				autoheight: true,
   				fillspace: true,
  				animated:'easeslide'
			});
			
			 /******************NEWS PAGE ACCORDION***********************************/
      		 $('#news').accordion({ 
    			active: true, 
    			header: '#expander',
    			//icons: {'header': '../images/plus.gif', 'headerSelected:' '../images/plus.gif'},
    			//icons: {header: 'plus_button', headerSelected: 'plus_button'},
    			
  				alwaysOpen: false, 
    			navigation: true, 
    			event: 'click', 
   				autoheight: true,
   				fillspace: true,
  				animated:'easeslide'
			});

			imagePreview();
			      		 
  		});
 
			 /******************LOAD SECONDARY IMAGES VIA AJAX CALL***********************************/
 function loadimages(hor)
 {
 	var id = $('#port' + hor).attr('class');
 	
 	
 	$.ajax({
 		url:"http://www.cubiccreative.com/portfolio_img_ajax.asp",
 		type:"POST",
 		data:"ident=" + id,
 		success: function(html){
 		
 			$('#port' + hor).append(html);
            
 		}
 	
 	
 	})   
 }
			 /******************DISPLAY PREVIEW IMAGES***********************************/

 this.imagePreview = function(){
	/* CONFIG */
		
		xOffset = 130;
		yOffset = 0;
		
		// these 2 variable determine popup's distance from the cursor
		// you might want to adjust to get the right result
		
	/* END CONFIG */
	$("#portnavleft div ul").find(" li:first a").hover(function(e){
		this.t = this.title;
		this.title = "";	
		var c = (this.t != "") ? "<br/>" + this.t : "";
		$("body").append("<div id='preview'><img src='"+ this.href +"' alt='Image preview' width='160' height='120' />"+ c +"</div>");								 
		$("#preview")
			.css("postion","relative")
			.css("top","390px")
			.css("left",(e.pageX + yOffset) + "px")
			.css("zIndex", 2000)
			.fadeIn("fast");						
    },
	function(){
		this.title = this.t;	
		$("#preview").remove();
    });	
	$("a.preview").mousemove(function(e){
		$("#preview")
			.css("top","390px")
			.css("left",(e.pageX + yOffset) + "px");
	});			
};
 
			 /******************SHOW VIDEO ITEMS***********************************/
 function getvideo(vid, vidhorpos)
 {
    document.getElementById("playbutton"+vidhorpos).style.visibility = 'hidden';
    $.ajax({
 		url:"http://www.cubiccreative.com/getvideo.asp",
 		type:"POST",
 		data:"vid=" + vid,
 		success: function(html2){
 			$('#videoplayer').append(html2);
 		}
 	
 	
 	})   
 }