﻿

var $MSMCareerMatchesJQuery = jQuery.noConflict(true);

$MSMCareerMatchesJQuery.fn.exists = function() { return ($MSMCareerMatchesJQuery(this).length > 0); }

$MSMCareerMatchesJQuery.fn.openWin = function() { 
        var msmKeyword = $MSMCareerMatchesJQuery(this).val(); 
        if (msmKeyword == 'Enter your current or previous Job.') { msmKeyword = ''; }
        var msmUrl = 'http://www.myskillsmyfuture.org/msmWidget.aspx?keyword=' + msmKeyword;
        window.open(msmUrl, 'mySkillsmyFuture', 'height=800, width=1000 , top=100, left=300, resizable=yes, scrollbars=yes, toolbar=yes, status=yes, menubar=yes');
      }

$MSMCareerMatchesJQuery(document).ready(function() {


    if ($MSMCareerMatchesJQuery("<head>").exists()) {
        // Load css dynamically into the head tag
        $MSMCareerMatchesJQuery("<link>").appendTo('head').attr({
            rel: 'stylesheet',
            type: 'text/css',
            href: 'http://www.myskillsmyfuture.org/widget/css/msmCareerMatch.css'
        });
    } else if ($MSMCareerMatchesJQuery("<body>").exists()) {
        // Load css dynamically into the body tag
        $MSMCareerMatchesJQuery("<link>").appendTo('body').attr({
            rel: 'stylesheet',
            type: 'text/css',
            href: 'http://www.myskillsmyfuture.org/widget/css/msmCareerMatch.css'
        });
    } else {
        alert("cannot load the appropriate resources !");
        return;
    }


    //build the form
    if ($MSMCareerMatchesJQuery("#divMSMCareerMatchesLandscape").exists()) {
        $MSMCareerMatchesJQuery("#divMSMCareerMatchesLandscape").html("\
            <div class='msmlogo' title='Go to mySkills myFuture.org'><img src='http://www.myskillsmyfuture.org/widget/images/MSMWidget_Logo.png' align=center></div> \
           <div id='divLandscape'><br /><br /> \
             <div align='center'><input id='MSMtxtCareerKeywordLandscape' type='text' MaxLength='100' value='Enter your current or previous Job.'/> <br />\
             <button type='button' value='' id='MSMbtnSubmitKeywordLandscape'></button></div>\
           </div>");
    }

    if ($MSMCareerMatchesJQuery("#divMSMCareerMatchesPortrait").exists()) {
        $MSMCareerMatchesJQuery("#divMSMCareerMatchesPortrait").html("\
             <div class='msmlogo' title='Go to mySkills myFuture.org'><img src='http://www.myskillsmyfuture.org/widget/images/MSMWidget_Logo.png' align=center></div> \
           <div id='divPortrait'><br /><br /><br /><br /> \
            <div style='padding-left:32px;'><span id='msmSubTitle'>Enter your current or<br /> previous Job.</span><br> \
            <input id='MSMtxtCareerKeywordPortrait' type='text' MaxLength='100' value=' '/> </div><br /> \
           <div align='center'><button type='button' value='' id='MSMbtnSubmitKeywordPortrait'></button></div>\
        </div>");
    }
    if (($MSMCareerMatchesJQuery("#divMSMCareerMatchesPortrait").length == 0) && ($MSMCareerMatchesJQuery("#divMSMCareerMatchesLandscape").length == 0)) {
        alert("MSM div tag is missing. Please add the appropriate div to your html body tag !");
    }

    $MSMCareerMatchesJQuery("#MSMbtnSubmitKeywordPortrait").click(function() {
        $MSMCareerMatchesJQuery("#MSMtxtCareerKeywordPortrait").openWin();
    });

    $MSMCareerMatchesJQuery("#MSMbtnSubmitKeywordLandscape").click(function() {
         $MSMCareerMatchesJQuery("#MSMtxtCareerKeywordLandscape").openWin();
    });

	$MSMCareerMatchesJQuery(".msmlogo").click(function() {
	    $MSMCareerMatchesJQuery(".msmlogo").openWin();
	});
	
    $MSMCareerMatchesJQuery("#MSMtxtCareerKeywordLandscape").click(function() {
        $MSMCareerMatchesJQuery("#MSMtxtCareerKeywordLandscape").val('');
    });
    
    
});





