/////////////////////////////////////////////////////
//  jquery store locator redev
/////////////////////////////////////////////////////
var map;
var directions;

function checkAddress(formId) {
    var address = $jq("form[id='" + formId + "'] input[id='address']").attr("value");
    var radius = $jq("form[id='" + formId + "'] input[id='radius']").attr("value");
    if (address == '') {
        alert('Please enter an address in the field provided.');
        return false;
    } else {
        // change the mouse pointer to indicate something is happening...
        document.body.style.cursor='wait';
        var lat=null;
        var lng=null;
        var geocoder = new GClientGeocoder();
        geocoder.setBaseCountryCode("GB");
        geocoder.getLatLng(address, function(point) {
            if (!point) {
                $jq('#term_node').html(address);
                $jq('#suggestions_node').show();
                document.body.style.cursor='default';
                return false;
            } else {
                // show some kind of a progress indicator?
                arrayESO = new Array;
                arraySS = new Array;
                lat = point.lat();
                lng = point.lng();
                var query_string = 'action=check_doors&address='+address+'&latitude='+lat+'&longitude='+lng+'&radius='+radius;
                $jq("input:checkbox[name=event_stores_only]:checked").each(function() {
                    //query_string += "&event_stores_only[]=" + $jq(this).val();
                    arrayESO.push($jq(this).val());
                });
                $jq("input:checkbox[name=show_stores]:checked").each(function() {
                    //query_string += "&show_stores[]=" + $jq(this).val();
                    arraySS.push($jq(this).val());
                });
                query_string += "&event_stores_only="+arrayESO+"&show_stores="+arraySS;
                $jq.ajax({
                    type: "POST",
                    url: '/locator/js/ajax/loc_query.tmpl',
                    data: query_string,
                    success: function (j) {
                        if (j == 'no_stores_found') {
                            $jq('#term_node').html(address);
                            $jq('#suggestions_node').show();
                            document.body.style.cursor='default';
                            return false;
                        } else {
                            $jq('#suggestions_node').hide();
                            // build json results to pass in submit
                            $jq('#json_results').val(j);
                            // submit the data to store_results.tmpl
                            document.store_search.submit();
                        }
                    }
                });
            }
        });
    }
    return false;
}


function esteeMap(address) {

    $(document).ready(function(){
        /////////////////////////////////////////////
        //     Begin Google Maps
        /////////////////////////////////////////////
        if (GBrowserIsCompatible()) {
            var defaultZoom = 11;
            map = new GMap2(document.getElementById('directions_map'));

            map.addControl(new GLargeMapControl());
            var c = new GMapTypeControl(); // switch map modes
            map.addControl(c);
            map.addMapType(G_PHYSICAL_MAP);
            map.setMapType(G_NORMAL_MAP);
            var geocoder = new GClientGeocoder();
            geocoder.setBaseCountryCode("GB");

			$("#message").appendTo(map.getPane(G_MAP_FLOAT_SHADOW_PANE));

			function displayPoint(marker, infoWinHtml){
				$("#message").hide();
				map.panTo(marker.getLatLng());
				var markerOffset = map.fromLatLngToDivPixel(marker.getLatLng());
				$("#message")
					.fadeIn()
					.html(infoWinHtml)
					.css({ top:markerOffset.y -180, left:markerOffset.x -145 });
			}

            map.clearOverlays();
            $('#suggestions_node').hide();
    		/////////////////////////////////////////////////////
    		// Builds markers and the links that will re-center the map on them
			var markers = [];
			var cnt=0;
			var char_cnt=0;
			var case_char=0;
			var case_cnt=0;
			var subdivTrk=10;
			var subdivNum=0;
			var subdivId = '';

            var sortedDoors = new Array();
            sortedDoors = page_data.search_results.group.distance;
            
            // Walk through the json results in page_data
            $.each(sortedDoors,function(i) {
                var doorid = sortedDoors[cnt];
                var doorObj = page_data.search_results.doors[doorid];
                var doorname = doorObj.DOORNAME;
                
                // pagination for left store results area
                if (subdivTrk == 10) {
                    subdivTrk=0;
                    subdivNum++;
                    subdivId = "results_container"+subdivNum;
                    subDiv = document.createElement('div');
                    subDiv.id = subdivId;
                    subDiv.className = 'store_result_list';
                    //subDiv.setAttribute("style","display:none");
                    subcontentDiv = document.createElement('div');
                    subcontentDivId = 'content_controls'+subdivNum;
                    subcontentDiv.id = subcontentDivId;
                    subcontentDiv.className = 'content_controls';
                    //subcontentDiv.setAttribute("style","display:none");
                    $("#content_controls").append(subcontentDiv);
                    $("#results_placeholder").append(subDiv);
                    $('#'+subcontentDivId).hide();
                    $('#'+subdivId).hide();
                }

                var point = new GLatLng(doorObj.latitude, doorObj.longitude);

                // Alpha numerics on the markers - A-Z then a-z then A1, B1, etc
                var letter = String.fromCharCode("A".charCodeAt(0) + case_char);
                
                if (char_cnt == 26) {
                    // change to lower case
                    letter = 'a';
                    case_char=0;
                } else if (char_cnt == 52) {
                    // repeat upper case + increment number 
                    letter = 'A';
                    case_cnt++;
                    char_cnt=0;
                    case_char=0;
                }
                if (char_cnt >= 26) {
                    letter = letter.toLowerCase();
                }
                if (cnt >= 52) {
                    // Add increment number to alpha char
                    letter += case_cnt;
                }
                //
                
                var baseIcon = new GIcon(G_DEFAULT_ICON);
                baseIcon.image = "/locator/images/common/ico_map_marker.png";
                baseIcon.shadow = "http://www.google.com/mapfiles/shadow50.png";
                //baseIcon.iconSize = new GSize(20, 34);
                //baseIcon.shadowSize = new GSize(37, 34);
                baseIcon.iconSize = new GSize(15, 30);
                baseIcon.shadowSize = new GSize(32, 30);
                baseIcon.iconAnchor = new GPoint(9, 34);
                baseIcon.infoWindowAnchor = new GPoint(9, 2);
                markerOptions = { icon:baseIcon,
                                  labelText: letter,
                                  labelClass: "LabeledMarker_markerLabel",
                                  labelOffset: new GSize(-6, -32)
                                };

                var marker = new LabeledMarker(point, markerOptions);

                map.addOverlay(marker);

                var infoWinHtml = renderInfoWin(doorObj);

                // build store_result pane link
                var storeResultHtml = renderStoreResults(doorObj, letter);

				$("<ul />")
					.html(storeResultHtml)
					.appendTo("#"+subdivId);

					$('#ico_marker_'+doorid).click(function(){
						displayPoint(marker, infoWinHtml);
					});

					$('#resultrow_maplink_'+doorid).click(function(){
						displayPoint(marker, infoWinHtml);
					});

				GEvent.addListener(marker, 'click', function(){
                        displayPoint(marker, infoWinHtml);
                });

                markers[cnt] = marker;
				cnt++;
				case_char++;
				char_cnt++;
				subdivTrk++;
            });
		    $("#content_controls1").show();
		    $("#results_container1").show();

            // Left side counters pane pagination
            if (cnt > 10) {
                var startRes=1;
                var endRes = 10;
                var pgMenu='<ul class="loc_pagination">';
                for (var i=1; i <= subdivNum; i++) {
                    if (endRes > cnt) {
                        endRes = cnt;
                    }
                    $("#content_controls"+i).append("Viewing results <b>"+startRes+"-"+endRes+"</b> of <b>"+cnt+"</b> for search <b>\""+address+"\"</b>");
                    startRes += 10;
                    endRes += 10;
                    pgInitial = '';
                    if (i == 1) {
                        pgMenuClass = 'first';
                        pgInitial = ' selected';
                    } else if (i == subdivNum) {
                        pgMenuClass = 'last';
                    } else {
                        pgMenuClass = '';
                    }
                    pgMenu += "<li class='"+pgMenuClass+"'><a id='pagination_num"+i+"' href='javascript:void(0);' class='"+pgInitial+"' onClick=\"tglSrchResults("+i+","+cnt+","+subdivNum+")\">"+i+"</a></li>";
                }
                pgMenu += "</ul><div class='clear'></div>";
                var pgMenuPretty = pgMenu.replace(/&nbsp; \| &nbsp;<\/li>$/, "");
                $("#content_controls").prepend(pgMenuPretty+"<br>");
            } else {
                $("#content_controls").append("Viewing results <b>1-"+cnt+"</b> of <b>"+cnt+"</b> for search <b>\""+address+"\"</b>");
            }

            $('#results_placeholder').show();
            $('#pane_store_search').hide();
            map.setCenter(markers[0].getLatLng(), defaultZoom);

            // attempt to make the left & main columns the same height
            matchHeight=function(){
                 var divs,contDivs,maxHeight,divHeight,d;
                 // get all <div> elements in the document
                 divs=document.getElementsByTagName('div');
                 contDivs=[];
                 // initialize maximum height value
                 maxHeight=0;
                 // iterate over all <div> elements in the document
                 for(var i=0;i<divs.length;i++){
                      // make collection with <div> elements with class attribute 'content_pane_left' or 'locTab'
                      if(/\b(content_pane_left|locTab)\b/.test(divs[i].className)){
                            d=divs[i];
                            contDivs[contDivs.length]=d;
                            // determine height for <div> element
                            if(d.offsetHeight){
                                 divHeight=d.offsetHeight;
                            }
                            else if(d.style.pixelHeight){
                                 divHeight=d.style.pixelHeight;
                            }
                            // calculate maximum height
                            maxHeight=Math.max(maxHeight,divHeight);
                      }
                 }
                 // stretch main col to left col height
                 document.getElementById('tabs').style.height=maxHeight+'px';
            }
            if(document.getElementsByTagName){
                matchHeight();
            }
        } else {
            alert('Your browser is not compatible with Google Maps');
        }
        /////////////////////////////////////////////
        //     End Google Maps
        /////////////////////////////////////////////

        /////////////////////////////////////////////
        // Left pane toggle between search and store result
        $('a#tgl_srch').click(function(){
            $('#pane_store_search').show();
            $('#content_controls').hide();
            $('#panel_counters').hide();
            $('#results_placeholder').hide();
        });

        /*$('a#tgl_cntrs').click(function(){
            $('#content_controls').show();
            $('#results_placeholder').show();
            $('#pane_store_search').hide();
        });*/

        $('a#tgl_dirctns').click(function(){
            $('#content_controls').hide();
            //$('#results_placeholder').hide();
            $('#pane_store_search').hide();
            $('#directions_panel').show();
        });
        // End left pane toggle

        $('a#close_btn').click(function(){
            $('#message').hide();
        });
        /////////////////////////////////////////////

    });
}

function tglSrchResults(i,cnt,pgncnt) {
    for (var o=1; o<=cnt; o++) {
        $('#content_controls'+o).hide();
        $('#results_container'+o).hide();
    }
    for (var p=1; p<=pgncnt; p++) {
        $('#pagination_num'+p).removeClass('selected');
    }
    $('#content_controls'+i).show();
    $('#results_container'+i).show();
    if ((document.getElementById) && (document.getElementById('pagination_num'+i) != null)) {
        $('#pagination_num'+i).addClass('selected');
    }
    return;
}

function closeInfoWin() {
    $('#message').hide();
    return true;
}

function showDirForm(door_id) {
    $('#infowindow_dirtarget_'+door_id).hide();
    $('#infowindow_dirform_'+door_id).show();
    $('#infowindow_start_address').focus();
    return;
}

// This function renders the left store result pane, or 'ESTEE LAUDER COUNTERS' area
function renderStoreResults(v,map_marker_letter) {
    for (var t in v) {
        if (v[t] == null) {
            v[t] = '';  // keeps from displaying 'null'
        }
    }
    var html = '<li id="site_locator__ResultRow_'+v.DOOR_ID+'" class="store_location">\n';
    html += '    <span id="ico_marker_'+v.DOOR_ID+'" class="ico_map_marker"><a href="javascript:void(0)">'+map_marker_letter+'</a></span>\n';
    html += '    <div id="resultrow_'+v.DOOR_ID+'" class="store" style="margin-left: 25px;">\n';
    html += '        <div class="store_name">\n';
    html += '            <a id="resultrow_maplink_'+v.DOOR_ID+'" href="javascript:void(0)">'+v.DOORNAME+'</a>\n';
    html += '        </div>\n';
    html += '        <div class="store_contact">\n';
    html += '            <address>\n';
    html += '                '+v.ADDRESS+'\n';
    html += '                <br/>\n';
    html += '                '+v.CITY+', '+v.STATE_OR_PROVINCE+' '+v.ZIP_OR_POSTAL+'\n';
    html += '            </address>\n';
    html += '            <span class="store_distance">Distance: '+v.sdist+' miles</span>\n';
    if (v.PHONE1 != '') {
        html += '            <span class="store_phone">'+v.PHONE1+'</span>\n';
    }
    if (v.STORE_HOURS != '') {
        html += '            <span class="store_hours">Hours: '+v.STORE_HOURS+'</span>\n';
    }
    html += '        </div>\n';
    html += '    </div>\n';
    html += '</li>\n';
    return html;
}


function renderInfoWin(c) {
    // This function renders the infoWindow that appears on the map when a marker is selected
    for (var t in c) {
        if (c[t] == null) {
            c[t] = '';  // keeps from displaying 'null'
        }
    }
    if (c.sdist == undefined) {
        c.sdist = '0.0';
    }
    var html = '<div class="overlay_layer store_overlay">\n';
    html += '            <a href="javascript:void(0)" id="close_btn" class="close_btn" onClick="closeInfoWin();">Close</a>\n';
    html += '			<div id="infowindow_'+c.DOOR_ID+'" class="store">\n';
    html += '				<div class="store_name">\n';
    html += '					<a href="#">'+c.DOORNAME+'</a>\n';
    html += '				</div>\n';
    html += '				<div class="store_contact">\n';
    html += '					<address>\n';
    html += '						'+c.ADDRESS+'<BR>\n';
    html += '						'+c.CITY+', '+c.STATE_OR_PROVINCE+' '+c.ZIP_OR_POSTAL+'\n';
    html += '					</address>\n';
    html += '					<span class="store_distance">Distance: '+c.sdist+' miles</span>\n';
    if (c.PHONE1 != '') {
        html += '					<span class="store_phone">'+c.PHONE1+'</span>\n';
    }
    if (c.STORE_HOURS != '') {
        html += '					<span class="store_hours">Hours: '+c.STORE_HOURS+'</span>\n';
    }
    html += '				</div>\n';

    html += '				<ul class="store_events ${events_class}">\n';

    for( var idx in c.EVENTS ){
        var evt = c.EVENTS[idx];
        html += '					<li id="infowindow_event_image_wrap_'+c.DOOR_ID+'_'+idx+'">\n';
        html += '						<img id="infowindow_event_image_large_'+c.DOOR_ID+'_'+idx+'" class="event_image_large" src="/locator/images/'+evt['image']+'_150x150.jpg" width="150" height="150" alt="" />\n';
        html += '						<span class="clickable">\n';
        html += '							<img id="infowindow_event_image_'+c.DOOR_ID+'_'+idx+'" class="event_image" src="/locator/images/'+evt['image']+'_60x40.jpg" width="60" height="40" alt="" />\n';
        html += '						</span>\n';
        html += '						<h6 class="event_title">' + evt['NAME'] + '</h6>\n';
        html += '						<span class="event_date">\n';
        html += '							<span class="date_begin">' + evt['START_DATE'] + '</span> - \n';
        html += '							<span class="date_end">' + evt['END_DATE'] + '</span>\n';
        html += '						</span>\n';
        html += '					</li>\n';
    }

    html += '				</ul>\n';

    html += '			</div>\n';
    html += '           <div id="infowindow_dirtarget_'+c.DOOR_ID+'" class="action_btn">\n';
    html += '				<a href="javascript:void(0)" onclick="showDirForm(\''+c.DOOR_ID+'\');">Get Directions</a>\n';
    html += '				<span class="action_mark">&nbsp;&raquo;</span>\n';
    html += '			</div>\n';

    html += '           <div id="infowindow_dirform_'+c.DOOR_ID+'" class="form_block form_get_directions hidden">\n';
    html += '				<form name="fm_get_directions" id="fm_get_directions" onsubmit="return getDirections(this.id)">\n';
    html += '               <div class="form_item">\n';
    html += '                   <label>Enter start address to get directions:</label>\n';
    html += '                   <input id="infowindow_start_address" type="text" class="form_text" maxlength="255" value="" onClick="this.focus();"/>\n';
    html += '               </div>\n';

    html += '               <div class="action_btn">\n';
    html += '					<input type="hidden" name="infowindow_door_id" id="infowindow_door_id" value="'+c.DOOR_ID+'" />\n';
    html += '					<input type="hidden" name="infowindow_query_address" id="infowindow_query_address" value="" />\n';
    html += '					<input type="image" class="form_submit" src="/locator/images/btn/btn_get_directions.gif" alt="Get Directions" />\n';
    html += '				</div>\n';
    html += '				<div id="direction_error_'+c.DOOR_ID+'" class="direction_suggestions hidden">\n';
    html += '					Could not calculate directions. Please re-enter Start Address.\n';
    html += '				</div>\n';
    html += '				</form>\n';
    html += '           </div>\n';
    html += '		</div>\n';
    return html;
}

function getDirections(formId) {
    var endLat;
    var endLng;
    var locale = "en_UK";
    var startAddress = $jq("form[id='" + formId + "'] input[id='infowindow_start_address']").attr("value");
    var door_id = $jq("form[id='" + formId + "'] input[id='infowindow_door_id']").attr("value");
    $.each(page_data.search_results.doors,function(i) {
        if (door_id == this.DOOR_ID) {
            endLat = this.latitude;
            endLng = this.longitude;
            address = this.ADDRESS;
            address2 = this.ADDRESS2;
            city = this.CITY;
            state = this.STATE_OR_PROVINCE;
            zip = this.ZIP_OR_POSTAL;
            country = this.COUNTRY;
        }
    });
    var endAddress = endLat + ', ' + endLng;
    //$('#results_placeholder').hide();
    $('#pane_store_search').hide();
    $('#directions_panel').show();
    if (directions) { directions.clear(); }
    var directionsPanel = document.getElementById("directions_placeholder");
    directions = new GDirections(map, directionsPanel);
    GEvent.addListener(directions, "error", function(){
        // If unable to find directions using coordinates, try using the address
        var direction_address = address + ' ' + city + ', ' + zip;
        var direction_address2 = address2 + ' ' + city + ', ' + zip;
        if ((endAddress != direction_address) && (endAddress != direction_address2)) {
            //alert("from "+startAddress+" to "+endAddress+"  -  new search: "+direction_address);
            endAddress = direction_address;
            directions.load("from: "+startAddress+" to: "+endAddress, {locale:locale});
            return;
        } else if (endAddress != direction_address2) {
            endAddress = direction_address2;
            if (address2) {
                //alert("from "+startAddress+" to "+endAddress+"  -  new search2: "+direction_address2);
                directions.load("from: "+startAddress+" to: "+endAddress, {locale:locale});
                return;
            }
        }
        
        directions.clear();
        $('#directions_panel').hide();
        $('#results_placeholder').show();
        $('#direction_error_'+door_id).show();
        $('#infowindow_start_address').focus();
        return false;
    });
    GEvent.addListener(directions, "load", closeInfoWin);
    //alert("from "+startAddress+" to "+endAddress);
    directions.load("from: "+startAddress+" to: "+endAddress, {locale:locale});
    

    return false;
}

jQuery.fn.sort = function() {
    return this.pushStack( [].sort.apply( this, arguments ), []);
};
function sortDistance(a,b){
    if (a.distance == b.distance){
        return 0;
    }
    return a.distance> b.distance ? 1 : -1;
};

function checkUncheck(cb) {
    if (cb.checked == true) {
        cb.checked = false;
    } else {
        cb.checked = true;
    }
    return;
}