//var baseUrl="http://dev.insideswf.com/Sutra/";
//var baseUrl="http://localhost/sutrajobs/API/sutradhar/";
var baseUrl="http://www.sutrajobs.com/API/sutradhar/";


function SutraJobWidget()
{
}

SutraJobWidget.prototype =
{
    SHOW_COLUMNS: null,
    CURRENT_JOB_PAGE: 1,
    CURRENT_COMPANY_PAGE: 1,
    JOB_PER_PAGE: 4,
    COMPANY_PER_PAGE: 1,
    MAX_JOB_COUNT: 1,
    MAX_JOB_PAGE: 1,
    MAX_COMPANY_COUNT: 1,
    MAX_COMPANY_PAGE: 1,
    WIDGET_ID: 1,
    COMPANY_ID_LIST: [],
    APP_ID: "",
    URL : document.location.href,
    //    APP_THEME: "Orange",
    //    SEARCH: "",

    // Load YUI
    LoadLibrary: function(compList,appId)
    {
        var compList = this.COMPANY_ID_LIST;
        var widgetId = this.WIDGET_ID;
        var restCall = this.RestCall;
        var appId = this.APP_ID;
        var url = this.URL;
        var role = this.ROLE;

        this.WriteBasePanel();

        var SutraLoader = new YAHOO.util.YUILoader(
        {
            require: ["connection", "animation"],
            loadOptional: true,
            onSuccess: function()
            {
                //                var query = (search.length > 0 ? "s=" + search : "cl=" + companyList.join(","));
                var query = ("cl=" + compList.join(",") + "&blId=" + appId + "&re=" + url + "&ro=" + role);
                //                restCall(+ baseUrl + "/GetJobs.php?" + query + "&callback=sutraWdgObj" + widgetId + ".ShowJobs");
                restCall("http://www.sutrajobs.com/API/sutradhar/GetJobs.php?" + query + "&callback=sutraWdgObj" + widgetId + ".ShowJobs");
                restCall("http://www.sutrajobs.com/API/sutradhar/GetComp.php?" + query + "&callback=sutraWdgObj" + widgetId + ".ShowCompany");
//                restCall("http://localhost/sutrajobs/API/sutradhar/GetJobs.php?" + query + "&callback=sutraWdgObj" + widgetId + ".ShowJobs");
//                restCall("http://localhost/sutrajobs/API/sutradhar/GetComp.php?" + query + "&callback=sutraWdgObj" + widgetId + ".ShowCompany");
            }
        });

        SutraLoader.insert();
    },

WriteBasePanel: function()
    {
        document.write(
        "<style>\n\
a img{padding:0;background:transparent;margin:0;}\n\
input{width:90%;height:22px;text-align:left;margin:0;padding:2px 3px;font-weight:400;}    \n\
</style>"+
            "<div id=\"quicksutra\" style=\"height:300px;width:250px;margin:0px;padding:0px;\">"+
                "<div id=\"mainContainer_" + this.WIDGET_ID + "\" style=\"background:transparent url(" + baseUrl + "/image/WdgBg250_2.png) no-repeat scroll 0 0;border:0 solid #128AB9;height:303px;width:253px;padding:0px;margin:0px;\" alt=\"\" />"+
                    "<div id=\"nav_" + this.WIDGET_ID + "\" style=\"z-index:10; height:20px; position:relative;padding:3px 0 0 0;margin:0px;\">"+
                        "<div style=\"margin-top:4px; width:249px; height:20px; border:0px solid red; float:left; _margin-left: -4px! important;padding:0px;margin:0px;\">"+
                            "<div id=\"JobTab_" + this.WIDGET_ID + "\" onclick=\"sutraWdgObj" + this.WIDGET_ID + ".showMainTab(1)\" style=\"background:transparent url(" + baseUrl + "/image/CompTab.png) no-repeat scroll 0 0;color:#0099CC;cursor:pointer;float:left;font-family:Arial;font-size:12px;font-weight:bold;height:20px;margin:0 0 0 4px;padding:5px 0 0 0;text-align:center;width:100px;z-index:11;\">JOBS</div>"+
                            "<div id=\"CompTab_" + this.WIDGET_ID + "\" onclick=\"sutraWdgObj" + this.WIDGET_ID + ".showMainTab(2)\" style=\"background:transparent url(" + baseUrl + "/image/CompTabInactive.png) no-repeat scroll 0 0;color:#0099CC;cursor:pointer;float:left;font-family:Arial;font-size:12px;font-weight:bold;height:20px;margin:0 0 0 5px;padding:3px 0 0 0;text-align:center;top:0;width:100px;z-index:11;\">COMPANIES</div>"+
                        "</div>"+
                    "</div>"+
                    "<div id=\"demo_" + this.WIDGET_ID + "\" style=\"height:290px;margin-top:0px;position:relative;padding:0px;margin:0px;\">"+
                        "<div id=\"PanelContainer_" + this.WIDGET_ID + "\" style=\"color:#2587b8;background-color:#F8FDFF;border:0px solid red;float:left;height:233px;margin-left:4px;margin-top:0;padding:0px;width:242px;z-index:100;font-family:Times New Roman,serif;font-size:16px;font-size-adjust:none;font-style:normal;font-variant:normal;font-weight:normal;line-height:1.231;\">"+
                            "<div id=\"tabJob_" + this.WIDGET_ID + "\" style=\"position:relative;width;242px;overflow:hidden;margin:0px;padding:0px;\">"+
                                "<div style=\"padding:20px 0px;text-align:center;\">Loading... Please wait...</div>"+
                                "<center><img src='" + baseUrl + "/image/loader.gif' alt='Please wait...'></center>"+
//                                "<div style=\"padding:20px 0px;text-align:center;\">We have upgraded the QuickSutra widget. Please sign up at <a onmouseover=\"this.style.background='transparent';\" href=\"http://sutrajobs.com/apps\" target=\"_blank\" style=\"text-decoration:none \">QuickSutra.com</a> and generate a new widget.<br><br><br>For any queries feel free to write to us at <a onmouseover=\"this.style.background='transparent';\" target=\"_blank\" style=\"text-decoration:none \" href=\"mailto:support@sutrajobs.com\">support@sutrajobs.com</a></div>"+
                            "</div>"+
                            "<div id=\"tabComp_" + this.WIDGET_ID + "\" style=\"display:none;position:relative;width;242px;overflow:hidden;margin:0px;padding:0px;\">"+
                                "<div style=\"padding:20px 0px;text-align:center;\">Loading... Please wait...</div>"+
                                "<center><img src='src='" + baseUrl + "/image/loader.gif' alt='Please wait...'><center>"+
//                                "<div style=\"padding:20px 0px;text-align:center;\">We have upgraded the QuickSutra widget. Please sign up at <a onmouseover=\"this.style.background='transparent';\" href=\"http://sutrajobs.com/apps\" target=\"_blank\" style=\"text-decoration:none \">QuickSutra.com</a> and generate a new widget.<br><br><br>For any queries feel free to write to us at <a onmouseover=\"this.style.background='transparent';\" target=\"_blank\" style=\"text-decoration:none \" href=\"mailto:support@sutrajobs.com\">support@sutrajobs.com</a></div>"+
                            "</div>"+
                        "</div>"+
                        "<div style=\"float:left;margin:15px 0 0 10px;padding:0px;font-family: Times New Roman,serif; font-size: 16px; font-size-adjust: none; font-style: normal; font-variant: normal; font-weight: normal; line-height: 1.231;\"><a onmouseover=\"this.style.background='transparent';\" href=\"http://sutrajobs.com/apps\" target=\"_blank\" style=\"text-decoration:none; color:#0099CC;margin:0px;padding:0px\">"+
                        "<img style=\"background:transparent;border:none;margin:0px;padding:0px;\" src=\""+baseUrl+"image/grab.gif\"></a></div>"+
                        "<div style=\"float:right;margin:5px 10px 0 0;padding:0px;font-family: Times New Roman,serif; font-size: 12px; font-size-adjust: none; font-style: normal; font-variant: normal; font-weight: normal; line-height: 1.231;\"><span style=\"position: absolute; color: #0099CC; right: 90px; font-family: arial; font-size: 10px; width: 60px; margin:13px 0 0 0;padding:0px;text-decoration:none;\">powered by</span>"+
                            "<a onmouseover=\"this.style.background='transparent';\" href=\"http://sutrajobs.com\" target=\"_blank\" style=\"text-decoration:none;margin:0px;padding:0px;\">"+
                            "<img style=\"background:transparent;border:none;margin:2px 0 0 0;padding:0px;\"  src=\"" + baseUrl + "/image/SutraLogo.gif\" border=\"0\" width=\"84\" height=\"26\"> </a>"+
                        "</div>"+
                    "</div>"+
                "</div>"+ //Main Container Closes
//             "</div>"+ //QuickSutra ID Closes

            //                 Animator Panel starts....we render it but keep it hidden from Duniya Ki Nazar :D
             
                "<div id=\"animator_" + this.WIDGET_ID + "\" style=\"height:18em;width:auto;position:absolute;z-index:500;display:none;background:transparent;margin:0px;padding:0px;line-height:15px;color:#666;\"> "+
                    "<div class=\"verticalTabHolder_" + this.WIDGET_ID + "\" id=\"verticalTabHolder_" + this.WIDGET_ID + "\" style=\"width:350px;height:475px;border:0px solid red;position:absolute;margin:0;padding:0;\">"+
                        "<div class=\"column1\" style=\"width:46px;height:300px;position:relative;float:left;text-align:right;border-style:none;margin:0;padding:0px;\" >"+
                            "<div class=\"tab1\" id=\"tab1_" + this.WIDGET_ID + "\" style=\"position:absolute;margin:2px 0 0 2px;z-index:4;padding:0;\">"+
                                "<a href=\"javascript:sutraWdgObj" + this.WIDGET_ID + ".showTab(1)\" style=\"text-decoration:none;border:0;outline:none;margin:0;padding:0;\" onmouseover=\"this.style.background='transparent';\" >"+
                                    "<img id=\"tabImage1_" + this.WIDGET_ID + "\" src=\""+baseUrl+"image/CompanyActive1.png\" border=\"0\" style=\"background:transparent;text-decoration:none;border:0;outline:none;margin:0;padding:0px;\"/>"+
                                    "<img id=\"tabImage1-2_" + this.WIDGET_ID + "\" src=\""+baseUrl+"image/CompanyInactive1.png\" border=\"0\" style=\"background:transparent;display:none;border-style:none;margin:0;padding:0px;\"/>"+
                                    "<img id=\"tabImage1-3_" + this.WIDGET_ID + "\" src=\""+baseUrl+"image/CompanyInactive.png\" border=\"0\" style=\"background:transparent;display:none;border-style:none;margin:0;padding:0px;\"/>"+
                                "</a>"+
                            "</div>"+ //Tab 1 closes
                "			<div class=\"tab2\" id=\"tab2_" + this.WIDGET_ID + "\" style=\"position:absolute;margin:104px 0 0 0;z-index:3;padding:0;\" >"+
                "				<a href=\"javascript:sutraWdgObj" + this.WIDGET_ID + ".showTab(2)\" style=\"text-decoration:none;outline: none;\" onmouseover=\"this.style.background='transparent';\">"+
        "                            <img id=\"tabImage2_" + this.WIDGET_ID + "\" src=\""+baseUrl+"image/RnRInactive.png\" border=\"0\" style=\"background:transparent;text-decoration:none;border:0;outline:none;\"/>"+
        "                            <img id=\"tabImage2-2_" + this.WIDGET_ID + "\" src=\""+baseUrl+"image/RnRInactive1.png\" border=\"0\" style=\"background:transparent;display:none;border-style:none;margin:0;padding:0px;\"/>"+
        "                            <img id=\"tabImage2-3_" + this.WIDGET_ID + "\" src=\""+baseUrl+"image/RnRActive1.png\" border=\"0\" style=\"background:transparent;display:none;border-style:none;margin:0;padding:0px;\"/>"+
            "                    </a>"+
                "			</div>"+ //Tab 2 closes
                "			<div class=\"tab3\" id=\"tab3_" + this.WIDGET_ID + "\" style=\"position:absolute;margin:208px 0 0 0;z-index:2;padding:0;\">"+
                "				<a href=\"javascript:sutraWdgObj" + this.WIDGET_ID + ".showTab(3)\" style=\"text-decoration:none;outline:none;\" onmouseover=\"this.style.background='transparent';\">"+
        "                            <img id=\"tabImage3_" + this.WIDGET_ID + "\" src=\""+baseUrl+"image/SkillsInactive1.png\" border=\"0\" style=\"background:transparent;text-decoration:none;border:0;outline:none;\"/>"+
        "                            <img id=\"tabImage3-2_" + this.WIDGET_ID + "\" src=\""+baseUrl+"image/SkillsInactive.png\" border=\"0\" style=\"background:transparent;display:none;border-style:none;\"/>"+
        "                            <img id=\"tabImage3-3_" + this.WIDGET_ID + "\" src=\""+baseUrl+"image/SkillsActive1.png\" border=\"0\" style=\"background:transparent;display:none;border-style:none;\"/>"+
        "                        </a>"+
                "			</div>"+ //Tab 3 closes
                "			<div class=\"tab4\" id=\"tab4_" + this.WIDGET_ID + "\" style=\"position:absolute;margin:310px 0 0 2px;z-index:1;padding:0;\">"+
                "				<a href=\"javascript:sutraWdgObj" + this.WIDGET_ID + ".showTab(4)\" style=\"text-decoration:none;outline:none;background:transparent;margin:0;padding:0;\" onmouseover=\"this.style.background='transparent';\">"+
        "                            <img id=\"tabImage4_" + this.WIDGET_ID + "\" src=\""+baseUrl+"image/ApplyInactive.png\" border=\"0\" style=\"background:transparent;margin:0;padding:0;text-decoration:none;border:0;outline:none;\"/>"+
        "                            <img id=\"tabImage4-2_" + this.WIDGET_ID + "\" src=\""+baseUrl+"image/ApplyInactive1.png\" border=\"0\" style=\"background:transparent;margin:0;padding:0;display:none;border-style:none;\"/>"+
        "                            <img id=\"tabImage4-3_" + this.WIDGET_ID + "\" src=\""+baseUrl+"image/ApplyActive1.png\" border=\"0\" style=\"background:transparent;margin:0;padding:0;display:none;border-style:none;\"/>"+
            "                   </a>"+
                "			</div>"+ //Tab 4 closes
                "		</div>"+    //            Column 1 Closes - column 2 starts - this is the main content pane

                        "<a style=\"background:transparent;border:none;margin:0;padding:0;\" href=\"javascript:sutraWdgObj" + this.WIDGET_ID + ".CloseAnimator();\"><img style=\"background:transparent;border:none;float:right;margin:-25px 52px 0 0;padding:0;\" src=\""+baseUrl+"image/cross1.png\"></a>"+
    
                "       <div class=\"column2\" id=\"tabDataContainer_" + this.WIDGET_ID + "\" style=\"width:274px;position:relative;height:100%;float:left;z-index:1;background:url(http://sutrajobs.com/sutradhar/image/RollOverBg1.png) no-repeat;height:445px;margin:0;padding:0;\">"+
                        
                "		</div>"+

                "       <div class=\"column3\" id=\"column3_" + this.WIDGET_ID + "\" style=\"width:25px;right:7px;position:absolute;z-index:999;height:50%;float:left;padding:25px 0 0 0;margin:0;\">"+
                "           <img style=\"background:transparent;margin:0;padding:0;\" src=\""+baseUrl+"image/ROArrow.png\"/>"+
                "		 </div>"+
                "    </div>"+     //            Vertical tab Holder Closes - we now just render the respective divs so that we can gethem by ID later on and write into them

                "   <div id=\"tab_1_Contents_" + this.WIDGET_ID + "\" style=\"visibility:hidden;line-height:15px;color:#666;padding:0;margin:0;\">"+
                "   </div>"+

                "   <div id=\"tab_2_Contents_" + this.WIDGET_ID + "\" class=\"tab_2_Contents\" style=\"visibility:hidden;line-height:15px;color:#666;padding:0;margin:0;\">"+
                "  </div>"+


                "  <div id=\"tab_3_Contents_" + this.WIDGET_ID + "\" class=\"tab_3_Contents\" style=\"visibility:hidden;line-height:15px;color:#666;padding:0;margin:0;\">"+
                "  </div>"+

                "  <div id=\"tab_4_Contents_" + this.WIDGET_ID + "\" class=\"tab_4_Contents\" style=\"visibility:hidden;display:none;height:0px;line-height:15px;color:#666;padding:0;margin:0;\">"+
                "  </div>"+
            "  </div>"+ //animator closes

//            "</div>"+
        "  </div>" //quicksutra closes
            );

    },

    //	forceHideRightTab:function()
    //	{
    //        document.getElementById("animator" + this.WIDGET_ID).style.visibility="hidden";
    //    },

    showMainTab:function(index)
    {
        this.CloseAnimator();
        switch (index)
        {
            case 1:
                document.getElementById("JobTab_" + this.WIDGET_ID).style.background = "url(" + baseUrl + "image/CompTab.png)  no-repeat";
                document.getElementById("CompTab_" + this.WIDGET_ID).style.background = "url(" + baseUrl + "image/CompTabInactive.png) no-repeat";
                document.getElementById("tabJob_" + this.WIDGET_ID).style.display = "";
                document.getElementById("tabComp_" + this.WIDGET_ID).style.display = "none";

                break;
            case 2:
                document.getElementById("JobTab_" + this.WIDGET_ID).style.background = "url(" + baseUrl + "image/CompTabInactive.png)  no-repeat";
                document.getElementById("CompTab_" + this.WIDGET_ID).style.background = "url(" + baseUrl + "image/CompTab.png)  no-repeat";
                document.getElementById("tabJob_" + this.WIDGET_ID).style.display = "none";
                document.getElementById("tabComp_" + this.WIDGET_ID).style.display = "";

                break;
        }

    },
    //

    NextPage: function(link, panelId)
    {
        var countPanel = link.parentNode.getElementsByTagName("span")[0];
        
        switch(panelId)
        {
            case 1:
                if(this.CURRENT_JOB_PAGE < this.MAX_JOB_PAGE)
                {
                    this.CURRENT_JOB_PAGE++;
                    this.TurnPage(panelId, this.CURRENT_JOB_PAGE);

                    var start = (this.CURRENT_JOB_PAGE - 1) * this.JOB_PER_PAGE + 1;
                    var end = this.CURRENT_JOB_PAGE * this.JOB_PER_PAGE;

                    if(end > this.MAX_JOB_COUNT) end = this.MAX_JOB_COUNT;

                    countPanel.innerHTML = start + " - " + end;
                }
                else if(this.CURRENT_JOB_PAGE == this.MAX_JOB_PAGE)
                {
                    this.CURRENT_JOB_PAGE = 1;
                    this.TurnPage(panelId, this.CURRENT_JOB_PAGE);

                    start = (this.CURRENT_JOB_PAGE - 1) * this.JOB_PER_PAGE + 1;
                    end = this.CURRENT_JOB_PAGE * this.JOB_PER_PAGE;

                    if(end > this.MAX_JOB_COUNT) end = this.MAX_JOB_COUNT;

                    countPanel.innerHTML = start + " - " + end;
                }
                break;
            case 2:
                if(this.CURRENT_COMPANY_PAGE < this.MAX_COMPANY_PAGE)
                {
                    this.CURRENT_COMPANY_PAGE++;
                    this.TurnPage(panelId, this.CURRENT_COMPANY_PAGE);

                    start = (this.CURRENT_COMPANY_PAGE - 1) * this.COMPANY_PER_PAGE + 1;
                    end = this.CURRENT_COMPANY_PAGE * this.COMPANY_PER_PAGE;

                    if(end > this.MAX_COMPANY_COUNT) end = this.MAX_COMPANY_COUNT;

                    countPanel.innerHTML = start;
                }
                else if(this.CURRENT_COMPANY_PAGE == this.MAX_COMPANY_PAGE)
                {
                    this.CURRENT_COMPANY_PAGE = 1;
                    this.TurnPage(panelId, this.CURRENT_COMPANY_PAGE);

                    start = (this.CURRENT_COMPANY_PAGE - 1) * this.COMPANY_PER_PAGE + 1;
                    end = this.CURRENT_COMPANY_PAGE * this.COMPANY_PER_PAGE;

                    if(end > this.MAX_COMPANY_COUNT) end = this.MAX_COMPANY_COUNT;

                    countPanel.innerHTML = start;
                }
                break;
        }
    },

    // Previous job page
    PreviousPage: function(link, panelId)
    {
        var countPanel = link.parentNode.getElementsByTagName("span")[0];

        switch(panelId)
        {
            case 1:
                if(this.CURRENT_JOB_PAGE > 1)
                {
                    this.CURRENT_JOB_PAGE--;
                    this.TurnPage(panelId, this.CURRENT_JOB_PAGE);

                    var start = (this.CURRENT_JOB_PAGE - 1) * this.JOB_PER_PAGE + 1;
                    var end = this.CURRENT_JOB_PAGE * this.JOB_PER_PAGE;

                    if(end > this.MAX_JOB_COUNT) end = this.MAX_JOB_COUNT;

                    countPanel.innerHTML = start + " - " + end;
                }
                else if(this.CURRENT_JOB_PAGE == 1)
                {
                    this.CURRENT_JOB_PAGE = this.MAX_JOB_PAGE ;
                    this.TurnPage(panelId, this.CURRENT_JOB_PAGE);

                    start = (this.CURRENT_JOB_PAGE - 1) * this.JOB_PER_PAGE + 1;
                    end = this.CURRENT_JOB_PAGE * this.JOB_PER_PAGE;

                    if(end > this.MAX_JOB_COUNT) end = this.MAX_JOB_COUNT;

                    countPanel.innerHTML = start + " - " + end;
                }
                break;
            case 2:
                if(this.CURRENT_COMPANY_PAGE > 1)
                {
                    this.CURRENT_COMPANY_PAGE--;
                    this.TurnPage(panelId, this.CURRENT_COMPANY_PAGE);

                    start = (this.CURRENT_COMPANY_PAGE - 1) * this.COMPANY_PER_PAGE + 1;
                    end = this.CURRENT_COMPANY_PAGE * this.COMPANY_PER_PAGE;

                    if(end > this.MAX_COMPANY_COUNT) end = this.MAX_COMPANY_COUNT;

                    countPanel.innerHTML = start;
                }
                else if(this.CURRENT_COMPANY_PAGE == 1)
                {
                    this.CURRENT_COMPANY_PAGE = this.MAX_COMPANY_PAGE;
                    this.TurnPage(panelId, this.CURRENT_COMPANY_PAGE);

                    start = (this.CURRENT_COMPANY_PAGE - 1) * this.COMPANY_PER_PAGE + 1;
                    end = this.CURRENT_COMPANY_PAGE * this.COMPANY_PER_PAGE;

                    if(end > this.MAX_COMPANY_COUNT) end = this.MAX_COMPANY_COUNT;

                    countPanel.innerHTML = start;
                }
                break;
        }
    },

    // Turn to specified job page
    TurnPage: function(panelId, page)
    {
        var attributes = {
            left: { 
                to: (page - 1) * -242
            }
        };

        //        var animDiv = (panelId == 1 ? document.getElementById("tabJob_" + this.WIDGET_ID).getElementsByTagName("div")[0] : document.getElementById("tabComp_" + this.WIDGET_ID).getElementsByTagName("div")[0])

        var anim = new YAHOO.util.Anim(document.getElementById((panelId == 1 ? "tabJob_" + this.WIDGET_ID : "tabComp_" + this.WIDGET_ID)).getElementsByTagName("div")[0], attributes, 0.3, YAHOO.util.Easing.easeOut);
        //        var anim = new YAHOO.util.Anim(animDiv, attributes, 0.3, YAHOO.util.Easing.easeOut);
        anim.animate();

        // Hide detail
        this.CloseAnimator();
    },


    RestCall: function(url)
    {
        var header = document.getElementsByTagName("head")[0];
        var scriptObj = document.createElement("script");

        // Add script object attributes
        scriptObj.setAttribute("type", "text/javascript");
        scriptObj.setAttribute("charset", "utf-8");
        scriptObj.setAttribute("src", url);

        header.appendChild(scriptObj);
    },

    ShowCompany: function(resultSet)
    {
        var compPanel = document.getElementById("tabComp_" + this.WIDGET_ID);
        var tab = document.getElementById("CompTab_" + this.WIDGET_ID);

        if(resultSet.data.length >= 2) tab.style.backgroundImage = "url(http://www.sutrajobs.com/API/sutradhar/image/CompTabInactive.png)";

        if(resultSet.data.length == 0)
        {
            compPanel.innerHTML = "<div style=\"padding:20px 0px;text-align:center;margin:0px;\">No company found.</div>";
        }
        else
        {
            this.MAX_COMPANY_COUNT = resultSet.data.length;
            this.MAX_COMPANY_PAGE = Math.floor(this.MAX_COMPANY_COUNT / this.COMPANY_PER_PAGE);
            if(this.MAX_COMPANY_PAGE * this.COMPANY_PER_PAGE < this.MAX_COMPANY_COUNT) this.MAX_COMPANY_PAGE++;

            var width = (this.MAX_COMPANY_COUNT > this.COMPANY_PER_PAGE ? this.MAX_COMPANY_PAGE * 242 : 242);

            // Company data
            var html = "<div style=\"width:" + width + "px;position:relative;overflow:hidden;margin:0px;padding:0px;\">\n";

            html += "<div style=\"width:242px;overflow:hidden;float:left;height:198px;margin:0px;padding:0px;\">\n\n";
            for(var i=0; i<this.MAX_COMPANY_COUNT; i++)
            {
                // Industry list
                //                var industry = "";
                //                var industryLen = 0;
                //                for(var j=0; j<resultSet.data[i].industry.length; j++)
                //                {
                //                    industryLen += resultSet.data[i].industry[j].name.length;
                //
                //                    if(industryLen > 25)
                //                    {
                //                        if (j + 1 < resultSet.data[i].industry.length) industry += " ...";
                //                        break;
                //                    }
                //
                //                    industry += ", <a href=\"" + resultSet.data[i].industry[j].link + "\" style=\"text-decoration:none;color:#3879d9;\" onclick=\"this.target='_blank';\">" + resultSet.data[i].industry[j].name + "</a>";
                //                }

                // Build html
                if(i > 0 && i % this.COMPANY_PER_PAGE == 0) html += "</div>\n\n\n<div style=\"width:242px;float:left;margin:0px;padding:0px;\">\n\n";

                var CompLogo = "<img style=\"border:none;\" src=\"" + resultSet.data[i].logo + "\" style=\"background:transparent;margin:0px;padding:0px;\">";
                html +=
                "<div id=\"test_" + this.WIDGET_ID + "\" style=\"float:left;height:200px;position:relative;width:238px;z-index:501;margin:0px;padding:0px;\">" +
                "<div class=\"compLevel1_1_" + this.WIDGET_ID + "\" style=\"margin-bottom:5px;color:#333333;font-size:12px;font-weight:bold;height:15px;overflow:hidden;width:230px;top:0;\"><a onmouseover=\"this.style.background='transparent';\" style=\"text-decoration:none;display:block;color:#333333;\" onclick=\"this.target='_blank';\" href=\""+ resultSet.data[i].link + "\">" + resultSet.data[i].name.substr(0,100) + "</a></div>" +
                    "<div class=\"compLogo1_" + this.WIDGET_ID + "\" style=\"width:180px;height:70px;margin:10px 30px;padding:0px;position:absolute;white-space:nowrap;\">" + (resultSet.data[i].logo.length > 10 ? "<a onmouseover=\"this.style.background='transparent';\" style=\"text-decoration:none;display:block;color:#333333;\" onclick=\"this.target='_blank';\" href=\""+ resultSet.data[i].link + "\">"+CompLogo+"</a>" : "&nbsp;") + "</div>" +
                    "<div class=\"compName1_" + this.WIDGET_ID + "\"  style=\"font-family:Arial;height:85px;margin:85px 0 0 5px;padding:0px;position:absolute;width:238px\">" +
                        
                        "<div class=\"compLevel1_2_" + this.WIDGET_ID + "\" style=\"margin:0 0 5px 0;padding:0px;color:#333333;font-size:11px;font-weight:500;text-align:justify;height:auto;width:230px;top:0;\">" +
                        (resultSet.data[i].product.length > 20 ? (resultSet.data[i].product.length > 260 ? resultSet.data[i].product.substr(0, 260) + "<a onmouseover=\"this.style.background='transparent';\" target=\"_blank\" style=\"text-decoration:none;color:#2587b8;\" href=\"" + resultSet.data[i].link + "\"><strong>.....(more)</strong></a>" : resultSet.data[i].product) : (resultSet.data[i].mission.length > 260 ? resultSet.data[i].mission.substr(0, 260) + "<a onmouseover=\"this.style.background='transparent';\" target=\"_blank\" style=\"text-decoration:none;color:#2587b8;\" href=\"" + resultSet.data[i].link + "\"><strong>.....(more)</strong></a>" : resultSet.data[i].mission)) + "</div>" +
//                        "<div class=\"compLevel1_3_" + this.WIDGET_ID + "\" style=\"bottom:0;color:#006699;float:left;font-size:11px;font-weight:500;width:230px;height:40px;overflow:hidden;\"><strong>Industries: </strong>" + resultSet.data[i].industries.substr(0, 70) + "</div>" +
                    "</div>" +
                "</div>";
            }

            html += "</div>\n\n";

            html += "<div style=\"clear:both;\"></div></div>";

            // Pagination
            html +=
            "<div style=\"float:left;width:242px; height:35px; border:0px solid red; margin:0px; padding:0px;  background-color:#e3f2f9;\">" +
            "<img src=\"" + baseUrl + "/image/left_arrow.png\" style=\"float:left;border:none;cursor:pointer;left:10px;margin:9px 0 0 0;padding:0;\" alt=\"\" onclick=\"sutraWdgObj" + this.WIDGET_ID + ".PreviousPage(this,2);\" />" +
            "&nbsp; <div style=\"display:inline;float:left; margin:8px 0 0 75px;padding:0;\"><span>" + (this.MAX_COMPANY_PAGE > 1 ? this.COMPANY_PER_PAGE : this.MAX_COMPANY_COUNT) + "</span> of " + this.MAX_COMPANY_COUNT + " &nbsp;</div>" +
            "<img src=\"" + baseUrl + "/image/right_arrow.png\" style=\"float:right;border:none;cursor:pointer;right:10px; margin:8px 0 0 0;padding:0;\" alt=\"\" onclick=\"sutraWdgObj" + this.WIDGET_ID + ".NextPage(this,2);\" />" +
            "</div>";

            compPanel.innerHTML = html;
        }
    },

    // Build job table
    ShowJobs: function(resultSet)
    {
        var jobPanel = document.getElementById("tabJob_" + this.WIDGET_ID);

        if(resultSet.data.length == 0)
            {
                jobPanel.innerHTML = "<div style=\"padding:20px 0px;text-align:center;\">No job opening at this time, check back later.</div>";
            }
                    
        else
            {
                if(resultSet.data.er === true)
                    {
                        var html = "<div style=\"padding:20px 0px;text-align:center;\">HAHAHA.</div>";
                    }
                else
                    {
                        this.MAX_JOB_COUNT = resultSet.data.length;
                        this.MAX_JOB_PAGE = Math.floor(this.MAX_JOB_COUNT / this.JOB_PER_PAGE);
                        if(this.MAX_JOB_PAGE * this.JOB_PER_PAGE < this.MAX_JOB_COUNT) this.MAX_JOB_PAGE++;

                        var width = (this.MAX_JOB_COUNT > this.JOB_PER_PAGE ? this.MAX_JOB_PAGE * 242 : 242);

                        // Job data
                        var html = "<div style=\"height:198px;width:" + width + "px;position:relative;left:0px;overflow:hidden;margin:0px;padding:0px;\">\n";

                        html += "<div style=\"width:242px;overflow:hidden;float:left;height:198px;margin:0px;padding:0px;\">\n\n";

                        for(var i=0; i<this.MAX_JOB_COUNT; i++)
                        {
                            //                html += "<div id=\"test_" + this.WIDGET_ID + "\" style=\"border:0 solid black;float:left;height:35px;margin-top:10px;position:relative;width:238px;z-index:501;\" onclick = \"showRightTab(1," + resultSet.data[i].job.id + ")\">";
                            if(i > 0 && i % this.JOB_PER_PAGE == 0) html += "</div>\n\n\n<div style=\"width:242px;float:left;height:198px;margin:0px;padding:0px;\">\n\n";

                            var JobLogo = "<img style=\"background:transparent;margin:0;padding:0;\" src=\"" + resultSet.data[i].job.logo + "\">";

                            html +=
                            "<div id=\"test_" + this.WIDGET_ID + "\" style=\"cursor:pointer;float:left;height:35px;margin:10px 0 0 0;padding:0px;position:relative;width:238px;z-index:501;\" onmouseover=\"this.style.backgroundColor='#e3f2f9';\" onclick=\"sutraWdgObj" + this.WIDGET_ID + ".showRollOver(this," + resultSet.data[i].job.id + ");\" onmouseout=\"this.style.backgroundColor='';\">" +
                            "<div class=\"compLogo_" + this.WIDGET_ID + "\" style=\"height:35px;margin:3px 0 0 5px;padding:0px;position:absolute;width:40px;white-space:nowrap;\">" + (resultSet.data[i].job.logo.length > 10 ? JobLogo : "") + "</div>"+
                            "<div class=\"compName_" + this.WIDGET_ID + "\" style=\"font-family:Arial;height:35px;margin:0 0 0 60px;padding:0;position:absolute;width:130px\">" +
                            "<div class=\"compLevel1_" + this.WIDGET_ID + "\" style=\"color:#333333;float:left;font-size:11px;font-weight:bold;height:17px;top:0;margin:0;padding:0;\">" + (resultSet.data[i].job.title.length > 19 ? resultSet.data[i].job.title.substr(0,19) + "..." : resultSet.data[i].job.title) + "</div><br>" +
                            "<div class=\"compLevel2_" + this.WIDGET_ID + "\" style=\"bottom:0;color:#006699;float:left;font-size:11px;font-weight:bold;height:17px;margin:0;padding:0;\">" + (resultSet.data[i].company.name.length > 20 ? resultSet.data[i].company.name.substr(0,20) + "..." : resultSet.data[i].company.name) + "</div>" +
                            "</div>" +
                            "<div class=\"compCity_" + this.WIDGET_ID + "\" style=\"color:#8D8E8F;font-size:11px;font-style:italic;height:13px;margin:8px 0 0 0;padding:0;position:absolute;right:10px;width:auto;\">" + resultSet.data[i].job.location + "</div>" +
                            "</div>\n\n";
                        }

                        html += "</div>\n\n";

                    }

                    html += "<div style=\"clear:both;\"></div></div>";

                    // Pagination
                    html +=
                    "<div style=\"float:left; width:242px; height:35px; border:0px solid red;margin:0;padding:0;background-color:#e3f2f9;\">" +
                    "<img src=\"" + baseUrl + "/image/left_arrow.png\" style=\"float:left;border:none;cursor:pointer;left:10px;margin:9px 0 0 0;padding:0;\" alt=\"\" onclick=\"sutraWdgObj" + this.WIDGET_ID + ".PreviousPage(this,1);\" />" +
                    "&nbsp; <div style=\"display:inline;float:left; margin:8px 0 0 75px;padding:0;\"><span>1 - " + (this.MAX_JOB_PAGE > 1 ? this.JOB_PER_PAGE : this.MAX_JOB_COUNT) + "</span> of " + this.MAX_JOB_COUNT + " &nbsp;</div>" +
                    "<img src=\"" + baseUrl + "/image/right_arrow.png\" style=\"float:right;border:none;cursor:pointer;right:10px;margin:8px 0 0 0;padding:0;\" alt=\"\" onclick=\"sutraWdgObj" + this.WIDGET_ID + ".NextPage(this,1);\" />" +
                    "</div>";

                    jobPanel.innerHTML = html;
                
            }
    },

//    Show RollOver - vertical Tabs and the pane that hovers over the content - we can have this even triggered on a mouseover even OR an onclick event

    // Close detail panel
    CloseAnimator: function()
    {
        var item = document.getElementById("animator_" + this.WIDGET_ID);
        var applyOpacity = this.ApplyOpacity;

        function callback()
        {
            item.style.display = "none";
            applyOpacity(item, 100);
        }

        if(typeof(item.style.filter) == "undefined")
        {
            this.FadeOut(item, 100, 0, 10, 1, callback);
        }
        else
        {
            item.style.display = "none";
        }
    },

    showRollOver: function(item,jobId)
    {
        //        Lets move the arrow with the job

        document.getElementById("column3_" + this.WIDGET_ID).style.marginTop= ((this.TopPosition(item))-(this.TopPosition(document.getElementById("mainContainer_" + this.WIDGET_ID)))-25) + "px"

        if(this.SHOW_COLUMNS) this.SHOW_COLUMNS.style.display = "none";

        var panel = document.getElementById("animator_" + this.WIDGET_ID);
        panel.style.display = "";
        panel.style.textAlign = "left";

        if(panel.parentNode != document.body)
        {
            document.body.appendChild(panel.parentNode.removeChild(panel));
            panel.style.zIndex = 500;
        }

        if(panel)
        {
            if(item.__previewPanel)
            {
                item.__previewPanel.style.display = "";
                this.SHOW_COLUMNS = item.__previewPanel;
            }
            else
            {
                this.RestCall("http://www.sutrajobs.com/API/sutradhar/GetDetails.php?jid=" + jobId + "&callback=sutraWdgObj" + this.WIDGET_ID + ".createRollOver");
//                this.RestCall("http://localhost/sutrajobs/API/sutradhar/GetDetails.php?jid=" + jobId + "&callback=sutraWdgObj" + this.WIDGET_ID + ".createRollOver");
            }
        }
        
//        this.createRollOver();
        panel.style.left = (this.LeftPosition(item) - 344) + "px"
        panel.style.top = (this.TopPosition(document.getElementById("mainContainer_" + this.WIDGET_ID))) + "px"
    },

    hideRollOver: function(item)
    {
        item.__previewPanel.style.display = "none";
    },

    createRollOver: function(resultSet)
    {            
        this.CreateTab_1_Content(resultSet);
        this.CreateTab_2_Content(resultSet);
        this.CreateTab_3_Content(resultSet);
        this.CreateTab_4_Content(resultSet);

        
        this.showTab(1);
    },

    CreateTab_1_Content: function(resultSet)
    {

        CompLink = "<a onmouseover=\"this.style.background='transparent';\" target=\"_blank\" style=\"text-decoration:none;color:#2587b8;margin:0;padding:0;\" href=\"http://sutrajobs.com/companies/" + resultSet.data[0].company.id + "/" + resultSet.data[0].company.name + "\"><strong>.....(more)</strong></a>";
        var tab_1_content =
        "<div class=\"comp_add_container\" style=\"font-family:Arial,Helvetica,sans-serif;width:255px;height:40px;margin:5px 0 0 0;position:relative;padding:5px;\">"+
        "<div class=\"comp_add\" style=\"color:#4B9BDB;font-size:14px;font-weight:bold;text-align:center;text-decoration:none;\"><a onmouseover=\"this.style.background='transparent';\" target=\"_blank\" style=\"text-decoration:none;color:#4B9BDB;\" href=\"http://sutrajobs.com/jobs/" + resultSet.data[0].job.id + "/" + resultSet.data[0].job.title + "\">" + resultSet.data[0].job.title + " <span style=\"text-decoration:none;color:#999;\">at</span> " + resultSet.data[0].company.name +
        "</a></div>"+
        "</div><!--Comp AddContainer closes-->"+
        (resultSet.data[0].company.logo.length > 0 ?
        "<div class=\"comp_img\" style=\"border:0 solid red;text-align:center;\">"+
        "           <div class=\"comp_img_back\" style=\"height:70px;margin:5px 30px;position:relative;width:180px;\">"+
//        "               <img width=\"180px\" height=\"70px\" src=\"http://sutrajobs.com/images/" + resultSet.data[0].company.logo + "\"/>"+
        "           <img style=\"background:transparent;margin:0;padding:0;\" src=\"http://sutrajobs.com/images/" + resultSet.data[0].company.logo + "\"/>"+
        "           </div>"+
        "       </div>" :  "<div class=\"comp_img_back\" style=\"height:70px;margin:5px 30px;position:relative;width:180px;padding:0;\"><img style=\"background:transparent;margin:0;padding:0;\" src=\"http://sutrajobs.com/API/sutradhar/image/site/no-logo.gif\" /></div>")+
        "        <div class=\"comp_det\" style=\"font-family:Arial,Helvetica,sans-serif;width:100%;height:256px;border: 0px solid red;position:relative;margin:3px 0 0 0;padding:0;\">"+
        "           <div class=\"comp_infra\" style=\"width:100%;height:auto;border: 0px solid blue;position:relative;margin:3px 5px;padding:0;\">"+
        "               <div class=\"comp_infra_inner\" style=\"width:220px;height:65px;border: 0px solid orange;margin:5px 5px;position:relative;padding:0;\">"+
        "                   <div style=\"height:20px;margin:0;padding:0;\">"+
        "                       <span class=\"comp_team\" style=\"left:0px;font-size:12px;position:absolute;margin:0;padding:0;\">"+
        "                           <span class=\"comp_team_header\" style=\"color:teal;font-size:12px;margin:0;padding:0;\"><strong>Team:</strong></span>"+
        "                           <span class=\"comp_team_text\" style=\"font-size:12px;margin:0;padding:0;\">" + resultSet.data[0].company.team + "</span>"+
        "                       </span>"+
        "                       <span class=\"comp_revenue\" style=\"position:relative;float:right;font-size:12px;text-align:right;margin-left:20px;\">"+
        "                           <span class=\"comp_revenue_header\" style=\"color:teal;font-size:12px;\"><strong>Revenue:</strong></span>"+
        "                           <span class=\"comp_revenue_text\" style=\"font-size:12px;\">" + resultSet.data[0].company.revenue + "</span>"+
        "                       </span>"+
        "                   </div>"+
        "                   <div class=\"comp_infra_industries\" style=\"text-align:left;font-size:12px;color:teal;position:relative;margin:0;padding:0;\">"+
        "                       <span class=\"comp_infra_industries_header\" style=\"position:relative;color:teal;font-size:12px;margin:0;padding:0;\"><strong>Industries:</strong></span>"+
        "                       <span class=\"comp_infra_industries_text\" style=\"position:relative;color:#666;font-size:12px;margin:0;padding:0;\">"  + resultSet.data[0].company.industries + "</span>"+
        "                   </div>"+
        "               </div>"+

        "            </div>"+
        (resultSet.data[0].company.mission.length > 5 ?
        "            <div class=\"comp_mission_container\" style=\"font-family:Arial,Helvetica,sans-serif;width:260px;height:auto;margin:5px 0 0 0;position:relative;padding:0 5px;\">"+
        "                <div class=\"comp_mission\" style=\"font-size:13px;color:teal;text-align:left;margin:0;padding:0;\">"+
        "                    <strong>Mission:</strong>"+
        "                </div>"+
        "                <div class=\"comp_mission_text\" style=\"margin:6px 0 0 0;font-size:12px;text-align:justify;padding:0;\">"+
                        (resultSet.data[0].company.mission.length > 140 ? resultSet.data[0].company.mission.substr(0, 140) + CompLink : resultSet.data[0].company.mission) +
        "                </div>"+
        "            </div>" : " <div class=\"comp_mission_container\" style=\"font-family:Arial,Helvetica,sans-serif;width:260px;height:auto;margin:5px 0 0 0;position:relative;padding:0 5px;\">"+
        "                <div class=\"comp_mission\" style=\"margin:0;padding:0;font-size:13px;color:teal;text-align:left;\">"+
        "                    <strong>Mission:</strong><br> <span style=\"margin:0;padding:0;text-decoration:none;color:#555;\">(No Information Available)</span>"+
        "                </div></div>")+
        (resultSet.data[0].company.product.length > 5 ?
        "            <div class=\"comp_product_container\" style=\"font-family:Arial,Helvetica,sans-serif;width:260px;height:100px;margin:15px 0 0 0;position:relative;padding:0 5px;\">"+
        "                <div class=\"comp_product\" style=\"font-size:13px;color:teal;text-align:left;\">"+
        "                    <strong>Products/ Services:</strong>"+
        "                </div>"+
        "                <div class=\"comp_product_text\" style=\"margin:6px 0 0 0;font-size:12px;text-align:justify;padding:0;\">"+
                        (resultSet.data[0].company.product.length > 190 ? resultSet.data[0].company.product.substr(0, 190) + CompLink : resultSet.data[0].company.product) +

        "                </div>"+
        "            </div>" : "<div class=\"comp_product_container\" style=\"font-family:Arial,Helvetica,sans-serif;width:260px;height:100px;margin:15px 0 0 0;position:relative;padding:0 5px;\">"+
        "                <div class=\"comp_product\" style=\"font-size:13px;color:teal;text-align:left;\">"+
        "                    <strong>Products/ Services:</strong><br><span style=\"text-decoration:none;color:#555;\">(No Information Available)</span> "+
        "                </div></div>")+
        "        </div>"+
        " <div class=\"allApplyNow\" style=\"height:25px;margin:6px 10px 10px 7px;position:absolute;width:250px;padding:0;\"><br><a onmouseover=\"this.style.background='transparent';\" href=\"javascript:sutraWdgObj" + this.WIDGET_ID + ".showTab(4)\" style=\"text-decoration:none;\"><img width=\"250px\" height=\"25px\" style=\"background:transparent;margin:0;padding:0;border:none;\" src=\""+baseUrl+"/image/ApplyButton2.png\" /></a></div>";


        document.getElementById("tab_1_Contents_" + this.WIDGET_ID).innerHTML = tab_1_content;        
    },

    CreateTab_2_Content: function(resultSet)
    {
        JobLink = "<a onmouseover=\"this.style.background='transparent';\" target=\"_blank\" style=\"text-decoration:none;color:#2587b8;margin:0;padding:0;\" href=\"http://sutrajobs.com/jobs/" + resultSet.data[0].job.id + "/" + resultSet.data[0].job.title + "\"><strong>.....(more)</strong></a>";
        var tab_2_content =
        "<div class=\"comp_add_container\" style=\"font-family:Arial,Helvetica,sans-serif;width:255px;height:40px;margin:auto;margin-top:5px;position:relative;padding-top:5px;padding-bottom:5px;padding-left:5px;padding-right:5px;\">"+
        "<div class=\"comp_add\" style=\"color:#4B9BDB;font-size:14px;font-weight:bold;text-align:center;\">"+
        "<a onmouseover=\"this.style.background='transparent';\" target=\"_blank\" style=\"text-decoration:none;color:#4B9BDB;\" href=\"http://sutrajobs.com/jobs/" + resultSet.data[0].job.id + "/" + resultSet.data[0].job.title + "\">" + resultSet.data[0].job.title + " <span style=\"text-decoration:none;color:#999;\">at</span> " + resultSet.data[0].company.name +
        "</a></div>"+
        "</div><!--Comp AddContainer closes-->"+
        "        <div class=\"rnrBody\" style=\"font-family:Arial,Helvetica,sans-serif;margin-left:7px;margin-right:7px;text-align:justify;width:255px;height:336px;\">"+
        (resultSet.data[0].job.overview.length > 5 ?
        "            <div class=\"rnrOverview\" style=\"height:auto;margin-top:5px;position:relative;\">"+
        "                <div class=\"rnrOverview_header\" style=\"height:20px;color:teal;font-size:12px;\">"+
        "                    <strong>Overview:</strong>"+
        "                </div>"+
        "                <div class=\"rnrOverview_text\" style=\"height:auto;font-size:12px;\">"+
                        (resultSet.data[0].job.overview.length > 400 ? resultSet.data[0].job.overview.substr(0, 400) + JobLink : resultSet.data[0].job.overview) +
        "                </div>"+
        "            </div>" : "<div class=\"rnrOverview\" style=\"height:auto;margin-top:5px;position:relative;\">"+
        "                <div class=\"rnrOverview_header\" style=\"height:20px;color:teal;font-size:12px;\">"+
        "                    <strong>Overview:</strong><br> <span style=\"text-decoration:none;color:#555;\">(No Information Available)</span>"+
        "                </div></div>")+
        (resultSet.data[0].job.responsibilities.length > 5 ?
        "            <div class=\"rnrResponsibilities\" style=\"position:relative;margin-top:10px;\">"+
        "                <div class=\"rnrResponsibilities_header\" style=\"height:20px;border: 0px solid blue;color:teal;font-size:12px;text-align:left;\">"+
        "                    <strong>Responsibilities:</strong>"+
        "                </div>"+
        "                <div class=\"rnrResponsibilities_text\" style=\"height:auto;font-size:12px;\">"+
                        (resultSet.data[0].job.responsibilities.length > 400 ? resultSet.data[0].job.responsibilities.substr(0, 400) + JobLink : resultSet.data[0].job.responsibilities) +
        "               </div>"+
        "           </div>" : "<div class=\"rnrResponsibilities\" style=\"position:relative;margin-top:10px;\">"+
        "                <div class=\"rnrResponsibilities_header\" style=\"height:20px;color:teal;font-size:12px;text-align:left;\">"+
        "                    <strong>Responsibilities:</strong><br> <span style=\"text-decoration:none;color:#555;\">(No Information Available)</span>"+
        "                </div></div>")+
        "       </div>"+
        " <div class=\"allApplyNow\" style=\"height:25px;margin-left:7px;margin-right:10px;margin-bottom:10px;position:absolute;width:250px;\"><br><a onmouseover=\"this.style.background='transparent';\" href=\"javascript:sutraWdgObj" + this.WIDGET_ID + ".showTab(4)\" style=\"text-decoration:none;\"><img width=\"250px\" height=\"25px\" style=\"border:none;background:transparent;margin:0;padding:0;\" src=\""+baseUrl+"/image/ApplyButton2.png\" /></a></div>";
 

        document.getElementById("tab_2_Contents_" + this.WIDGET_ID).innerHTML = tab_2_content;

    },

    CreateTab_3_Content: function(resultSet)
    {
        JobLink = "<a onmouseover=\"this.style.background='transparent';\" target=\"_blank\" style=\"text-decoration:none;color:#2587b8;margin:0;padding:0;\" href=\"http://sutrajobs.com/jobs/" + resultSet.data[0].job.id + "/" + resultSet.data[0].job.title + "\"><strong>.....(more)</strong></a>";
        var tab_3_content =
        "<div class=\"comp_add_container\" style=\"font-family:Arial,Helvetica,sans-serif;width:255px;height:40px;margin:auto;margin-top:5px;position:relative;padding-top:5px;padding-bottom:5px;padding-left:5px;padding-right:5px;\">"+
        "<div class=\"comp_add\" style=\"font-size:14px;font-weight:bold;text-align:center;\">"+
        "<a onmouseover=\"this.style.background='transparent';\" target=\"_blank\" style=\"text-decoration:none;color:#4B9BDB;\" href=\"http://sutrajobs.com/jobs/" + resultSet.data[0].job.id + "/" + resultSet.data[0].job.title + "\">" + resultSet.data[0].job.title + " <span style=\"text-decoration:none;color:#999;\">at</span> " + resultSet.data[0].company.name +
        "</a></div>"+
        "</div><!--Comp AddContainer closes-->"+
        "<div class=\"skillsBody\" style=\"font-family:Arial,Helvetica,sans-serif;margin-left:7px;margin-right:15px;text-align:justify;width:255px;height:330px;\">"+
        "        <div class=\"skills_inner\" style=\"width:255px;height:auto;margin-top:10px;position:relative;margin-right:15px;\">"+
        "            <div class=\"skills_inner_skill_header\" style=\"width:255px;height:20px;color:teal;font-size:13px;text-align:left;\">"+
        "                <strong>Skills:</strong>"+
        "            </div>"+
        "            <div class=\"skills_inner_skill_text\" style=\"width:255px;height:auto;font-size:12px;text-align:left;\">"+
                     (resultSet.data[0].job.skills.length > 200 ? resultSet.data[0].job.skills.substr(0, 200) + JobLink : resultSet.data[0].job.skills)+
        "            </div>"+
        "        </div>"+

        "        <div class=\"skills_inner\" style=\"width:255px;height:auto;margin-top:10px;position:relative;margin-right:15px;\">"+
        "            <div class=\"skills_inner_skill_header\" style=\"width:255px;height:20px;color:teal;font-size:13px;text-align:left;\">"+
        "                <strong>Experience:</strong>"+
        "            </div>"+
        "            <div class=\"skills_inner_skill_text\" style=\"width:255px;height:auto;font-size:12px;text-align:left;\">" +
                     (resultSet.data[0].job.experience.length > 180 ? resultSet.data[0].job.experience.substr(0, 180) + JobLink : resultSet.data[0].job.experience) +
        "            </div>"+
        "        </div>"+

        "        <div class=\"skills_inner\" style=\"width:255px;height:auto;border: 0px solid red;margin-top:10px;position:relative;margin-right:15px;\">"+
        "            <div class=\"skills_inner_skill_header\" style=\"width:255px;height:20px;color:teal;font-size:13px;text-align:left;\">"+
        "                <strong>Salary:</strong>"+
        "            </div>"+
        "            <div class=\"skills_inner_skill_text\" style=\"width:255px;height:auto;font-size:12px;text-align:left;\">" +
                     (resultSet.data[0].job.salary.length > 100 ? resultSet.data[0].job.salary.substr(0, 100) + JobLink : resultSet.data[0].job.salary) +
        "            </div>"+
        "        </div>"+

        "        <div class=\"skills_inner\" style=\"width:255px;height:auto;margin-top:10px;position:relative;margin-right:15px;\">"+
        "            <div style=\"color:teal;font-size:13px;\">"+
        "                <strong>Type:</strong> <span style=\"color:#666;\">"+ resultSet.data[0].job.type.substr(0, 30) +"</span>"+
        "            </div>"+
        "       </div>"+

        "       <div class=\"skills_inner\" style=\"width:255px;height:auto;border: 0px solid red;margin-top:10px;position:relative;margin-right:15px;\">"+
        "         <div style=\"color:teal;font-size:13px;\">"+
        "               <strong>Telephonic Interview :</strong> <span style=\"color:#666;\">"+ resultSet.data[0].job.telephone.substr(0, 10) +"</span>"+
        "           </div>"+
        "       </div>"+
             "</div>"+
             " <div class=\"allApplyNow\" style=\"height:25px;margin-top:1px;margin-left:7px;margin-right:10px;margin-bottom:10px;position:absolute;width:250px;\"><br><a onmouseover=\"this.style.background='transparent';\" href=\"javascript:sutraWdgObj" + this.WIDGET_ID + ".showTab(4)\" style=\"text-decoration:none;\"><img width=\"250px\" height=\"25px\" style=\"border:none;background:transparent;margin:0;padding:0;\" src=\""+baseUrl+"/image/ApplyButton2.png\" /></a></div>";

        document.getElementById("tab_3_Contents_" + this.WIDGET_ID).innerHTML = tab_3_content;

    },

    CreateTab_4_Content: function(resultSet)
    {
        var tab_4_content =
        "<div class=\"comp_add_container\" style=\"font-family:Arial,Helvetica,sans-serif;width:255px;height:40px;margin:auto;margin-top:5px;position:relative;padding-top:5px;padding-bottom:5px;padding-left:5px;padding-right:5px;\">"+
        "<div class=\"comp_add\" style=\"font-size:14px;font-weight:bold;text-align:center;\">"+
        "<a onmouseover=\"this.style.background='transparent';\" target=\"_blank\" style=\"text-decoration:none;color:#4B9BDB;\" href=\"http://sutrajobs.com/jobs/" + resultSet.data[0].job.id + "/" + resultSet.data[0].job.title + "\">" + resultSet.data[0].job.title + " <span style=\"text-decoration:none;color:#999;\">at</span> " + resultSet.data[0].company.name +
        "</a></div>"+
        "</div>"+
        "</div><!--Comp AddContainer closes-->"+
        "<form method=\"post\" enctype=\"multipart/form-data\" action=\"http://sutrajobs.com/API/sutradhar/email.php\" name=\"applyForm\">"+
        "   <input type=\"hidden\" id=\"title\" name=\"title\" value=\"" + resultSet.data[0].job.title + "\" />"+
//        "   <input type=\"hidden\" id=\"recipient\" name=\"recipient\" value=\"rizwan@sutrajobs.com\" />"+
        "   <input type=\"hidden\" id=\"recipient\" name=\"recipient\" value=\"" + resultSet.data[0].job.email + "\" />"+
        "   <input type=\"hidden\" id=\"from\" name=\"from\" value=\"support@sutrajobs.com\" />"+
        "   <input type=\"hidden\" id=\"location\" name=\"location\" value=\"" + resultSet.data[0].job.location + "\" />"+
        "   <input type=\"hidden\" id=\"url\" name=\"url\" value=\""+ document.location.href +"\" />"+
        "   <input type=\"hidden\" id=\"organisation\" name=\"organisation\" value=\"" + resultSet.data[0].company.name + "\" />"+
//        First Name
        "       <div class=\"applyRow\" style=\"position:relative;height:30px;width:auto;border: 0px solid red;margin-top:10px;margin-left:7px;\">"+
        "           <span class=\"appyText\" style=\"text-align:left;position:relative;float:left;font-family:arial;font-size:12px;font-weight:normal;color:#428eb4;\"><span style=\"color:red;\">*</span> First Name:</span>"+
        "           <span class=\"appyTextFeild\" style=\"position:relative;float:right;margin-right:15px;\">"+
        "           <input style=\"color:#736f6f;font-weight:400;\" name=\"firstname\" id=\"firstname\" type=\"text\" onfocus=\"sutraWdgObj" + this.WIDGET_ID + ".FormReset(this)\" value=\"\" type=\"text\" size=\"22\"/>"+
        "           <div style=\"color:#ff0000;font-size:12px;font-weight:300;word-spacing:1px;display:none;\" id=\"FirstCheck_" + this.WIDGET_ID + "\">This Field is compulsory</div></span>"+
        "       </div>"+
//        Last Name
        "       <div class=\"applyRow\" style=\"position:relative;height:30px;width:auto;border: 0px solid red;margin-top:10px;margin-left:7px;\">"+
        "           <span class=\"appyText\" style=\"text-align:left;position:relative;float:left;font-family:arial;font-size:12px;font-weight:normal;color:#428eb4;\"><span style=\"color:red;\">*</span>  Last Name:</span>"+
        "           <span class=\"appyTextFeild\" style=\"position:relative;float:right;margin-right:15px;\">"+
        "           <input style=\"color:#736f6f;font-weight:400;\" name=\"lastname\" onfocus=\"sutraWdgObj" + this.WIDGET_ID + ".FormReset(this)\" id=\"lastname\" type=\"text\" size=\"22\"/>"+
        "           <div style=\"color:#ff0000;font-size:12px;font-weight:300;word-spacing:1px;display:none;\" id=\"SecondCheck_" + this.WIDGET_ID + "\">This Field is compulsory</div></span>"+
        "      </div>"+
//        Email
        "     <div class=\"applyRow\" style=\"position:relative;height:30px;width:auto;border: 0px solid red;margin-top:10px;margin-left:7px;\">"+
        "         <span class=\"appyText\" style=\"text-align:left;position:relative;float:left;font-family:arial;font-size:12px;font-weight:normal;color:#428eb4;\"><span style=\"color:red;\">*</span>  E-mail:</span>"+
        "         <span class=\"appyTextFeild\" style=\"position:relative;float:right;margin-right:15px;\">"+
        "         <input style=\"color:#736f6f;font-weight:400;\" id=\"email\" onfocus=\"sutraWdgObj" + this.WIDGET_ID + ".FormReset(this)\" name=\"email\" type=\"text\" size=\"22\"/>"+
        "         <div style=\"color:#ff0000;font-size:12px;font-weight:300;word-spacing:1px;display:none;\" id=\"MailCheck_" + this.WIDGET_ID + "\">This Field is compulsory</div></span>"+
        "     </div>"+
//        Current CTC
        "     <div class=\"applyRow\" style=\"position:relative;height:30px;width:auto;border: 0px solid red;margin-top:10px;margin-left:7px;\">"+
        "         <span class=\"appyText\" style=\"text-align:left;position:relative;float:left;font-family:arial;font-size:12px;font-weight:normal;color:#428eb4;\">Current CTC:</span>"+
        "         <span class=\"appyTextFeild\" style=\"position:relative;float:right;margin-right:15px;\">"+
        "        <input style=\"color:#736f6f;font-weight:400;\" id=\"ctc\" name=\"ctc\" type=\"text\" size=\"22\"/></span>"+
        "     </div>"+
//        Expected CTC
        "     <div class=\"applyRow\" style=\"position:relative;height:30px;width:auto;border: 0px solid red;margin-top:10px;margin-left:7px;\">"+
        "           <span class=\"appyText\" style=\"text-align:left;position:relative;float:left;font-family:arial;font-size:12px;font-weight:normal;color:#428eb4;\">Expected CTC:</span>"+
        "           <span class=\"appyTextFeild\" style=\"position:relative;float:right;margin-right:15px;\">"+
        "           <input style=\"color:#736f6f;font-weight:400;\" id=\"ectc\" name=\"ectc\" type=\"text\" size=\"22\"/></span>"+
        "       </div>"+
//        Notice Period
        "       <div class=\"applyRow\" style=\"position:relative;height:30px;width:auto;border: 0px solid red;margin-top:10px;margin-left:7px;\">"+
        "           <span class=\"appyText\" style=\"text-align:left;position:relative;float:left;font-family:arial;font-size:12px;font-weight:normal;color:#428eb4;\">Notice Period:</span>"+
        "           <span class=\"appyTextFeild\" style=\"position:relative;float:right;margin-right:15px;\">"+
        "            <input style=\"color:#736f6f;font-weight:400;\" id=\"noticeperiod\" name=\"noticeperiod\" type=\"text\" size=\"22\"/></span>"+
        "       </div>"+
//        Attachment
        "       <div class=\"applyRow\" style=\"position:relative;height:30px;width:auto;border: 0px solid red;margin-top:10px;margin-left:7px;\">"+
        "           <div class=\"appyText\" style=\"text-align:left;position:relative;float:left;font-family:arial;font-size:12px;font-weight:normal;color:#428eb4;\"><span style=\"color:red;\">*</span> Upload your resume:</div>"+
        "      <br>"+
        "           <div class=\"appyTextFeild\" style=\"position:relative;float:right;margin-right:15px;\">"+
        "           <input style=\"color:#736f6f;font-weight:400;\" name=\"attachment\" id=\"attachment\" type=\"file\" /></div><br>"+
        "           <br><div style=\";color:#ff0000;font-size:12px;font-weight:300;word-spacing:1px;display:none;\" id=\"AttCheck_" + this.WIDGET_ID + "\">This Field is compulsory</div>"+
        "       </div>"+
        "        <br><br><br>"+
        " <div class=\"allApplyNow\" style=\"height:25px;margin:-50px 0 50px 80px;position:absolute;width:250px;\"><br><br><br><img onclick=\"javascript:sutraWdgObj" + this.WIDGET_ID + ".submitDetails(this," + resultSet.data[0].job.id + ");\" id=\"allApplyNow\" width=\"100px\" height=\"29px\" style=\"border:none;cursor:pointer;background:transparent;margin:0;padding:0;\" src=\""+baseUrl+"/image/AppButt1.gif\" /></div>"+
        " </form>"+
        " <br><br><br><div style=\"width:1px;height:1px;position:absolute;overflow:hidden;left:-100px;\">"+
        "<iframe style=\"border:none;\" id=\"applyNow_" + resultSet.data[0].job.id + "\" name=\"applyNow_" + resultSet.data[0].job.id + "\"></iframe></div>;"

        document.getElementById("tab_4_Contents_" + this.WIDGET_ID).innerHTML = tab_4_content;
    },


    showTab: function(index)
    {
        switch (index)
        {
            case 1:
                document.getElementById("tabImage1_" + this.WIDGET_ID).src = baseUrl+"image/CompanyActive.png";
                document.getElementById("tabImage2_" + this.WIDGET_ID).src = baseUrl+"image/RnRInactive.png";
                document.getElementById("tabImage3_" + this.WIDGET_ID).src = baseUrl+"image/SkillsInactive1.png";
                document.getElementById("tabImage4_" + this.WIDGET_ID).src = baseUrl+"image/ApplyInactive.png";
                document.getElementById("tab1_" + this.WIDGET_ID).style.zIndex  = 4;
                document.getElementById("tab2_" + this.WIDGET_ID).style.zIndex  = 3;
                document.getElementById("tab3_" + this.WIDGET_ID).style.zIndex  = 2;
                document.getElementById("tab4_" + this.WIDGET_ID).style.zIndex  = 1;
                document.getElementById("tab1_" + this.WIDGET_ID).style.marginLeft  = "2px";

                break;
            case 2:
                document.getElementById("tabImage1_" + this.WIDGET_ID).src = baseUrl+"image/CompanyInactive.png";
                document.getElementById("tabImage2_" + this.WIDGET_ID).src = baseUrl+"image/RnRActive.png";
                document.getElementById("tabImage3_" + this.WIDGET_ID).src = baseUrl+"image/SkillsInactive.png";
                document.getElementById("tabImage4_" + this.WIDGET_ID).src = baseUrl+"image/ApplyInactive1.png";
                document.getElementById("tab1_" + this.WIDGET_ID).style.zIndex  = 3;
                document.getElementById("tab2_" + this.WIDGET_ID).style.zIndex  = 4;
                document.getElementById("tab3_" + this.WIDGET_ID).style.zIndex  = 2;
                document.getElementById("tab4_" + this.WIDGET_ID).style.zIndex  = 1;
                document.getElementById("tab2_" + this.WIDGET_ID).style.marginLeft  = "2px";

                break;
            case 3:
                document.getElementById("tabImage1_" + this.WIDGET_ID).src = baseUrl+"image/CompanyInactive1.png";
                document.getElementById("tabImage2_" + this.WIDGET_ID).src = baseUrl+"image/RnRInactive.png";
                document.getElementById("tabImage3_" + this.WIDGET_ID).src = baseUrl+"image/SkillsActive.png";
                document.getElementById("tabImage4_" + this.WIDGET_ID).src = baseUrl+"image/ApplyInactive.png";
                document.getElementById("tab1_" + this.WIDGET_ID).style.zIndex  = 1;
                document.getElementById("tab2_" + this.WIDGET_ID).style.zIndex  = 2;
                document.getElementById("tab3_" + this.WIDGET_ID).style.zIndex  = 4;
                document.getElementById("tab4_" + this.WIDGET_ID).style.zIndex  = 3;
                document.getElementById("tab3_" + this.WIDGET_ID).style.marginLeft  = "2px";

                break;
            case 4:
                document.getElementById("tabImage1_" + this.WIDGET_ID).src = baseUrl+"image/CompanyInactive.png";
                document.getElementById("tabImage2_" + this.WIDGET_ID).src = baseUrl+"image/RnRInactive1.png";
                document.getElementById("tabImage3_" + this.WIDGET_ID).src = baseUrl+"image/SkillsInactive.png";
                document.getElementById("tabImage4_" + this.WIDGET_ID).src = baseUrl+"image/ApplyActive.png";
                document.getElementById("tab1_" + this.WIDGET_ID).style.zIndex  = 1;
                document.getElementById("tab2_" + this.WIDGET_ID).style.zIndex  = 2;
                document.getElementById("tab3_" + this.WIDGET_ID).style.zIndex  = 3;
                document.getElementById("tab4_" + this.WIDGET_ID).style.zIndex  = 4;
                document.getElementById("tab4_" + this.WIDGET_ID).style.marginLeft  = "2px";

                break;
        }
        this.showTabData(index);
    },
    
    showTabData: function(index)
    {
        document.getElementById("tabDataContainer_" + this.WIDGET_ID).innerHTML=document.getElementById("tab_"+index+"_Contents_" + this.WIDGET_ID).innerHTML;

    },


    TopPosition: function(obj)
    {
        var top = obj.offsetTop;
        var container = obj.offsetParent;

        while(container)
        {
            top += container.offsetTop;
            container = container.offsetParent;
        }

        return top;
    },

    LeftPosition: function(obj)
    {
        var left = obj.offsetLeft;
        var container = obj.offsetParent;

        while(container)
        {
            left += container.offsetLeft;
            container = container.offsetParent;
        }
        return left;
    },

    // Apply opacity to object
    ApplyOpacity: function(object, opacity)
    {
        var opaVal = 0;

        try
        {
            opaVal = parseInt(opacity);
        }
        catch(e)
        {
            opaVal = 100;
        }

        if(opaVal > 100)
            opaVal = 100;
        else if(opaVal < 0)
            opaVal = 0;

        if(object.style.MozOpacity != null)
        {
            object.style.MozOpacity = opaVal / 100;
        }
        else if(object.style.opacity != null)
        {
            object.style.opacity = opaVal / 100;
        }
    },

    // Fade out object
    FadeOut: function(object, startOpacity, endOpacity, opacityDecrement, timeout, callback)
    {
        var SetOpacity = this.ApplyOpacity;

        SetOpacity(object, startOpacity);

        var currentOpacity = startOpacity;

        function doAnimation()
        {
            currentOpacity -= opacityDecrement;

            if(currentOpacity < endOpacity)
            {
                SetOpacity(object, endOpacity);
                if(callback) callback();

                clearInterval(evnt);
            }
            else
            {
                SetOpacity(object, currentOpacity);
            }
        }

        var evnt = setInterval(doAnimation, timeout);
    },

    submitDetails: function(button,jid)
    {
        document.getElementById('allApplyNow').disabled = true;
        var form = button.parentNode.parentNode;

        var lname = document.getElementById("lastname").value;
        var fname = document.getElementById("firstname").value;
        var email = document.getElementById("email").value;
        var pattern=/^([a-zA-Z0-9_.-])+@([a-zA-Z0-9_.-])+\.([a-zA-Z])+([a-zA-Z])+/;
//        alert(pattern.test(email));
//        var ctc = document.getElementById("ctc").value;
//        var ectc = document.getElementById("ectc").value;
//        var noticeperiod = document.getElementById("noticeperiod").value;
        var attachment = document.getElementById("attachment").value;

        if(fname.length == 0)
            {
//                alert("We need to know your name to help you get a job");
                document.getElementById("firstname").style.border = '#ff0000 1px solid';
                document.getElementById("FirstCheck_" + this.WIDGET_ID).style.display='';                
                return;
            }

        else if(lname.length == 0)
            {
                document.getElementById("lastname").style.border = '#ff0000 1px solid';
                document.getElementById("SecondCheck_" + this.WIDGET_ID).style.display='';
                return;
            }
        else if(email.length == 0)
            {
//                alert("If you don't provide us your email address, how can we contact you");
                document.getElementById("email").style.border = '#ff0000 1px solid';
                document.getElementById("MailCheck_" + this.WIDGET_ID).style.display='';
                return;
            }
        else if(pattern.test(email) != true)
            {
                document.getElementById("email").style.border = '#ff0000 1px solid';
                document.getElementById("MailCheck_" + this.WIDGET_ID).innerHTML = 'Your Email Address is not Valid'
                document.getElementById("MailCheck_" + this.WIDGET_ID).style.display='';
                return;
            }
        else if(attachment.length == 0)
            {
//                alert("Please atttach your resume");
                document.getElementById("attachment").style.border = '#ff0000 1px solid';
                document.getElementById("AttCheck_" + this.WIDGET_ID).style.display='';
                return;
            }

        form.encoding = "multipart/form-data";
        form.target = document.getElementById("applyNow_"+jid);
        form.submit();

        alert("Resume sent!");
        document.getElementById("tab_4_Contents_" + this.WIDGET_ID).innerHTML = "<div class=\"rnrHeader\">Your Resume has been succesfully sent.<br><br> Feel free to apply for more jobs<br><br>You can visit us at <a onmouseover=\"this.style.background='transparent';\" href=\"http://sutrajobs.com\">SutraJobs.com</a></div>";
//        showTab(4);
        this.CloseAnimator();
        button.onclick = function()
        {
            alert("You've already applied for this job.");
        }
    },

    FormReset: function(element)
    {
        element.style.border = '';
        element.parentNode.childNodes[3].style.display = 'none';
    },
}