/*
 *
 *  This javascript was written by Sam Walsh - 2009
 *  Walsh Design
 *  www.samwalsh.co.nz
 *  © Copyright 2009 Sam Walsh. 
 *
 */





/////// Career Map ////////

//Declaring Career Map Functions
//
//zoom in of a career name
function enlargeTextSize(cNum)
{
    document.getElementById(cNum).style.paddingBottom="0px";
    document.getElementById(cNum).style.paddingTop="0px";
    document.getElementById(cNum).style.fontSize="12px";
}
    //reset the size of a career name
    function resetTextSize(cNum)
    {
    document.getElementById(cNum).style.paddingBottom="1px";
    document.getElementById(cNum).style.paddingTop="1px";
    document.getElementById(cNum).style.fontSize="10px";
}
//'mask' out all other career map sections using opacity. The calculations on which sections to mask out are done in the variables section further down.
function mask(maskNum)
    {
        for (i in maskNum)
            {
                document.getElementById(maskNum[i]).style.MozOpacity=0.4;
                document.getElementById(maskNum[i]).style.opacity=0.4;
                document.getElementById(maskNum[i]).style.filter = 'alpha(opacity="40")';
        
            }
    }
    //make all the career map sections go back to their original opacity state.
    function unMask(maskNum)
        {
        for (i  in maskNum)
            {
                document.getElementById(maskNum[i]).style.MozOpacity=1;
                document.getElementById(maskNum[i]).style.opacity=1;
                document.getElementById(maskNum[i]).style.filter = 'alpha(opacity="100")';
            }
    }

//
//calculations of which cXX divs to hide if cMaskX is hovered over
function cMask1Text()
{
    for(k=7; k<=7; k++)
    {
        cMask1Array[(k-7)]=('c0'+k).toString();
    }
    for(k=9; k<=9; k++)
    {
        cMask1Array[(k-8)]=('c0'+k).toString();
    }
    for(k=10; k<=51; k++)
    {
        cMask1Array[(k-8)]=('c'+k).toString();
    }
    return cMask1Array;
}
    function cMask2Text()
    {
        //for numbers c01-c09
        for(k=1; k<=9; k++)
        {
            cMask2Array[(k-1)]=('c0'+k).toString();
        }
        //for numbers c10-c16
        for(k=10; k<=16; k++)
        {
            cMask2Array[(k-1)]=('c'+k).toString();
        }
        // for numbers c22-c51
        for(k=22; k<=51; k++)
        {
            cMask2Array[(k-1)]=('c'+k).toString();
        }
        return cMask2Array;
    }
    function cMask3Text()
    {
        //for numbers c01-c09
        for(k=1; k<=9; k++)
        {
            cMask3Array[(k-1)]=('c0'+k).toString();
        }
        //for numbers c10-c21
        for(k=10; k<=21; k++)
        {
            cMask3Array[(k-1)]=('c'+k).toString();
        }
        // for numbers c28-c51
        for(k=28; k<=51; k++)
        {
            cMask3Array[(k-1)]=('c'+k).toString();
        }
        return cMask3Array;
    }
    function cMask4Text()
    {
        //for numbers c01-c09
        for(k=1; k<=9; k++)
        {
            cMask4Array[(k-1)]=('c0'+k).toString();
        }
        //for numbers c10-c46
        for(k=10; k<=46; k++)
        {
            cMask4Array[(k-1)]=('c'+k).toString();
        }
        for(k=51; k<=51; k++)
        {
            cMask4Array[(k-1)]=('c'+k).toString();
        }
        return cMask4Array;
    }
    function cMask5Text()
    {
        //for numbers c01-c09
        for(k=1; k<=9; k++)
        {
            cMask5Array[(k-1)]=('c0'+k).toString();
        }
        //for numbers c10-c27
        for(k=10; k<=27; k++)
        {
            cMask5Array[(k-1)]=('c'+k).toString();
        }
        // for numbers c37-c50
        for(k=37; k<=50; k++)
        {
            cMask5Array[(k-1)]=('c'+k).toString();
        }
        return cMask5Array;
    }
    function cMask6Text()
    {
        //for numbers c01-c09
        for(k=1; k<=9; k++)
        {
            cMask6Array[(k-1)]=('c0'+k).toString();
        }
        //for numbers c10-c32
        for(k=10; k<=32; k++)
        {
            cMask6Array[(k-1)]=('c'+k).toString();
        }
        // for numbers c47-c51
        for(k=47; k<=51; k++)
        {
            cMask6Array[(k-1)]=('c'+k).toString();
        }
        return cMask6Array;
    }
    function cMask8Text()
    {
        //for numbers c01-c09
        for(k=1; k<=9; k++)
        {
            cMask8Array[(k-1)]=('c0'+k).toString();
        }
        //for numbers c10-c27
        for(k=10; k<=27; k++)
        {
            cMask8Array[(k-1)]=('c'+k).toString();
        }
        // for numbers c33-c50
        for(k=33; k<=50; k++)
        {
            cMask8Array[(k-1)]=('c'+k).toString();
        }
        return cMask8Array;
    }
    function cMask9Text()
    {
        //for numbers c01-c09
        for(k=1; k<=9; k++)
        {
            cMask9Array[(k-1)]=('c0'+k).toString();
        }
        //for numbers c10-c27
        for(k=10; k<=27; k++)
        {
            cMask9Array[(k-1)]=('c'+k).toString();
        }
        // for numbers c29-c32
        for(k=29; k<=32; k++)
        {
            cMask9Array[(k-1)]=('c'+k).toString();
        }
        // for numbers c41-c51
        for(k=41; k<=51; k++)
        {
            cMask9Array[(k-1)]=('c'+k).toString();
        }
        return cMask9Array;
    }
    function cMask10Text()
    {
        //for numbers c01-c09
        for(k=1; k<=9; k++)
        {
            cMask10Array[(k-1)]=('c0'+k).toString();
        }
        //for numbers c10-c36
        for(k=10; k<=36; k++)
        {
            cMask10Array[(k-1)]=('c'+k).toString();
        }
        // for numbers c47-c51
        for(k=47; k<=51; k++)
        {
            cMask10Array[(k-1)]=('c'+k).toString();
        }
        return cMask10Array;
    }
    function cMask11Text()
    {
    //for numbers c01-c06
    for(k=1; k<=6; k++)
    {
        cMask11Array[(k-1)]=('c0'+k).toString();
    }
    //for numbers c08
    for(k=8; k<=8; k++)
    {
        cMask11Array[(k-1)]=('c0'+k).toString();
    }
    //for numbers c17-c51
    for(k=17; k<=51; k++)
    {
        cMask11Array[(k-1)]=('c'+k).toString();
    }
    return cMask11Array;
}







//DECLARING ALL CAREER MAP VARIABLES THAT WILL BE USED...
//
//
//
//declare variables i and k for the 'for' loops used in the functions further up
var i, k;
//
// make some variable arrays for use in the functions further up
var cMask1Array = new Array();
var cMask2Array = new Array();
var cMask3Array = new Array();
var cMask4Array = new Array();
var cMask5Array = new Array();
var cMask6Array = new Array();
var cMask8Array = new Array();
var cMask9Array = new Array();
var cMask10Array = new Array();
var cMask11Array = new Array();
//
//make a variable version of the cMaskXText() functions.
var cMask1Function = cMask1Text();
var cMask2Function = cMask2Text();
var cMask3Function = cMask3Text();
var cMask4Function = cMask4Text();
var cMask5Function = cMask5Text();
var cMask6Function = cMask6Text();
var cMask8Function = cMask8Text();
var cMask9Function = cMask9Text();
var cMask10Function = cMask10Text();
var cMask11Function = cMask11Text();
//
//
//all the following 'noMaskX' variables and arrays are all the divs that should be 'masked'(opaque) when noMaskX is active - this is set in the HTML file for each cXX tag.
var noMask1 = new Array();
    noMask1[0]='num2';
    noMask1[1]='num3';
    noMask1[2]='num4';
    noMask1[3]='num5';
    noMask1[4]='num6';
    noMask1[5]='num7';
    noMask1[6]='num8';
    noMask1[7]='num9';
    noMask1[8]='num10';
    noMask1[9]='num11';
    
var noMask2 = new Array();
    noMask2[0]='num1';
    noMask2[1]='num3';
    noMask2[2]='num4';
    noMask2[3]='num5';
    noMask2[4]='num6';
    noMask2[5]='num7';
    noMask2[6]='num8';
    noMask2[7]='num9';
    noMask2[8]='num10';
    noMask2[9]='num11';
    
var noMask3 = new Array();
    noMask3[0]='num1';
    noMask3[1]='num2';
    noMask3[2]='num4';
    noMask3[3]='num5';
    noMask3[4]='num6';
    noMask3[5]='num7';
    noMask3[6]='num8';
    noMask3[7]='num9';
    noMask3[8]='num10';
    noMask3[9]='num11';

var noMask4 = new Array();
    noMask4[0]='num1';
    noMask4[1]='num2';
    noMask4[2]='num3';
    noMask4[3]='num5';
    noMask4[4]='num6';
    noMask4[5]='num7';
    noMask4[6]='num8';
    noMask4[7]='num9';
    noMask4[8]='num10';
    noMask4[9]='num11';
    
var noMask5 = new Array();
    noMask5[0]='num1';
    noMask5[1]='num2';
    noMask5[2]='num3';
    noMask5[3]='num4';
    noMask5[4]='num6';
    noMask5[5]='num7';
    noMask5[6]='num10';
    noMask5[7]='num11';
    
var noMask6 = new Array();
    noMask6[0]='num1';
    noMask6[1]='num2';
    noMask6[2]='num3';
    noMask6[3]='num4';
    noMask6[4]='num5';
    noMask6[5]='num8';
    noMask6[6]='num11';
   
var noMask8 = new Array();
    noMask8[0]='num1';
    noMask8[1]='num2';
    noMask8[2]='num3';
    noMask8[3]='num4';
    noMask8[4]='num6';
    noMask8[5]='num7';
    noMask8[6]='num9';
    noMask8[7]='num10';
    noMask8[8]='num11';

var noMask9 = new Array();
    noMask9[0]='num1';
    noMask9[1]='num2';
    noMask9[2]='num3';
    noMask9[3]='num4';
    noMask9[4]='num8';
    noMask9[5]='num10';
    noMask9[6]='num11';
    
var noMask10 = new Array();
    noMask10[0]='num1';
    noMask10[1]='num2';
    noMask10[2]='num3';
    noMask10[3]='num4';
    noMask10[4]='num5';
    noMask10[5]='num7';
    noMask10[6]='num8';
    noMask10[7]='num9';
    noMask10[8]='num11';

var noMask11 = new Array();
    noMask11[0]='num1';
    noMask11[1]='num2';
    noMask11[2]='num3';
    noMask11[3]='num4';
    noMask11[4]='num5';
    noMask11[5]='num6';
    noMask11[6]='num7';
    noMask11[7]='num8';
    noMask11[8]='num9';
    noMask11[9]='num10';
    
    
    
    
    
    
    
    
    
//////// Career PopUp Details Box ////////

//preload the career popUp images
var waves = new Image();
var detailsTabImage = new Image();
var vacanciesTabImage = new Image();
var skillsSprite = new Image();
var printButtonImage = new Image();
var dropShadowImage = new Image();
var closeButtonImage = new Image();
waves.src="/images/careerExpanded/waves.gif";
skillsSprite.src="/images/careerExpanded/skillsSprite.gif";
vacanciesTabImage.src="/images/careerExpanded/vacanciesTab.gif";
printButtonImage.src="/images/careerExpanded/printButton.gif";
dropShadowImage.src="/images/careerExpanded/dropShadowHalftone.gif";
detailsTabImage.src="/images/careerExpanded/detailsTab.gif";
closeButtonImage.src="/images/careerExpanded/closeButton.gif";


//show the vancancies listings when you click on the vacancies tab. It also makes the vacancies tab go to the top
function showVacancies(){
    document.getElementById('vacanciesDetails').style.zIndex="99"
    document.getElementById('vacanciesTab').style.zIndex="100"
    document.getElementById('jobDetails').style.display="none"
}
function showJobDetails(){
    document.getElementById('vacanciesDetails').style.zIndex="45"
    document.getElementById('vacanciesTab').style.zIndex="50"
    document.getElementById('jobDetails').style.display="block"
}
//hide all the divs set under the names 'elementId' and 'elementIdTwo'. This is mostly used to hide the career popup details box via the closebutton, fadeOut div, waves div & dropShadow div.
function collapseDiv(elementId, elementIdTwo)
    {
    document.getElementById(elementId).style.display="none";
    document.getElementById(elementIdTwo).style.display="none";
}
//show the description for each skill by displaying the appropriate rolloverDetailsX div. The process of figuring out what rolloverDetailsX divs to show and what to show in the divs is further down.
function rolloverSkills(elementId)
    {
        document.getElementById(elementId).style.display="block";
    }
    //hide the rolloverDetailsX.
    function rolloffSkills(elementId)
        {
            document.getElementById(elementId).style.display="none";
        }
        

var req;

//Liam,
//this function below grabs an XML document (from jobDescriptions/cXX.xml - where XX = the career name number e.g. c35.xml)
//it then processes it and grabs the information it needs out of the tags of the xml file. for instance the <title> tag has the career's title and this will go in the jobTitleText div.
//any tag which only has a fullstop (e.g.<salary>.</salary>) in it will be ignored using the script below... I have pointed out where I have used this technique later on in the code.
function popUpCareer(url) //'url' is the career-name's div-name e.g. c01 or... c49 etc. this is set using 'this.id'. The function is called on 'onmouseclick' for each cXX div.
{
    document.getElementById('fadeOut').style.display="block"; //show the opaque block-out over the career map.
    document.getElementById('preloadingImage').style.display = "block"; // then show the preloading animated gif while the following code gets the required information.
    // branch for native XMLHttpRequest object
    if (window.XMLHttpRequest) {
        xmlDoc = new XMLHttpRequest(); //everything BUT IE
        xmlDoc.onreadystatechange = processReqChange;
        xmlDoc.open("GET", '/careerMap/jobDescriptions/'+url+'.xml', true); //this is where to find the xml files. and this line actualyl does the grabbing of the XML file. //firefox, safari etc.
        xmlDoc.send(null);
    // branch for IE/Windows ActiveX version
    } else if (window.ActiveXObject) { //this is for the naive people that use IE. :)
        req = new ActiveXObject("Microsoft.XMLHTTP");
        if (req) {
            xmlDoc.onreadystatechange = processReqChange;
            xmlDoc.open("GET", '/careerMap/jobDescriptions/'+url+'.xml', true); //this is where to find the xml files. and this line actualyl does the grabbing of the XML file. //IE only
            xmlDoc.send();
        }
    }
}
function processReqChange() 
{
    if (xmlDoc.readyState == 4) { // only if req shows "complete"
        if (xmlDoc.status == 200) {// only if "OK"
            response  = xmlDoc.responseXML.documentElement;
            document.getElementById('jobTitleText').innerHTML='<b>'+response.getElementsByTagName("title")[0].childNodes[0].nodeValue+'<'+'/'+'b>'; //place all the <title> tag contents (from the xml file) in the 'jobTitleText' div
            document.getElementById('jobDetailsText').innerHTML=response.getElementsByTagName("description")[0].childNodes[0].nodeValue; //place all the <description> tag contents (from the xml file) in the 'jobDetailsText' div
            var salary = response.getElementsByTagName("salary")[0].childNodes[0].nodeValue; //grab all the <salary> tag contents (from the xml file). I'll use this information later.
            var occupation = response.getElementsByTagName("occupation")[0].childNodes[0].nodeValue; //grab all the <salary> tag contents (from the xml file). I'll use this information later.
		 	var print = response.getElementsByTagName("print")[0].childNodes[0].nodeValue; //grab all the <print> tag contents (from the xml file). I'll use this information later.
            var skill1Rollover = response.getElementsByTagName("skill1Rollover")[0].childNodes[0].nodeValue; //grab all the <skill1Rollover> tag contents (from the xml file). I'll use this information later.
            var skill2Rollover = response.getElementsByTagName("skill2Rollover")[0].childNodes[0].nodeValue; //and so forth...
            var skill3Rollover = response.getElementsByTagName("skill3Rollover")[0].childNodes[0].nodeValue; //
            var skill4Rollover = response.getElementsByTagName("skill4Rollover")[0].childNodes[0].nodeValue; //
            var skill5Rollover = response.getElementsByTagName("skill5Rollover")[0].childNodes[0].nodeValue; //
            var skill6Rollover = response.getElementsByTagName("skill6Rollover")[0].childNodes[0].nodeValue; //
            var skill7Rollover = response.getElementsByTagName("skill7Rollover")[0].childNodes[0].nodeValue; //
            var skill1Name = response.getElementsByTagName("skill1Name")[0].childNodes[0].nodeValue; //grab all the <skill1Name> tag contents (from the xml file). I'll use this information later.
            var skill2Name = response.getElementsByTagName("skill2Name")[0].childNodes[0].nodeValue; //and so forth...
            var skill3Name = response.getElementsByTagName("skill3Name")[0].childNodes[0].nodeValue; //
            var skill4Name = response.getElementsByTagName("skill4Name")[0].childNodes[0].nodeValue; //
            var skill5Name = response.getElementsByTagName("skill5Name")[0].childNodes[0].nodeValue; //
            var skill6Name = response.getElementsByTagName("skill6Name")[0].childNodes[0].nodeValue; //
            var skill7Name = response.getElementsByTagName("skill7Name")[0].childNodes[0].nodeValue; //
            var skillList = " "; // create the skill1List variable. I'll use this later.
            
			
			document.getElementById('jobSalaryValue').style.display="none"; // make the jobSalaryValue div hidden. I'll figure out later whether or not it should be shown, dependant on what information I grab from the <salary> xml tag.
        
        if (skill1Rollover != '.') //as long as the <skillXRollover> tag doesn't just have '.' inside it, do the following... ('.' is basically my way of saying that there doesn't need to be any information in there ... its empty. If the tag is left empty, the browser has a a good cry and doesn't end up showing the career information)
        {
          document.getElementById('rolloverDetails1').innerHTML=skill1Rollover; //put the rollover description that I grabbed from the <skillXRollover> xml tag, into the rolloverDetails1 div.
          // make a div with the right image to match the skill type. the image is a sprite and the div's css properties tells the image inside how far over it should be shifted to show the right icon.
          skillList += '<div id="'+skill1Name+'" onMouseOver="rolloverSkills(\'rolloverDetails1\')" onMouseOut="rolloffSkills(\'rolloverDetails1\')"><img src="/images/careerExpanded/skillsSprite.gif" alt=""/></div>';
        }
        if (skill2Rollover != '.')
        {
          document.getElementById('rolloverDetails2').innerHTML=skill2Rollover;
          skillList += '<div id="'+skill2Name+'" onMouseOver="rolloverSkills(\'rolloverDetails2\')" onMouseOut="rolloffSkills(\'rolloverDetails2\')"><img src="/images/careerExpanded/skillsSprite.gif" alt=""/></div>';
        }
        if (skill3Rollover != '.')
        {
          document.getElementById('rolloverDetails3').innerHTML=skill3Rollover;
          skillList += '<div id="'+skill3Name+'" onMouseOver="rolloverSkills(\'rolloverDetails3\')" onMouseOut="rolloffSkills(\'rolloverDetails3\')"><img src="/images/careerExpanded/skillsSprite.gif" alt=""/></div>';
        }
        if (skill4Rollover != '.')
        {
          document.getElementById('rolloverDetails4').innerHTML=skill4Rollover;
          skillList += '<div id="'+skill4Name+'" onMouseOver="rolloverSkills(\'rolloverDetails4\')" onMouseOut="rolloffSkills(\'rolloverDetails4\')"><img src="/images/careerExpanded/skillsSprite.gif" alt=""/></div>';
        }
        if (skill5Rollover != '.')
        {
          document.getElementById('rolloverDetails5').innerHTML=skill5Rollover;
          skillList += '<div id="'+skill5Name+'" onMouseOver="rolloverSkills(\'rolloverDetails5\')" onMouseOut="rolloffSkills(\'rolloverDetails5\')"><img src="/images/careerExpanded/skillsSprite.gif" alt=""/></div>';
        }
        if (skill6Rollover != '.')
        {
          document.getElementById('rolloverDetails6').innerHTML=skill6Rollover;
          skillList += '<div id="'+skill6Name+'" onMouseOver="rolloverSkills(\'rolloverDetails6\')" onMouseOut="rolloffSkills(\'rolloverDetails6\')"><img src="/images/careerExpanded/skillsSprite.gif" alt=""/></div>';
        }
        if (skill7Rollover != '.')
        {
          document.getElementById('rolloverDetails7').innerHTML=skill7Rollover;
          skillList += '<div id="'+skill7Name+'" onMouseOver="rolloverSkills(\'rolloverDetails7\')" onMouseOut="rolloffSkills(\'rolloverDetails7\')"><img src="/images/careerExpanded/skillsSprite.gif" alt=""/></div>';
        }
        
        document.getElementById('jobSkillList').innerHTML=skillList;
        if (salary !='.') // if the <salary> tag information that I grabbed earlier on doesn't just have '.' then do the following... ('.' basically just means that the tag is empty/there is no salary value.)
        {
        document.getElementById('jobSalaryValue').style.display="block"; //show the jobSalaryValue div which will display the following info....
        document.getElementById('jobSalaryValue').innerHTML=salary; //this is the information I want to go into the jobSalaryValue div.
        }
		
        if (occupation !='.') 
        {
        document.getElementById('vacanciesListings').innerHTML='<iframe src="http://www.rwr.net.au/hot-jobs/feed/?position=' + escape(occupation) + '" style="border:none; width:375px; height:250px;" scrolling="auto"  frameborder="0"></iframe>';
		
		
        }		
        document.getElementById('printThisText').innerHTML= '<a href="/careerMap/'+print+'">Print this Career Path</a>' //make a div with a link to the printable version of the career details. the link is found in the <print> tag of the xml file that I grabbed.
        document.getElementById('printThisImage').innerHTML= '<a href="/careerMap/'+print+'"><img src="/images/careerExpanded/printButton.gif" /></a>' //do the same as above, but with a picture instead of text.
        
        document.getElementById('careerExpanded').style.display="block"; //now that everything is loaded and figured out, show all the career details by setting the careerExpanded div to 'display="block"'
        document.getElementById('preloadingImage').style.display="none"; //and hide the preloadingImage div so that when I close the careerExpanded div (using the [X] button OR clicking outside the box), the preloader image isn't still there.
        showJobDetails();
        } else {
            alert("There was a problem retrieving the XML data:\n" + xmlDoc.statusText);
        }
        
    }
}