/*  For Olympic Roofing
    uses jQuery
	Ken Morgan 2011   */
	
// ***problem**** url in doc ready can't be localized.
$(document).ready(function () {
	// start slideshow on home page
	slideStart();
	//used for contact us and logon
	modalWindow();
	//expands text on home page
	adjustPromoText();
	//setup clicking on logo with ctrl Key goes to CMS
	if (document.getElementById('o_r_logo')) {
		var logonElement = document.getElementById('o_r_logo');
		logonElement.onclick	=	startLogon;
		if (logonElement.captureEvents) { logonElement.captureEvents(Event.CLICK); }
	} // http://www.quirksmode.org/js/introevents.html
	
	// change div ID (add a '2') when javascript active to not have #WCB:hover working at same time (needed when no js)
	$("#COR").attr("id", "COR2");
	$("#comply").attr("id", "comply2");
	$("#TD").attr("id", "TD2");
	$("#contractor1").attr("id", "contractor2");	
	
    //change text in TD popup when js active
	$('#dumpIfJs').html('');

	//hide or show COR div -- info about COR WorkSafe BC program
	$("#WCB").click(function () {
		$('#COR2').show("slow"); // sets display:"block" and expands the div from point of origon
    });
	$("#COR2").click(function () {
		$('#COR2').hide("slow"); //  sets display:"none" and collapses the div to point of origon
    });	
	$("#COR2").mouseleave(function () {
		$('#COR2').hide("slow"); //  sets display:"none" and collapses the div to point of origon
    });
	
	//hide or show compy div -- info about the ComplyWorks program
	$("#comply_a").click(function () {
		$('#comply2').show("slow"); //  sets display:"block" and expands the div from point of origon
    });	
	$("#comply2").click(function () {
		$('#comply2').hide("slow"); //  sets display:"none" and collapses the div to point of origon
    });	
	$("#comply2").mouseleave(function () {
		$('#comply2').hide("slow"); //  sets display:"none" and collapses the div to point of origon
    });

	//hide or show TD div -- info about the TD Bank loan program
	$("#TD_a").click(function () {
		$('#TD2').show("slow"); //  sets display:"block" and expands the div from point of origon
    });	
	$("#TD2").click(function () {
		$('#TD2').hide("slow"); //  sets display:"none" and collapses the div to point of origon
    });	
	$("#TD2").mouseleave(function () {
		$('#TD2').hide("slow"); //  sets display:"none" and collapses the div to point of origon
    });
	
	//hide or show Contractor div -- info about the TD Bank loan program
	$("#contractor").click(function () {
		$('#contractor2').show("slow"); //  sets display:"block" and expands the div from point of origon
    });	
	$("#contractor2").click(function () {
		$('#contractor2').hide("slow"); //  sets display:"none" and collapses the div to point of origon
    });	
	$("#contractor2").mouseleave(function () {
		$('#contractor2').hide("slow"); //  sets display:"none" and collapses the div to point of origon
    });	
	
	// set offset of background image to align with container div
	var backgroundWidth = document.body.clientWidth;
	var bgdOffset = Math.round(((backgroundWidth - 980) / 2) % 14);
	document.body.style.backgroundPosition = bgdOffset + 'px 0px';
	
});

//global var to allow slideshow to be turned off
var intervalID = 0; 

//start timing, then call the function below to show images		
function slideStart() {
	intervalID = setInterval("slideSwitch()", 5000);
	slideSwitch();
}
	
//animates the images shown at the top of the home page
function slideSwitch() {

	var $active = $('.slideshow  DIV.active');

	if ($active.length == 0) $active = $('.slideshow DIV:last');

	// use this to pull the divs in the order they appear in the markup
	var $next =  $active.next().length ? $active.next()
		: $('.slideshow DIV:first');

	$active.addClass('last-active');

	$next.css({opacity: 0.0})
		.addClass('active')
		.animate({opacity: 1.0}, 1000, function () {
			$active.removeClass('active last-active');
		});
}

function modalWindow() {
	//Grey out screen background for 'modal' window
	//http://www.queness.com/post/77/simple-jquery-modal-window-tutorial
	//Get the screen height and width
	if (document.getElementById('mask')) {
		var maskHeight = $(document).height();
		var maskWidth = $(document).width();
 
		//Set height and width of mask to fill up the whole screen
		$('#mask').css({'width':maskWidth,'height':maskHeight});
	 
		//transition effect    
		//$('#mask').fadeIn(1000);   
		$('#mask').fadeTo(0,0.90); 

		//Get the window height and width to center popup
		// var winH = $(window).height();
		// var winW = $(window).width();
			   
		//center the popup window 
		//$('#modalDiv').css('top',  winH/2-$('#modalDiv').height()/2);
		//$('#modalDiv').css('left', winW/2-$(id).width()/2);
	 
		//transition effect timing
		//$('#modalDiv').fadeIn(2000);
}}
 
function adjustPromoText() {
	//start by measuring the height of promo div.
	//keep growing line-height until  div#promo actually changes. Messy, but works :-)
	if (document.getElementById('promo')){
	
		var textContainer = document.getElementById('promo');
		var totalHeight =  textContainer.clientHeight;			
		var textHeight = $('#promo').css('line-height');
		var textSize = $('#promo').css('font-size');
		var marginSize = $('#promo > p').css('margin-bottom');
		
		 //remove text
		textHeight = textHeight.replace('px', '');
		textSize = textSize.replace('px', ''); 
		marginSize = marginSize.replace('px', ''); 
		//var totalHeight = ($('#promo').height());

		while (totalHeight == textContainer.clientHeight) {
		// after each change test height            
            textSize = parseFloat(textSize) + 2;
            $("#promo > P").css("font-size", (textSize + 'px'));
                if(totalHeight < textContainer.clientHeight) break; 

			marginSize = parseFloat(marginSize) + 14;
             $('#promo > p').css('margin-bottom', (marginSize + 'px'));
             $('#promo > p').last().css('margin-bottom', '5px');
                if(totalHeight < textContainer.clientHeight) break;
                    
//keeping the linespacing the same -- match the 14px background			
            //textHeight = parseFloat(textHeight) + parseFloat('1');
           // $("#promo > p").css("line-height", (textHeight + 'px'));

}}}

function startLogon(e) {

	if (!e) var e = window.event;
	//To find out whether the shift, control, or alt key was held during a key or mouse event, you can look at the shiftKey, ctrlKey, and altKey properties of the event object.
	if (e.ctrlKey) {//http://www.java2s.com/Tutorial/JavaScript/0300__Event/Iscontrolkeypressedduringthemouseclick.htm
	window.location.pathname = jsRoot + "ci2/index.php/logon/"; }}