/*  Shops Finder JavaScript , version 1
 *  This functionality is needed to geocode the address entered by user as per Google Maps API, 
 *  locate the list of stores with in a radius and display them paginated on the webpage.
 *  Copyright (c) 2007-2010 Coca Cola International.  All rights reserved.
 *  Any reproduction, republication, or other use of all or part of any document is prohibited.
 *--------------------------------------------------------------------------*/

	var storeCount;
	var Icon;
	var opt;
        var getAddressInitialValue;
	var resultsPerPage = 10;
	var gmarkers=[];	// Array to remove the markers
	var highlightBackgroundColor = "#f2f2f2"; // Grey color
	var dropDownHighlightColor = "#e1e1e1"; // Light Grey color
	var dropDownNormalColor = "#fff"; // Light Grey color
	var localeName1 = localeName.substring(localeName.lastIndexOf('_')-2);
        var page_index;
	var storesDistance = new Array();
	var storeId =  new Array();
	var storeName =  new Array();
	var storeAddress =  new Array();
	var storeZipcode =  new Array();
	var storeTelephone =  new Array();
	var storeLatitude =  new Array();
	var storeLongitude =  new Array();
	var iconImageArray = new Array();
	var map,xmlRec;
	var geocoder;
	var reqObject = new Object();
		
	for(counter=1;counter<=resultsPerPage;counter++) {	
		iconImageArray[counter] = "../../common/media_asset/vw_icon_"+counter+localeName+".png";
	}
	
	allImagesPreloadArray = new Array();
	allImagesPreloadArray[0] = '../../pages/shops_finder/error_text_fr_FR.gif'; // Error Image
	allImagesPreloadArray[1] = '../../pages/shops_finder/results_text_fr_FR.gif'; // Results Image
	allImagesPreloadArray[2] = '../../common/media_asset/loading_results_fr_FR.gif'; // Loading Results Image
	

/*--------------------------------------------------------------------------
 *	This function is called on Dom Ready
 *  Loads the XML file containing the store addresses
 *--------------------------------------------------------------------------*/

	$j(document).ready(function() {
		$j("#distanceField").val(getDistanceInitialValue);
		$j("#address").val(defaultText);
		$j("form:shopsfinder").submit(function(){return false;});
		getAddressInitialValue = $j("#address").val();
		$j("#address").val(getAddressInitialValue);
		
		$j("#address").focus(function() {
			if(this.value==getAddressInitialValue || this.value==noAddressErrorMessage){
				this.style.color='#000000';
				this.value="";
			}
		});

		$j("#address").blur(function() {
			if(this.value==""){
				this.value=getAddressInitialValue;
			}
		});
		
		$j("#inqTitleShopsFinder").click(function(e) {
			$j("#distanceField").focus();
		});

		$j("#distanceField").keydown(function(e) {
			var key = e.charCode ? e.charCode : e.keyCode ? e.keyCode : 0;
			if(e.keyCode==9) {
				$j("#options").hide();
				$j(".option").css({"background-color" : dropDownNormalColor});
			}			
			if(e.keyCode==40) {
				$j("#options").show();
				$j("#Anchor0").focus().css({"background-color" : dropDownHighlightColor});
				return false;
			}
			//Code for adding the functionality of getting search results on enter hit in option list onlydddd
			if(e.keyCode==13) {
				if(this.value =="" || this.value==getAddressInitialValue || this.value==noAddressErrorMessage) {
					this.style.color = "#ff0000";
					this.value = noAddressErrorMessage;
					return false;
				} else {
					showLocation();
				}
			}
		});
		
		$j(".option").keydown(function(e) {
			var key = e.charCode ? e.charCode : e.keyCode ? e.keyCode : 0;
			if(e.keyCode==9) {
				$j("#options").hide();
				$j("#submitButton").focus();
				return false;
			}
			if(e.keyCode==40) {
				$j(this).next().focus();
				$j(".option").css({"background-color" : dropDownNormalColor});
				$j(this).next().css({"background-color" : dropDownHighlightColor});
				return false;
			}
			if(e.keyCode==38) {
				$j(this).prev().focus();
				$j(".option").css({"background-color" : dropDownNormalColor});
				$j(this).prev().css({"background-color" : dropDownHighlightColor});
				return false;
			}
			//Code for adding the functionality of getting search results on enter hit in option list onlydddd
			if(e.keyCode==13) {
				if(this.value =="" || this.value==getAddressInitialValue || this.value==noAddressErrorMessage) {
					this.style.color = "#ff0000";
					this.value = noAddressErrorMessage;
					return false;
				} else {
					showLocation();
				}
			}
		});
		
		$j(".option:first").keydown(function(e){
			var key = e.charCode ? e.charCode : e.keyCode ? e.keyCode : 0;
			if(e.keyCode==38) {
				$j(".option:first").css({"background-color" : dropDownHighlightColor});
			}
		});
		
		$j(".option:last").keydown(function(e){
			var key = e.charCode ? e.charCode : e.keyCode ? e.keyCode : 0;
			if(e.keyCode==40) {
				$j(".option:last").css({"background-color" : dropDownHighlightColor});
			}
		});
		
		$j(".option").blur(function(){
			$j(this).css({"background-color" : dropDownNormalColor});
		});
		
		$j(".option").mouseout(function(){
			$j(".option").css({"background-color" : dropDownNormalColor});
			}).mouseover(function(){
			$j(".option").css({"background-color" : dropDownNormalColor});
			$j(this).css({"background-color" : dropDownHighlightColor});
		});
		
		$j("#address").keydown(function(e) {
			var key = e.charCode ? e.charCode : e.keyCode ? e.keyCode : 0;
			if(e.keyCode==13) {
				if(this.value =="" || this.value==getAddressInitialValue || this.value==noAddressErrorMessage) {
					this.style.color = "#ff0000";
					this.value = noAddressErrorMessage;
					return false;
				} else {
					showLocation();
				}
			}
		});
	});
	
/*--------------------------------------------------------------------------
 *	This function is called on Pagination
 *  page_index :- Page number to be displayed
 *  jq :- jq is the container with the pagination links as a jQuery object
 *  Displays the results linked to the page_index and create the respective markers on the Map
 *--------------------------------------------------------------------------*/

	function firstpageselectCallback() {
		$j("#results").html(totalCount +" "+resultsText);
		$j("#results").show();
		$j("#paginatedResults").show();
		$j('#Searchresult').show();
		if(storeCount>=resultsPerPage) {
			$j('#Pagination').show();
		} else if (flag==false){ 
			$j('#Pagination').hide();
		} else if (flag==true) {
			$j('#Pagination').show();
		}
		var searchedStore=($j("#address").val());
		dcsMultiTrack("DCS.dcsuri",dcsURI+"/search | " +searchedStore, "WT.ti",title+" search | " + searchedStore, "WT.cg_n", contentGroup, "WT.cg_s", contentSubGroup, "DCSext.w_locale",  localeName1, "DCSext.w_shops_finder" , "1" ,"WT.pi" , "shops finder search : " + searchedStore );
		
		for(i=0;i<resultsPerPage;i++) {
			var resultIndex= i;
			if(resultIndex<storeCount) {
				var trimmedStoreName = jQuery.trim(storeName[resultIndex]);
				
				if(trimmedStoreName != "") {
					new_content = $j('<div class="result" displayOrder="'+i+'" id="'+storeId[resultIndex]+'"></div>').html('<div class="markerImage"><img src="#" class="markerImgTemp" width="17" height="22" /></div><div class="resultData"><a href=javascript:findLocation("'+ storeId[resultIndex] +'"); class="linkforXML"><h1>'+trimmedStoreName+'</h1></a><h2>'+storeAddress[resultIndex]+'<br>'+storeZipcode[resultIndex]+'<br>'+storeTelephone[resultIndex]+'</h2></div><div style="clear:both;"></div>'); 
				}
				else {
					new_content = $j('<div class="result" displayOrder="'+i+'" id="'+storeId[resultIndex]+'"></div>').html('<div class="markerImage"><img src="#" class="markerImgTemp" width="17" height="22" /></div><div class="resultData"><a href=javascript:findLocation("'+ storeId[resultIndex] +'"); class="linkforXML"><h1>'+storeAddress[resultIndex]+'</h1></a><h2>'+storeZipcode[resultIndex]+'<br>'+storeTelephone[resultIndex]+'</h2></div><div style="clear:both;"></div>'); 
				}				
				$j('#Searchresult').append(new_content);
			}
			if($j('#Searchresult div.result:eq('+i+')').attr("id")) {
				$j('#Searchresult div.result:eq('+i+')').attr('displayOrder',i+1);
				var display = $j('#Searchresult div.result:eq('+i+')').attr("displayOrder");
				var latitudeVar= storeLatitude[resultIndex];
				var longitudeVar=storeLongitude[resultIndex];
				var point = new GLatLng(latitudeVar,longitudeVar); 
				marker=createMarker(point, i+1,storeId[resultIndex],"");
				changeMarkerImages(i);
			}
		}
		$j("#Searchresult").css({ top:"0px"});
		initNewScrollShopsFinder(); /*New jQuery scrollbar*/
		flag = true;
		$j(document).pngFix();
	}

	function pageselectCallback(page_index, jq) {
		var new_content;
		$j('#Searchresult').empty();
		for (var i=0;i<gmarkers.length;i++) {
			map.removeOverlay(gmarkers[i]);
		}
		map.closeInfoWindow();
		gmarkers.length = 0;
		if (flag==true) {
			getStoreXml(page_index+1);
		} else if (page_index==0) {
			firstpageselectCallback();
		}

	}

/*--------------------------------------------------------------------------
 *	This function returns all the objects with the same classname
 *--------------------------------------------------------------------------*/
	function getElementsByClassName(oElm, strTagName, oClassNames) {
		var arrElements = (strTagName == "*" && oElm.all)? oElm.all : oElm.getElementsByTagName(strTagName);
		var arrReturnElements = new Array();
		var arrRegExpClassNames = new Array();
		if(typeof oClassNames == "object") {
			for(var i=0; i<oClassNames.length; i++) {
				arrRegExpClassNames.push(new RegExp("(^|\\s)" + oClassNames[i].replace(/\-/g, "\\-") + "(\\s|$)"));
			}
		}
		else {
			arrRegExpClassNames.push(new RegExp("(^|\\s)" + oClassNames.replace(/\-/g, "\\-") + "(\\s|$)"));
		}
		var oElement;
		var bMatchesAll;
		for(var j=0; j<arrElements.length; j++) {
			oElement = arrElements[j];
			bMatchesAll = true;
			for(var k=0; k<arrRegExpClassNames.length; k++){
				if(!arrRegExpClassNames[k].test(oElement.className)){
					bMatchesAll = false;
					break;
				}
			}
			if(bMatchesAll){
				arrReturnElements.push(oElement);
			}
		}
		return (arrReturnElements)
	}

/*--------------------------------------------------------------------------
 *	This function is called on Pagination
 *  index :- Ranges from 0 to (resultsPerPage-1)
 *  Creates the various marker images from 1 to resultsPerPage
 *--------------------------------------------------------------------------*/

	function changeMarkerImages(index) {
		var imgIndex = index+1;
		var getMarkerImage = getElementsByClassName(document.getElementById("Searchresult"), "img", "markerImgTemp");
		if(getMarkerImage[index]) {
			getMarkerImage[index].src = iconImageArray[imgIndex];
		}	
	}


/*--------------------------------------------------------------------------
 *	This function is called for Pagination after the store results have been calculated
 *  num_entries :- Total number of stores that match the search criteria
 *  num_display_entries :- Number of page indexes to be displayed 
 *  items_per_page :- Number of stores to be displayed per page
 *--------------------------------------------------------------------------*/

	function initPagination() {
		var num_entries = totalCount;
		// Create pagination element
		$j("#Pagination").pagination(num_entries, {
			num_edge_entries: 0,
			num_display_entries: 6,
			items_per_page:resultsPerPage,
			callback: pageselectCallback
		});
	}

/*--------------------------------------------------------------------------
 *	This function is called after the body loads. The call is in the HTML.
 *	It declares a Google Map Object and create the Map
 *  Also, creates a custom icon and sets its parameters.
 *--------------------------------------------------------------------------*/

	function initialize() {
		map = new GMap2(document.getElementById("map_canvas"),{ size: new GSize(545,391) } );
		map.addControl(new GLargeMapControl());
		map.addControl(new GMapTypeControl());
		map.setCenter(new GLatLng(centerLatitude,centerLongitude), 4);
		map.enableScrollWheelZoom();
		map.setZoom(14);
		new GKeyboardHandler(map);
		geocoder = new GClientGeocoder();
		Icon = new GIcon();
		Icon.iconSize = new GSize(17, 22);
		Icon.iconAnchor = new GPoint(16,11);
		Icon.infoWindowAnchor = new GPoint(5, 2);
		opt = {};
		opt.icon = Icon;
		opt.draggable = false;
		opt.clickable = true ;
		opt.dragCrossMove = true;
	}
	
/*--------------------------------------------------------------------------
 *	This function creates a marker on Google map.
 *  point :- GLatLng Object comprising of Latitude and Longitude information
 *  resultIndex :- Index of the result which is to be marked. Ranges from 1 to resultsPerPage 
 *  storeIndex :- Index of the store for which the marker is to be created
 *  htmlContent :- Content to be displayed in the information window of Google Map
 *--------------------------------------------------------------------------*/
	
	function createMarker(point,resultIndex,storeIndex,htmlContent) {
			// First result on each page will be marked at the center
			if(resultIndex==1) {
				map.setCenter(point);
			} 
			if(htmlContent != "") {
				map.panTo(point);
				map.openInfoWindowHtml(point,htmlContent);
			}
	        	Icon.image = iconImageArray[resultIndex];
			var marker = new GMarker(point,opt);
			gmarkers.push(marker);
			map.addOverlay(marker);
			GEvent.addListener(marker, "click", function() {
			for(i=0;i<storeCount;i++) {
					if(storeId[i] ==storeIndex) {
					var ua = window.navigator.userAgent;
					var msie = ua.indexOf("MSIE");
					if (msie>0) {
						htmlContent="<div class='popupMarkerImage' style='filter: progid:DXImageTransform.Microsoft.AlphaImageLoader (src ="+imgsource2+" , sizingMethod=scale);' ></div><div class='popupMarkerDetails'><h1>";
					} else{
						htmlContent="<div class='popupMarkerImage'><img src='"+imgsource2+"' width='22' height='50'></div><div class='popupMarkerDetails'><h1>";				
					}
					var trimmedStoreName = jQuery.trim(storeName[i]);
					if(trimmedStoreName != ""){
					 		htmlContent+=trimmedStoreName+"</h1><h2>"+storeAddress[i]+"<br/>";
					} else{
							htmlContent+=storeAddress[i]+"</h1><h2>";
						}
						htmlContent+=storeZipcode[i]+"<br/>"+storeTelephone[i]+"</h2></div><div style='clear:both'>"+getDirections+"&nbsp;<a href ='"+mapURL+"?saddr="+storeAddress[i]+","+storeZipcode[i]+"' target='_blank'>"+toHere+"</a>&nbsp;-&nbsp;<a href ='"+mapURL+"?daddr="+storeAddress[i]+","+storeZipcode[i]+"' target='_blank'>"+fromHere+"</a></div>";
					break;
					}
				}
			getResultDiv = getElementsByClassName(document.getElementById("Searchresult"), "div", "result");
			for(j=0;j<getResultDiv.length;j++) {
				getResultDiv[j].style.backgroundColor = "transparent";
			}
			$j("div#"+storeIndex).css({'background-color' : highlightBackgroundColor});
			map.panTo(point);
			marker.openInfoWindowHtml(htmlContent);
			$j(document).pngFix();
			});
		window.setTimeout(zoomGoogleMap,1000);
 		return marker;
	}
	
	function zoomGoogleMap(){
		map.setZoom(1);
		map.setZoom(14);
	}

/*--------------------------------------------------------------------------
 *	This function is called when the geocoder is able to find the searched address.
 *	It shows and hides the respective divs and calls the functions to search the stores
 *  response :- Latitude and Longitude information returned by Google Map
 *--------------------------------------------------------------------------*/

	function addAddressToMap(response) {
		map.clearOverlays();
		if (!response || response.Status.code != 200) {
		currentLatitude=500
		currentLongitude=500
		page_index =0;
	        getStoreXml(page_index);
	} else {
		$j("#results").html("");
		$j("#noResultErrorMessage").hide();
		$j("#noResultsOverlay").hide();
		$j("#content-header").html("<br /><br /><img src='"+allImagesPreloadArray[1]+"' title='"+resultFoundAltText+"'><br /><br />");
		$j(".mainContentshopsFinder").css({ left: "295px" });		
		$j("#content-header").show();
		$j("#main-content").show();
		place = response.Placemark[0];
		point = new GLatLng(place.Point.coordinates[1],
		place.Point.coordinates[0]);
		currentLatitude=point.lat();
		currentLongitude=point.lng();
		page_index =0;
	        getStoreXml(page_index);
       }
}
		
function getStoreXml(page_index) {
	setReqParam(page_index);
	hubclient.publish('com.ko.gvw.shopsfinder.parent',reqObject);
}

function setReqParam(page_index) {
       reqObject.currentLatitude = currentLatitude;
       reqObject.currentLongitude = currentLongitude;
       reqObject.distanceValue = distanceValue;
       reqObject.distanceUnit = distanceUnit;
       reqObject.localeName = localeName1;
       reqObject.pageIndex = page_index;	
       reqObject.searchAddress = address;
       clickedPageIndex = page_index;
       reqObject.dbUpdate = "no";
}
		
 function parseXML(xmlParse) {
 	if(window.ActiveXObject && window.GetObject ) {
		var dom = new ActiveXObject( 'Microsoft.XMLDOM' );
		dom.loadXML(xmlParse);
		return dom;
       }
	if( window.DOMParser )
		return new DOMParser().parseFromString(xmlParse, 'text/xml' );
		throw new Error( 'No XML parser available' );
}

function ajax_call(xmlObj){
var xml = parseXML(xmlObj);
		storeCount = 0;
		totalCount = $j(xml).find("nodeCount").text();
		$j(xml).find("store").each(function(){
			storeId[storeCount] = $j(this).attr('id');
			storeName[storeCount] = $j(this).find('name').text();
			storeAddress[storeCount]  = $j(this).find('address').text();
			storeZipcode[storeCount] = $j(this).find('zipcode').text();
			storeTelephone[storeCount] = $j(this).find('telephone').text();				
			storeLatitude[storeCount] = $j(this).find('latitude').text();
			storeLongitude[storeCount] = $j(this).find('longitude').text();
			storeCount++;
		})
	flag = true;
	page_index = clickedPageIndex;
	paginate();
}

function paginate() {
		if (page_index==0) {
		flag = false;
		window.setTimeout(initPagination, 50, true);		
		} else {
			firstpageselectCallback();
       }
}

/*--------------------------------------------------------------------------
 *	This function is called when you click on the Search button in the form.
 *	It geocodes the address entered into the form and calls addAddressToMap function
 *--------------------------------------------------------------------------*/

	$j(document).ready(function(){
		$j("#submitButton").bind("click", function()
			{
			$j("#address").blur();
			showLocation();
		});
	});


	function showLocation() {
		if($j("#address").val() == "" || $j("#address").val() == getAddressInitialValue || $j("#address").val()==noAddressErrorMessage) { 
			$j("#address").css({color: "#ff0000"});
			$j("#address").val(noAddressErrorMessage);
			return false;
		} else {
			$j("#slider-vertical").css("visibility","hidden");
			$j("#results").hide();
			$j("#instruction").hide();
			$j("#address").css({color: "#000000"});
			$j("#storeLocatorMap").css({ visibility:"visible"});
			$j("#map_canvas").css({ visibility:"visible"});
			$j("#main-content").hide();
			$j("#flavor-container").hide();
			$j("#content-header").hide();
			$j("#paginatedResults").show();
			$j("#storeLocatorMap").show();
			$j("#searchLabel").show();
			$j("#selectContainerShopsFinder").css({ marginTop: "10px" });
			$j("#buttonSF").css({ marginTop: "8px" });
			$j("#storeLocatorMap").css("float","left");
			$j("#content").css("display","block");
			$j(".searchShopsFinder").css("paddingLeft","0px");
			var ua = window.navigator.userAgent;
			var msie = ua.indexOf("MSIE");
			if (msie>0) {
				$j(".searchShopsFinder").css({ width: "300px", top:"88px", left:"10px" });
			}
			else {
				$j(".searchShopsFinder").css({ width: "300px", top:"78px", left:"10px" });
			}
			$j("#noResultErrorMessage").hide();
			$j('#Searchresult').html(loadingTextMessage +'<img src="'+allImagesPreloadArray[2]+'" width="16" height="16" align="absmiddle" />');
			$j('#Searchresult').show();
			$j('#Pagination').hide();
			address = document.shopsfinder.address.value;
			geocoder.getLocations(address, addAddressToMap);
		}
	}

/*--------------------------------------------------------------------------
 *	This function is called whenever a store information is clicked in the displayed results 
 *  storeIndex :- Index of the store for which the marker is to be created
 *--------------------------------------------------------------------------*/

	function findLocation(storeIndex) {
		var latitude,longitude,htmlContent;
		for(i=0;i<storeCount;i++) {
			if(storeId[i] ==storeIndex) {
				latitude=storeLatitude[i];
				longitude=storeLongitude[i];
			var ua = window.navigator.userAgent;
			var msie = ua.indexOf("MSIE");
			if (msie>0) {
				htmlContent="<div class='popupMarkerImage' style='filter: progid:DXImageTransform.Microsoft.AlphaImageLoader (src ="+imgsource2+" , sizingMethod=scale);' ></div><div class='popupMarkerDetails'><h1>";
			}			
			else{
				htmlContent="<div class='popupMarkerImage'><img src="+imgsource2+" width='22' height='50'></div><div class='popupMarkerDetails'><h1>";
			}
			var trimmedStoreName = jQuery.trim(storeName[i]);
			if(trimmedStoreName != ""){
				htmlContent+=trimmedStoreName+"</h1><h2>"+storeAddress[i]+"<br/>";
				} else {
				htmlContent+=storeAddress[i]+"</h1><h2>";
				}
				htmlContent+=storeZipcode[i]+"<br/>"+storeTelephone[i]+"</h2></div><div style='clear:both'>"+getDirections+"&nbsp;<a href ='"+mapURL+"?saddr="+storeAddress[i]+","+storeZipcode[i]+"' target='_blank'>"+toHere+"</a>&nbsp;-&nbsp;<a href ='"+mapURL+"?daddr="+storeAddress[i]+","+storeZipcode[i]+"' target='_blank'>"+fromHere+"</a></div>";
				break;
			}
		}
		var point = new GLatLng(latitude,longitude);
		getResultDiv = getElementsByClassName(document.getElementById("Searchresult"), "div", "result");
		for(j=0;j<getResultDiv.length;j++) {
			getResultDiv[j].style.backgroundColor = "transparent";
		}
		$j("div#"+storeIndex).css({'background-color' : highlightBackgroundColor});
		for(i=0;i<resultsPerPage;i++) {
			if($j('#Searchresult div.result:eq('+i+')').attr("id")== storeIndex) {
				display = $j('#Searchresult div.result:eq('+i+')').attr("displayOrder");
				break;
			}
		}
		marker=createMarker(point,display,storeIndex,htmlContent);
		$j(document).pngFix();
	}


/*--------------------------------------------------------------------------
 *	Common method for stopping bubble/propogation in diff browsers.
 *--------------------------------------------------------------------------*/
	function stopBubble(e) {
		// If an event object is provided, then this is a non-IE browser
		if ( e && e.stopPropagation ) {
		// and therefore it supports the W3C stopPropagation() method
			e.stopPropagation();
		}
		else
		// Otherwise, we need to use the Internet Explorer way of cancelling event bubbling
		window.event.cancelBubble = true;
	}

/*--------------------------------------------------------------------------
 *	This function is called to open the drop down for the distance ( eg. 5 km, 10 km)
 *--------------------------------------------------------------------------*/
	function selectOpen(event) { 
		stopBubble(event);
		if($j('#options').is(':hidden')){
			$j('#options').show();
		} else {
			$j('#options').hide();
		}
	}

/*--------------------------------------------------------------------------
 *	This function is called to close the drop down for the distance ( eg. 5 km, 10 km) when clicked anywhere on the page.
 *--------------------------------------------------------------------------*/
	$j().click(function(event) {
		$j("#selectContainerShopsFinder").css({ outline:"none"});
		stopBubble(event);
		if($j('#options').is(':hidden')){
		} else {
			$j('#options').hide();
		}
	});

/*--------------------------------------------------------------------------
 *	This function writes the selected index value from the drop down on the options div
 *--------------------------------------------------------------------------*/

	function selectSelection(selectIndex,selectedValue){
		document.getElementById('distanceField').value = selectedValue+" "+distanceUnits;
		var getOptionsElement = document.getElementById("options");
		getOptionsElement.style.display='none';
		distanceValue = selectedValue;
		$j('.option').css({"background-color" : "#fff"});
		$j("#option").hide();
		$j("#distanceField").focus();
	}
	
/*--------------------------------------------------------------------------
 *	This function enables scroll bar if the content for searched store is more
 *--------------------------------------------------------------------------*/

	
function initNewScrollShopsFinder(){
		if($j("#Searchresult").height() > $j("#slider-vertical").height()) {
			$j("#slider-vertical").css("visibility","visible");
			$j(".ui-slider-handle").css("bottom","93.60%");
		} else {
			$j("#slider-vertical").css("visibility","hidden");
		}
		
		$j("#slider-vertical").slider({
			orientation: "vertical",
			//range: "min",
			min: 0,
			max: 350,
			value: 350,
			//step: 5,
			slide: function(event, ui) {
				var store = ui.value;
				ui.value = ui.value - 350;
				if ($j("#Searchresult").height() > $j("#slider-vertical").height()) {
						$j("#slider-vertical").css('visibility','visible');
						var height = $j("#Searchresult").height() - $j("#slider-vertical").height();
						$j("#Searchresult").css("top", (ui.value));
				}
			},
			change: function(event, ui) {
				var store = ui.value;
				ui.value = ui.value - 350;
				if ($j("#Searchresult").height() > $j("#slider-vertical").height()) {
						$j("#slider-vertical").css('visibility','visible');
						var height = $j("#Searchresult").height() - $j("#slider-vertical").height();
						$j("#Searchresult").css("top", (ui.value));
				}
			}
		});
}


/*--------------------------------------------------------------------------
 *	This function enables scroll bar if the content for article is more
 *--------------------------------------------------------------------------*/

 function initScrollArticle() {
	if ($("content-title").offsetHeight > $("slider-tray-article").offsetHeight){
		$("slider-tray-article").style.visibility = "visible";
		new Control.Slider('slider-handle-article','slider-tray-article',{axis:'vertical',
			onSlide:function(v){
				var height = $("content-title").offsetHeight - $("slider-tray-article").offsetHeight;
				$("content-title").style.top = "-"+(Math.round((height)*v))+"px";
			},
			onChange:function(v){
				var height = $("content-title").offsetHeight - $("slider-tray-article").offsetHeight;
				$("content-title").style.top = "-"+(Math.round((height)*v))+"px";
			}
		});
	}
	else 	{
		$("slider-tray-article").style.visibility = "hidden";
	}
}

function MM_preloadImages() { //v3.0
  var d=document; if(d.images){ if(!d.MM_p) d.MM_p=new Array();
    var i,j=d.MM_p.length,a=MM_preloadImages.arguments; for(i=0; i<a.length; i++)
    if (a[i].indexOf("#")!=0){ d.MM_p[j]=new Image; d.MM_p[j++].src=a[i];}}
}
$j(document).ready(function(){
	MM_preloadImages('../../common/media_asset/vw_sub_sf_button_over_fr_FR.png', '../../common/media_asset/vw_sub_sf_button_fr_FR.png');		
	});