/*********************************************************************************************************************
Date picker is being written by 'Sunny Jagwani' 28th Nov 2005 [sunny.jags@gmail.com]
This code is written at Almighty Technologies, bhopal.
/*********************************************************************************************************************
Use Instructions:
First you need to call this script file in your page in following way:
<script src="MyCalendar.js"></script>
(write this line in header section for better possible results)
To use this caledar with your text box you need to attach call funciton this way
put any anchor beside your textbox and call the funtion like it:
<input type=text runat=server id="txtSample" maxlength=12 readonly>
<a href="#" onclick="displayCalendar(event,'txtSample');">Calendar</a>
You need to paas textbox id in function as well as event keyword (which is object of window.event.)
 
OR just call it with textbox only like:
<input type=text runat=server id="txtSample" maxlength=12 readonly onclick="displayCalendar(event,'txtSample');" >
 
With IE it will automatically open and close javascrit calendar on focus and lost focus. (but After first click only)
With FireFox you need to call one more event with text box like onkeydown="hideCalendar(event);" 
 
<input type=text runat=server id="txtSample" maxlength=12 readonly onclick="displayCalendar(event,'txtSample');" onkeydown="hideCalendar(event);" >
 
Make sure this setting is for read only text box. Means you need to set onkeydown event only if you are using readonly textbox.
onkeypress event will check for tab key press to change focus from date textbox to another control
/*********************************************************************************************************************
Terms and conditions:
This code is free to use by anyone. But you need to follow following conditions:
1. Comment from this code should not be changed in any case
2. Actual Author Name should be maintained in  code file in any case
/*********************************************************************************************************************
Code testing:
This javascript calendar has been test under IP and firefox. This has not been tested yet with opera and other browsers. 
Update:
Date 21st Mar 2007
One more update has been done for this calendar control By Sunny. Now we are also able to pass the default year with function call.
So if any year passed then it will display calendar start with that year only. 
Full year need to be passed here
       
Also things have been done to read the existing date value from the text box. Means if there is any existing date value found in 
text box with desirend format then it will open calendar with that value and will forget about all other conditions.
*********************************************************************************************************************/

var monthList = ['January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November', 'December'];
var monthListShort = ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'];
var toDate = new Date();
var currentDate = new Date();
toDate.setDate(1);
toDate.getTheYear = toDate.getFullYear ? toDate.getFullYear : toDate.getYear;
var mainTableStyle = "font-size:7pt;border:1pt solid gray;background-color:#F5F6F0";
var dateNumberStyle = "color:#713155;text-decoration:none;font-weight:bold;font-size:8pt;";
var dateLinkDefaultStyle = "background-color:#ffffff;Font-Size:8pt;Font-Family:verdana;";
var dateLinkHOverStyle = "background-color:#DEEBFA;font-Weight:bold;Font-Size:8pt;Font-Family:verdana;";
var dateLinkSelectedStyle = "background-color:#713155;font-Weight:bold; Font-Size:9pt;Font-Family:verdana;";
var thisDateStyle = "background-color:#e3e3e3;font-Weight:bold;Font-Size:8pt;Font-Family:verdana;";
var monthYearHeaderStyle = "background-color:#F5F6F0;font-weight:bold;font-size:8pt;font-family:verdana;color:#000000;";
var monthHeaderLinkStyle = "color:Black;font-size:8pt;font-weight:bold;text-decoration:none;";
var dayHeaderStyle = "background-color:#515282;font-Weight:bold; Font-Size:9pt;Font-Family:verdana;color:WhiteSmoke";
var weekDayStyle = "background-color:#F5F6F0;font-Weight:normal; Font-Size:8pt;Font-Family:verdana;";
var tmpStorePreviousStyle;
var textBoxControl;
var xPos;
var yPos;
var monthDayCount = [31, ((!(toDate.getTheYear() % 4) && ((toDate.getTheYear() % 100) || !(toDate.getTheYear() % 400))) ? 29 : 28), 31, 30, 31, 30, 31, 31, 30, 31, 30, 31];
function displayCalendar(e, txtId, year) {
    textBoxControl = document.getElementById(txtId);
    if (!textBoxControl)
    { alert('Actual Calendar implementation object not found'); return; }
    //Check if there is any existing value in text box. if found then open calendar with that date
    //alert(textBoxControl.value.split("-").length);
    if (textBoxControl.value != '' && textBoxControl.value.split("-").length == 3) {
        parseAndSetDate(textBoxControl.value);
    }
    else {
        //Call function to set date to current date, (Which is default)
        resetDate();
        //Here set the calendar with  passed year, if passed
        if (year) { toDate.setFullYear(year); }
    }
    var sX = 0, sY = 0;
    if (!e) { e = window.event; }
    /*if( e && ( e.screenX || e.screenY ) && screen.availWidth ) { sX = e.screenX; sY = e.screenY; }
    if(window.screenLeft>=0)
    { sX=sX-window.screenLeft;} 
    else 
    {sX=textBoxControl.offsetLeft+textBoxControl.offsetWidth;}
    if(window.screenTop>=0)
    { sY=(sY-window.screenTop)+65;} 
    else 
    {if (textBoxControl.offsetTop>10)
    {sY=textBoxControl.offsetTop;}
    }*/
    var aTag = textBoxControl;
    sY += aTag.offsetHeight;
    do {
        sX += aTag.offsetLeft;
        sY += aTag.offsetTop;
        aTag = aTag.offsetParent;
    } while (aTag.tagName.toUpperCase() != 'BODY');
    xPos = sX; yPos = sY; DrawCalendar();
    textBoxControl.onfocus = DrawCalendar;
    if (navigator.appName.indexOf("Microsoft") >= 0 && textBoxControl.getAttribute("readonly") == true)
        textBoxControl.onkeydown = CheckForLostFocus;
}
function CheckForLostFocus() {
    if (navigator.appName.indexOf("Microsoft") >= 0)
    { if (event.keyCode == 9) fnEmptyControl(); }
}
function hideCalendar(e) {
    if (!e) { e = window.event; }
    if (e.keyCode == 9) { fnEmptyControl(); }
}
function parseAndSetDate(value) {
    try {
        var dt = parseInt(value.split("-")[0]);
        var mh = value.split("-")[1];
        var yr = parseInt(value.split("-")[2]);
        var iM = 0;
        for (iM = 0; iM < monthListShort.length; iM++) {
            if (monthListShort[iM] == mh) {
                break;
            }
        }
        toDate.setFullYear(yr, iM, dt);
    }
    catch (e) {
        alert(e.message);
        //do nothing but set as current date
        resetDate();
    }

}
function resetDate() {
    toDate.setTime((new Date()).getTime());
}
function DrawCalendar() {
    monthDayCount[1] = ((!(toDate.getTheYear() % 4) && ((toDate.getTheYear() % 100) || !(toDate.getTheYear() % 400))) ? 29 : 28);
    //[<a style="'+monthHeaderLinkStyle+'" href="javascript:fnGetThisDate();"><font size="-2">Today</font></a>]
    //currentDate.getMonth()+1 + "/" + currentDate.getDate() + "/" +currentDate.getFullYear())
    var templateData = '<div><table border="0" cellpadding="0" cellspacing="1" width="180" style="' + mainTableStyle + '"><tr><td colspan="7"><table border="0" cellpadding="2" cellspacing="0" style="' + monthYearHeaderStyle + '" width="100%" ><tr><td ><a style="' + monthHeaderLinkStyle + '" href="javascript:fnGetPreviousYear()">&lt;&lt;</a></td><td align="center"  style="' + monthYearHeaderStyle + '">' + toDate.getTheYear() + '</td><td align="right"><a style="' + monthHeaderLinkStyle + '" href="javascript:fnGetNextYear();">&gt;&gt;</a></td></tr><tr><td><a style="' + monthHeaderLinkStyle + '" href="javascript:fnPreviousMonth()">&lt;&lt;</a></td><td align="center"  style="' + monthYearHeaderStyle + '">' + monthList[toDate.getMonth()] + ' </td><td align="right"><a style="' + monthHeaderLinkStyle + '" href="javascript:fnGetNextMonth();">&gt;&gt;</a></td></tr></table></td></tr><tr style="' + dayHeaderStyle + '"><th >S</th><th >M</th><th >T</th><th >W</th><th >T</th><th >F</th><th >S</th></tr>'; for (var x = 1; x <= monthDayCount[toDate.getMonth()]; x++) { toDate.setDate(x); if (x == 1 && toDate.getDay()) { templateData += '<tr><td  colspan="' + toDate.getDay() + '">&nbsp;</td>'; } templateData += ((!toDate.getDay()) ? '<tr>' : '') + '<td onMouseOver="ChangeBoxStyleOnOver(this);" onMouseOut="ChangeBoxStyleOnOut(this);" align="center" style="' + ((toDate.getMonth() == (new Date()).getMonth() && toDate.getYear() == (new Date()).getYear() && x == (new Date()).getDate()) ? thisDateStyle : ((!toDate.getDay() || toDate.getDay() == 6) ? weekDayStyle : dateLinkDefaultStyle)) + '"><a style="' + dateNumberStyle + '" href="javascript:fnSelectDateToBox(' + x + ');">' + x + '</a></td>'; } toDate.setDate(1); templateData += '</tr><tr style="' + dayHeaderStyle + '"><td align=center style="cursor:hand" title="Clear" OnClick="textBoxControl.value=\'\';fnEmptyControl();" ><a href="#" style="font-size:8pt;color:White;text-decoration:none">/</td><td colspan="5" style="color:White;" align="center">' + ((textBoxControl.value != "") ? textBoxControl.value : currentDate.getDate() + "-" + monthListShort[currentDate.getMonth()] + "-" + currentDate.getFullYear()) + '</td><td align=center style="cursor:hand" OnClick="fnEmptyControl();" title="Cancel" ><a href="#" style="font-size:8pt;color:White;text-decoration:none">X</td></tr></table></div>';
    fnEmptyControl(); var divControl = document.createElement("div"); divControl.id = "divCalendarSJ"; divControl.innerHTML = templateData; divControl.style.position = "absolute"; divControl.style.left = xPos; divControl.style.top = yPos; divControl.style.display = "block"; textBoxControl.parentNode.appendChild(divControl); hideElement("SELECT", divControl);
}
function fnGetPreviousYear() { toDate.setYear(toDate.getTheYear() - 1); DrawCalendar(); }
function fnPreviousMonth() { if (toDate.getMonth()) { toDate.setMonth(toDate.getMonth() - 1); } else { toDate.setMonth(11); toDate.setYear(toDate.getTheYear() - 1); } DrawCalendar(); }
function fnGetNextYear() { toDate.setYear(toDate.getTheYear() + 1); DrawCalendar(); }
function fnGetNextMonth() { if (toDate.getMonth() < 11) { toDate.setMonth(toDate.getMonth() + 1); } else { toDate.setMonth(0); toDate.setYear(toDate.getTheYear() + 1); } DrawCalendar(); }
function fnGetThisDate() { resetDate(); DrawCalendar(); }
function fnEmptyControl() { if (textBoxControl.parentNode.childNodes.length > 1) { var childNodes = textBoxControl.parentNode.childNodes; if (childNodes[childNodes.length - 1].id && childNodes[childNodes.length - 1].id == "divCalendarSJ") textBoxControl.parentNode.removeChild(childNodes[childNodes.length - 1]); } showElement("SELECT"); if (document.getElementById("divCalendarSJ")) { document.getElementById("divCalendarSJ").innerHTML = ""; } }
//toDate.getMonth()+1 + "/"+ day + "/" + toDate.getFullYear();
function fnSelectDateToBox(day) { textBoxControl.value = day + "-" + monthListShort[toDate.getMonth()] + "-" + toDate.getFullYear(); fnEmptyControl(); }
function ChangeBoxStyleOnOver(cntrl) { tmpStorePreviousStyle = cntrl.getAttribute("style"); cntrl.setAttribute("style", dateLinkHOverStyle) } function ChangeBoxStyleOnOut(cntrl) { cntrl.setAttribute("style", tmpStorePreviousStyle) }
function hideElement(elmID, overDiv) {
    if (navigator.appName.indexOf("Microsoft") >= 0) {
        for (i = 0; i < document.all.tags(elmID).length; i++) {
            obj = document.all.tags(elmID)[i];
            if (!obj || !obj.offsetParent) continue;

            // Find the element's offsetTop and offsetLeft relative to the BODY tag.
            objLeft = obj.offsetLeft;
            objTop = obj.offsetTop;
            objParent = obj.offsetParent;

            while (objParent.tagName.toUpperCase() != 'BODY') {
                objLeft += objParent.offsetLeft;
                objTop += objParent.offsetTop;
                objParent = objParent.offsetParent;
            }

            objHeight = obj.offsetHeight;
            objWidth = obj.offsetWidth;

            if ((overDiv.offsetLeft + overDiv.offsetWidth) <= objLeft);
            else if ((overDiv.offsetTop + overDiv.offsetHeight) <= objTop);
            else if (overDiv.offsetTop >= (objTop + objHeight + obj.height));
            else if (overDiv.offsetLeft >= (objLeft + objWidth));
            else {
                obj.style.visibility = 'hidden';
            }
        }
    }
}

/*
* unhides <select> and <applet> objects (for IE only)
*/
function showElement(elmID) {
    if (navigator.appName.indexOf("Microsoft") >= 0) {
        for (i = 0; i < document.all.tags(elmID).length; i++) {
            obj = document.all.tags(elmID)[i];
            if (!obj || !obj.offsetParent) continue;
            obj.style.visibility = '';
        }
    }
}

function load() {
    if (GBrowserIsCompatible()) {
        var map = new GMap2(document.getElementById("map"));
        var point;
        point = new GLatLng(55.378051, -3.435973);
        geocoder = new GClientGeocoder();
        map.setCenter(point, 1);
    }
    else {
        alert("Sorry, the Google Maps API is not compatible with this browser");
    }
}

function loadHotelMap(lat, longtitude, hotelname, city, country, address, imgurl) {

    if (GBrowserIsCompatible()) {
        var map = new GMap2(document.getElementById("map"));
        map.enableDoubleClickZoom();
        map.enableScrollWheelZoom();
        map.setUIToDefault();
        var baseIcon = new GIcon(G_DEFAULT_ICON);
        baseIcon.shadow = "http://www.google.com/mapfiles/shadow50.png";
        baseIcon.infoWindowAnchor = new GPoint(9, 5);
        var side_bar_html = "";
        var gmarkers = [];
        var i = 0;
        var lastlinkid;
        function createMarker(point, html) {
            var letter = String.fromCharCode("A".charCodeAt(0) + 0);
            var letteredIcon = new GIcon(baseIcon);
            letteredIcon.image = "http://www.google.com/mapfiles/marker" + letter + ".png";
            markerOptions = { icon: letteredIcon };
            var marker = new GMarker(point, markerOptions);
            var linkid = "link" + 0;
            GEvent.addListener(marker, "click",
                function() {
                    marker.openInfoWindowHtml(html);
                    lastlinkid = linkid;
                }
            );
            gmarkers[1] = marker;
            return marker;
        }
        function Linkclicked(i) { GEvent.trigger(gmarkers[i], "click"); }
        if (document.getElementById("hdnlat_" + lat).value != "0" && document.getElementById("hdnlng_" + longtitude).value != "0") {
            point = new GLatLng(document.getElementById("hdnlat_" + lat).value, document.getElementById("hdnlng_" + longtitude).value);
            var center = new GLatLng(document.getElementById("hdnlat_" + lat).value, document.getElementById("hdnlng_" + longtitude).value);
            var marker = new GMarker(point);
            
            var latNew = document.getElementById("hdnlat_" + lat ).value;
            var lagNew = document.getElementById("hdnlng_" + longtitude).value;
            var cityNew = document.getElementById("hdncity_" + city).value;
            var countryNew = document.getElementById("hdncountry_" + country ).value;
            var addressNew = document.getElementById("hdnaddress_" + address ).value;
            var hotelnameNew = document.getElementById("hdnhotelname_" + hotelname).value;
            var imgurlnew = document.getElementById("hdnimgid_" + imgurl).value;
            marker = createMarker(center, gethtml(hotelnameNew, cityNew, countryNew, addressNew, imgurlnew))
            map.addOverlay(marker);
            map.setCenter(point, 12);
            marker = null;
        }
    }
    else {
        alert("Sorry, the Google Maps API is not compatible with this browser");
    }
}
function fngetmap() {

    if (GBrowserIsCompatible()) {
        var map = new GMap2(document.getElementById("map"));
        map.enableDoubleClickZoom();
        map.enableScrollWheelZoom();
        map.setUIToDefault();
        var baseIcon = new GIcon(G_DEFAULT_ICON);
        baseIcon.shadow = "http://www.google.com/mapfiles/shadow50.png";
        //baseIcon.iconSize = new GSize(20, 34);
        //baseIcon.shadowSize = new GSize(37, 34);
        //baseIcon.iconAnchor = new GPoint(9, 34);
        baseIcon.infoWindowAnchor = new GPoint(9, 5);
        var side_bar_html = "";
        var gmarkers = [];
        var i = 0;
        var lastlinkid;
        function createMarker(point, html) {
            var letter = String.fromCharCode("A".charCodeAt(0) + jcountc);
            var letteredIcon = new GIcon(baseIcon);
            letteredIcon.image = "http://www.google.com/mapfiles/marker" + letter + ".png";
            markerOptions = { icon: letteredIcon };
            var marker = new GMarker(point, markerOptions);
            var linkid = "link" + jcountc;
            GEvent.addListener(marker, "click",
                function() {
                    marker.openInfoWindowHtml(html);
                    lastlinkid = linkid;
                }
            );
            gmarkers[jcountc] = marker;
            return marker;
        }
        function Linkclicked(i) {
            GEvent.trigger(gmarkers[i], "click");
        }
        var count = document.getElementById("hdnmapid").value;
        var i_val = document.getElementById("PageIndex").value;
        var jcountc = 0;
        for (var i = 1; i <= count; i++) {
            var lat = document.getElementById("hdnlat_" + i).value;
            var lag = document.getElementById("hdnlng_" + i).value;
            var city = document.getElementById("hdncity_" + i).value;
            var country = document.getElementById("hdncountry_" + i).value;
            var address = document.getElementById("hdnaddress_" + i).value;
            var hotelname = document.getElementById("hdnhotelname_" + i).value;
            var imgurl = document.getElementById("hdnimgid_" + i).value;
            if (lat != "0" && lag != "0") {
                point = new GLatLng(lat, lag);
                var center = new GLatLng(lat, lag);
                var marker = new GMarker(point);
                marker = createMarker(center, gethtml(hotelname, city, country, address, imgurl))
                map.addOverlay(marker);
                map.setCenter(point, 8);
                marker = null;
                jcountc = jcountc + 1;
            }
        }
    }
    else {
        alert("Sorry, the Google Maps API is not compatible with this browser");
    }
}
function gethtml(HotalName, city, country, address, imgurl) {
    var data = "<table cellpadding='2' cellspacing='2' border='0' style='background-color:#E6E6F1'><tr><td valign='top'><img src='" + imgurl + "' width='100px' height='100px' /></td><td valign='top'><table cellpadding='0' cellspacing='0' width='200px'><tr><td align='left'><b> " + HotalName + "</b></td></tr><tr><td align='left'>" + city + "  ,  " + country + "</td></tr><tr><td align='left'>" + address + "</td></tr></table></td></tr><tr><td colspan='2'><hr /></td></tr><tr><td align='left' colspan='2'><b>Stylebible &copy; 2006-2010. All Rights Reserved</b></td></tr></table>"
    htmldata = data;
    return htmldata;
}
function fnShowMaphotel(lat, longtitude, hotelname, city, country, address, imgurl) {
    document.getElementById("divMap").style.display = "block";
    document.getElementById("divStylebiblHotels").style.display = "none";
    loadHotelMap(lat, longtitude, hotelname, city, country, address, imgurl);
}