//template.js
//Javascript for Ideas For Deck Designs
//Kaela Roy, 2009


$(document).ready(function(){

//###############################################
//            DROP DOWN NAVIGATION
//###############################################

// Folowing code modified from www.noupe.com "sexy dropdown menu"

	$("ul.subnav").hide();
	
	$("ul.subnav").parent().addClass("dropBG");

	$("ul.subnav").parent().hover(function() { 				//hovers to trigger the dropdown
		//Following events are applied to the subnav itself (moving subnav up and down)
		$(this).find("ul.subnav").slideDown('fast').show();	//Drop down the subnav on hover

		$(this).hover(function() {
		}, function(){
			$(this).find("ul.subnav").slideUp('fast');		//When the mouse hovers out of the subnav, move it back up
		});

		//Following events are applied to the trigger (Hover events for the trigger)
		}).hover(function() {
			$(this).addClass("subhover"); 					//On hover over, add class "subhover"
		}, function(){										//On Hover Out
			$(this).removeClass("subhover"); 				//On hover out, remove class "subhover"
	});

	
//###############################################
//           RANDOMIZE NAV IMAGE
//###############################################

	var bgImageTotal=15;										//change depending on hoe many images you have
	var randomNumber = (Math.round(Math.random()*(bgImageTotal-1))+1);	//create a random number
	var imgPath = ('http://www.ideasfordeckdesigns.com/img-style/bg_' + randomNumber + '.jpg');					//create the random image path

	$('#titanLogo').css( {background: "url(" + imgPath + ")"});			//set the bg image!
	

//###############################################
//           FIND A BUILDER BUTTON
//###############################################

//the following lines are added into the header so that it only shows if JS works
if($("#findBuilderForm").length > 0){
document.getElementById('findBuilderForm').innerHTML = '<div id="findBuilderOpen"></div><fieldset><form name="form2" method="get" action="http://www.ideasfordeckdesigns.com/decks/locator2/results_list.php" onSubmit="return validatezip()"><label>Enter Zip Code:</label><input type="text" name="zip" size="8" maxlength="7" value="" /><br /><input type="checkbox" name="showsurrounding" value="1" checked />Search within<select name="distance"><option value="10" selected>10 miles</option><option value="25">25 miles</option><option value="50">50 miles</option><option value="100">100 miles</option><option value="250">250 miles</option></select><br /><input name="zipsearch" type="submit" id="zipsearch" value="Find Builders" /></form><p>To learn more about our <br /><strong>Builders Database</strong>, <a href="deck-builders.html">click here</a>!</p></fieldset><input class="closeit" type="submit" value="close" />';
}
	$("#findBuilderOpen").click(function(){					//When clicked, slide out
		$("#findBuilderForm").animate({width: "360px"}, 450);
	});

	$('input.closeit').click(function(){					//When clicked, slide back in.
		$("#findBuilderForm").animate({width: "139px"}, 450);
	});

		
		
//###############################################
//                News Ticker
//###############################################

if( $("#info").length > 0 ){// if there isn't the info div, don't run!!
//############################################################

$("#info").css({ height: "20px" });
var infoDiv = document.getElementById("info");
var label = infoDiv.getElementsByTagName("p");

//THIS CREATES THE TINY BUTTON TO CLOSE AND OPEN THE NEWS TICKER
$("#info").after('<div id="infoButton" title="Click to close News Headlines"></div>');
var infoButtonDiv = document.getElementById("infoButton");

var fullTimer = 0;
checkCookie();


if( infoDiv.hide ){
	$("#infoButton").addClass("itsClosed");
}else{
	$("#infoButton").addClass("itsOpen");
}

//############################################################

function slideItUp(){										//for closing the news bar
	$("#infoButton").removeClass("itsOpen"); 				
	
	$("#info").slideUp("slow", function(){
		$("#info").hide();
	});
		
	$("#infoButton").addClass("itsClosed");

	infoButtonDiv.title = "Click to view News Headlines";
	
	if(label.length == 1){ 									//if "fade ticker" is running
		clearInterval(intval);								//stop running it
	}

	$("#infoButton").animate({top: "199px"}, "slow");		//animate the closer button
	$("#infoButton").css({background: "url(http://www.ideasfordeckdesigns.com/img-style/newsDown.png)"});
}

//############################################################


$("#infoButton").click(function(){							//When clicked...
								
	if( infoButtonDiv.className == "itsOpen" ){
		
		slideItUp();
		
		if(fullTimer != 0){
			clearTimeout(fullTimer);						//stop 30s timer from closing #info
			fullTimer = 0;
		}
		
		/*clearTimeout(intval);
		intval = 0;*/
		
	}else{
		
		$(this).removeClass("itsClosed"); 					//its no longer closed, so remove class
	
		$("#info").slideDown("slow");						//slide div down...
		$("#info").show();									//... and show it!
		
		$(this).addClass("itsOpen");						//its now open, so add class!
		
		infoButtonDiv.title = "Click to close News Headlines";
		
/*		if( labelLength > 1){ 						//if the fade ticker timer should be running
			intval = setInterval(function(){				//start it up
			
				infoDiv.innerHTML = "<p>" + newsItem[a] + "</p>";	//replace the newsItem with next in array
				$(label[0]).hide();							//immediately hide the paragraph
			
				$(label[0]).fadeIn("slow", function () {});	//fade it in all pretty-like
				a++;										//for next array item
			
				if(a>=labelLength){
					a=0;									//if at the end of the array, go back to first
				}
				
			}, 7000);
		}//closes if(labelLength > 1)*/
		
		$("#infoButton").animate({top: "230px"}, "slow");
		$("#infoButton").css({background: "url(http://www.ideasfordeckdesigns.com/img-style/newsUp.png)"});

	}//closes else for if(infoButtonDiv.className == "itsOpen")
	
});

//############################################################

//THIS MAKES THE NEWS TICKER TICK
if(label.length == 1){ 										//if there is only one news item...
	
	$("#info").children("p").marquee();						//well that was easy... 
	//jQuery marquee add on code has been copied and pasted in the main jQuery file)
	
}else{														//if there are more news items
	
	var a=0;
	var b=0;
	var labelLength = label.length;
	var newsItem = new Array();
	
	for(b=0; b<label.length; b++){
		newsItem.push(label[b].innerHTML);
	}
	
	infoDiv.innerHTML = "<p>" + newsItem[a] + "</p>";		//make sure first news item shows right away
	a++;													//for next array item
	
	var intval = ""; 										//this is the timer for the fading ticker
	
	intval = setInterval(function(){
	
		infoDiv.innerHTML = "<p>" + newsItem[a] + "</p>";	//replace the newsItem with next in array
		$(label[0]).hide();									//immediately hide the paragraph
	
		$(label[0]).fadeIn("slow", function () {});			//fade it in all pretty-like
		a++;												//for next array item
	
		if(a>=labelLength){
			a=0;											//if at the end of the array, go back to first
		}
		
	}, 7000);
}



//############################################################


}//closes giant if so that it don't run if there isn't the info div
//############################################################

//COOKIES YUM! setting the cookie to keep the newsbar closed sitewide
function getCookie(c_name)
{
if (document.cookie.length>0)
  {
  c_start=document.cookie.indexOf(c_name + "=");
  if (c_start!=-1)
    {
    c_start=c_start + c_name.length+1;
    c_end=document.cookie.indexOf(";",c_start);
    if (c_end==-1) c_end=document.cookie.length;
    return unescape(document.cookie.substring(c_start,c_end));
    }
  }
return "";
}

function setCookie(c_name,value,expiredays){
	var exdate=new Date();
	exdate.setDate(exdate.getDate()+expiredays);
	document.cookie=c_name+ "=" +escape(value)+
	((expiredays==null) ? "" : ";expires="+exdate.toGMTString());
}

function checkCookie(){
	newsDisplay=getCookie('newsDisplay');
	if (newsDisplay!=null && newsDisplay!=""){
		if(newsDisplay == "no"){
			changeInfo();
		}
	}else{
		newsDisplay="no" ;									//sets the cookie variable
		setCookie('newsDisplay',newsDisplay,1);				//sets the cookie
		
	//slide up and remove #info after 30 seconds if cookie is not set
				
		fullTimer = setTimeout(function(){
			slideItUp();
		}, 30000);
		
	}
}

function changeInfo(){
	$("#infoButton").css({top: "199px", background: "url(http://www.ideasfordeckdesigns.com/img-style/newsDown.png)"});
	$("#infoButton").removeClass("itsOpen");
	$("#infoButton").addClass("itsClosed");
	$("#info").slideUp(1, function () {
		$("#info").hide();
	});
}

	
//$$$$$$$$$$$$$
});//THIS CLOSES EVERYTHING, LEAVE IT ALONE