/* Prototype dropdown for ECL
=========================================================================== */
/* global event handlers
=========================================================================== */
function getEclModels(){
if ($F('make') == 'none'){ $('models').update(""); return; }
if ($F('make') == 'any'){ searchAnyMake(); return; }
var url = "http://www.superpages.com/listinfo/ecl_xml.php";
new Ajax.Request( url, {method: 'post', parameters:{make: $F('make')}, onComplete: showResponse} );
}
function showResponse(originalRequest)
{
//put returned content
$('models').update(originalRequest.responseText);
}
function searchEclzip(){
clickTrackECL_search();
var model = "";
var tzip = "";
if($F('model') == 'none'){return;}
if($F('model') != "any"){model = "/model=" + $F('model');}
if(geoZip != ""){tzip = "/geozip=" + geoZip + "-30";}
//alert("ECL URL"+ ECLurl + "/search" + tzip +"/make=" + $F('make') + model+"#spcfs",'ecl');
window.open(ECLurl + "/search" + tzip +"/make=" + $F('make') + model+"#spcfs",'ecl');
}
function searchAnyMake(){
clickTrackECL_search();
var tzip = "";
if(geoZip != ""){tzip = "/geozip=" + geoZip + "-30";}
window.open(ECLurl + "/search/" + tzip,'ecl')
}
var ECLmiles = "30";
function spMouseDown(e) {
if (spDropdownOpen) spdd.mouseDownBody(e);
if (spOverlayMenuOpen) spOverlayMouseDownBody(e);
return true;
}
/* end global event handlers
=========================================================================== */
/* styled overlay menus
=========================================================================== */
var spOverlayOpenId = "";
var spOverlayClickedId = "";
var spOverlayMenuOpen = false;
// Map menu id's to button classes, for determining later on if the current menu
// is one with non-default behavior.
var spOverlayClass = [];
function spInitOverlay() {
document.body.onmousedown = spMouseDown;
// Overlay menus with default behavior
spAddOverlayEvents("spOverlayLnk");
// Add code here for overlay menus with non-default behavior
}
function spShowOverlay(menuId) {
if ($(menuId)) {
// If the menu is already open, close it
if ($(menuId).style.display == "block") {
$(menuId).style.display = "none";
}
else {
$(menuId).style.display = "block";
spOverlayOpenId = menuId;
spOverlayMenuOpen = true;
spOverlayClickedId = "";
}
}
// Add code here for overlay menus with non-default behavior
}
function spHideOverlay(menuId) {
if ($(menuId)) {
$(menuId).style.display = "none";
spOverlayOpenId = '';
spOverlayMenuOpen = false;
}
// Add code here for overlay menus with non-default behavior
}
function spGetOverlayMenuId(btn) {
// Get the id parameter from href="javascript:foo('myId')"
return btn.href.substring(btn.href.indexOf("'") + 1, btn.href.lastIndexOf("'"));
}
function spAddOverlayEvents(btnClass) {
var btnArray = document.getElementsByClassName(btnClass);
for (var i = 0; i < btnArray.length; i++) {
// button
var btn = btnArray[i];
btn.onmousedown = spOverlayMouseDownBtn;
// menu
var menuId = spGetOverlayMenuId(btn);
if ($(menuId)) {
$(menuId).onmousedown = spOverlayMouseDownMenu;
}
// Store the button class associated with the menu id
spOverlayClass[menuId] = btnClass;
// Mac Safari image-rollover bug
if ((navigator.userAgent.indexOf("Safari") != -1)
&& (navigator.userAgent.indexOf("Mac") != -1)) {
// If spImgSwap() is called by the onmouseout event
if (btn.onmouseout && btn.onmouseout.toString().indexOf("spImgSwap") != -1) {
// Make onclick call the onmouseout event handler
btn.onclick = function onclick() { this.onmouseout(); return true; };
}
}
}
}
function spOverlayMouseDownBtn(e) {
// Get the menu id
var menuId = spGetOverlayMenuId(this);
spOverlayClickedId = menuId;
return true;
}
function spOverlayMouseDownMenu(e) {
// Get the menu id
spOverlayClickedId = this.id;
return true;
}
function spOverlayMouseDownBody(e) {
// Close the open overlay menu, unless the mouse is inside the menu
// or the menu button.
if (spOverlayOpenId != spOverlayClickedId) {
spHideOverlay(spOverlayOpenId);
}
spOverlayClickedId = "";
return true;
}
/* end styled overlay menus
=========================================================================== */
/* styled dropdowns
=========================================================================== */
var spDropdownOpen = false;
// dropdown menu (JavaScript object literal)
var spdd = {
curId: "", // id of currently-open dropdown
ignoreMouseDownBody: false,
menus: [],
rowHeight: 17,
combinedBorderWidth: 1,
scrollbarWidth: 1,
minMenuWidth: 105,
maxMenuWidth: 400,
defaultMenuWidth: 205,
defaultRowWidth: 150,
combinedRowLRPad: 1,
scrollbarRPad: 2,
buildDropdown: function(menuId, buttonWidth, menuWidth, numVisibleRows, buttonClass, hiddenListSuffix) {
// default parameters
if (!buttonWidth) buttonWidth = 140;
if (!menuWidth) menuWidth = this.defaultMenuWidth;
if (!numVisibleRows) numVisibleRows = 5;
if (!buttonClass) buttonClass = 'spddWireLtg';
if (menuWidth < this.minMenuWidth) menuWidth = this.minMenuWidth;
if (menuWidth > this.maxMenuWidth) menuWidth = this.maxMenuWidth;
var wrapId = menuId + "_wrap";
var listId = menuId + "_list" + (hiddenListSuffix ? '_' + hiddenListSuffix : '');
this.menus[menuId] = new Array();
this.menus[menuId].listId = listId;
this.menus[menuId].updateFirstRow = false;
if ($(wrapId) && $(listId)) {
// hide the <select>
$(listId).style.display = "none";
var displayedValue = new Array();
var internalValue = new Array();
var disabledRow = new Array();
var listItems = $(listId).options;
for (var i=0;i<listItems.length;i++) {
displayedValue[i] = listItems[i].innerHTML;
internalValue[i] = listItems[i].value;
disabledRow[i] = listItems[i].disabled;
}
var selectedRow = $(listId).selectedIndex;
// If no row was explicitly selected
if (selectedRow == 0) {
// See if the first row matches one of the later rows
for (i=1;i<displayedValue.length;i++) {
if (displayedValue[i] == displayedValue[0]) {
selectedRow = i;
this.menus[menuId].updateFirstRow = true;
break;
}
}
}
var buttonText = displayedValue[selectedRow];
var numRows = displayedValue.length;
var buttonTextLPad = 10;
var buttonTextRPad = 34;
var buttonTextWidth = buttonWidth - (buttonTextLPad + buttonTextRPad);
// minus left and right borders
var fullRowWidth = menuWidth - this.combinedBorderWidth;
// without scrollbar
var visibleRowsHeight = numRows * this.rowHeight;
var rowWidth = fullRowWidth;
// with scrollbar
if (numRows > numVisibleRows) {
visibleRowsHeight = numVisibleRows * this.rowHeight;
rowWidth -= 10;
}
var leftBgStyle = 'background:#fff url(http://img.superpages.com/images-yp/images/spddbckl.gif) 0 0 no-repeat;';
var rightBgStyle = 'background:url(http://img.superpages.com/images-yp/images/spddbck.gif) 100% 0 no-repeat;';
// build content for the menu
var strContent = "\n\n\n\n";
strContent += ' <div class="spddContainer" style="width:'+buttonWidth+'px;">'+"\n";
strContent += ' <div class="spddBoxContainer">'+"\n";
strContent += ' <div class="spddBox" id="'+menuId+'" style="width:'+menuWidth+'px;margin-top:9px;margin-right:5px" onmousedown="return spdd.mouseDown(event, \''+menuId+'\');">'+"\n";
strContent += ' <div class="spddBoxHeader"><div class="spddBoxHeaderTL"></div><div class="spddBoxHeaderTR"></div></div>'+"\n";
strContent += ' <div class="spddBoxContent">'+"\n";
strContent += ' <div class="spddContent" style="width:'+fullRowWidth+'px;">'+"\n";
strContent += ' <div class="spPad6Top"></div>'+"\n";
strContent += ' <div class="spddList" style="height:'+visibleRowsHeight+'px; width:'+rowWidth+'px;padding-top:2px">'+"\n";
strContent += ' <ul>'+"\n";
for (var i=0;i<displayedValue.length;i++) {
if ((i==0) && (this.menus[menuId].updateFirstRow)) {
strContent += ' <li id="'+menuId+'_hdnVal"><a href="'+ ECLurl + "/search/make=" + this.encodeAttr(internalValue[i]);
if (geoZip != "") {
strContent += '/geozip=' + geoZip + '-' + ECLmiles;
}
strContent += '" onclick="spdd.select('+i+',\''+this.encodeAttr(displayedValue[i])+'\',\''+this.encodeAttr(internalValue[i])+'\');">'+displayedValue[i]+'</a></li>'+"\n";
}
else if (disabledRow[i] || internalValue[i] == "title" ) {
strContent += ' <li class="spddSeparator" onclick="spdd.closemenu();"><span>'+displayedValue[i]+'</span></li>'+"\n";
}
else {
strContent += ' <li><a href="'+ ECLurl + "/search/make=" + this.encodeAttr(internalValue[i]);
if (geoZip != "") {
strContent +='/geozip=' + geoZip + '-' + ECLmiles;
}
strContent +='" onclick="spdd.select('+i+',\''+this.encodeAttr(displayedValue[i])+'\',\''+this.encodeAttr(internalValue[i])+'\');return false;">'+displayedValue[i]+'</a></li>'+"\n";
}
}
strContent += ' </ul>'+"\n";
strContent += ' </div>'+"\n";
strContent += ' <div class="spPad8Top"></div>'+"\n";
strContent += ' </div><!-- /spddContent -->'+"\n";
strContent += ' </div><!-- /spddBoxContent -->'+"\n";
strContent += ' <div class="spddBoxFooter"><div class="spddBoxFooterBL"></div><div class="spddBoxFooterBR"></div></div>'+"\n";
strContent += ' </div><!--/spddBox-->'+"\n";
strContent += ' </div><!--/spddBoxContainer-->'+"\n";
strContent += ' <div class="'+buttonClass+'">'+"\n";
strContent += ' <div class="spddBtn" onmousedown="return spdd.mouseDownBtn(event, \''+menuId+'\');" onclick="return spdd.open(\''+menuId+'\')" style="'+rightBgStyle+'">'+"\n";
strContent += ' <table width="'+buttonWidth+'" border="0" cellspacing="0" cellpadding="0">'+"\n";
strContent += ' <tr>'+"\n";
strContent += ' <td width="'+buttonTextLPad+'"><div class="spddBtnLeft" style="'+leftBgStyle+'"></div></td>'+"\n";
strContent += ' <td width="'+buttonTextWidth+'">'+"\n";
strContent += ' <div class="spddValueContainer">'+"\n";
strContent += ' <div id="'+menuId+'_Val" class="spddValue" style="width:'+buttonTextWidth+'px;padding-top:2px">'+buttonText+'</div>'+"\n";
strContent += ' </td>'+"\n";
strContent += ' <td width="'+buttonTextRPad+'"></td>'+"\n";
strContent += ' </tr>'+"\n";
strContent += ' </table>'+"\n";
strContent += ' </div><!--/spddBtn -->'+"\n\n";
strContent += ' </div><!--/'+buttonClass+' -->'+"\n\n";
strContent += ' </div><!--/spddContainer -->'+"\n";
strContent += "\n\n";
// draw the new content
$(wrapId).innerHTML = strContent;
//alert(strContent);
// capture mousedown
document.body.onmousedown = spMouseDown;
}//else id of select not found [ abort ]
},
buildOverlay: function(menuId, menuWidth, numVisibleRows, dx, dy) {
// default parameters
if (!menuWidth) menuWidth = this.defaultMenuWidth;
if (!numVisibleRows) numVisibleRows = 10;
if (menuWidth < this.minMenuWidth) menuWidth = this.minMenuWidth;
if (menuWidth > this.maxMenuWidth) menuWidth = this.maxMenuWidth;
var leftPos = 0;
var topPos = 1;
if (dx) leftPos += dx;
if (dy) topPos += dy;
var wrapId = menuId + "_wrap";
var listId = menuId + "_list";
var titleId = menuId + "_title";
if ($(wrapId) && $(titleId) && $(listId)) {
// hide the list
$(listId).style.display = "none";
var title = $(titleId).innerHTML;
// Get the displayed value for each select option
var listItems = $(listId).getElementsByTagName('li');
var displayedList = new Array();
for (var i=0;i<listItems.length;i++) {
displayedList[i] = listItems[i].innerHTML;
}
var numRows = displayedList.length;
var menuTitleRPad = 60;
var menuTitleWidth = menuWidth - menuTitleRPad;
// minus left and right borders
var fullRowWidth = menuWidth - this.combinedBorderWidth;
// without scrollbar
var visibleRowsHeight = numRows * this.rowHeight;
var rowWidth = menuWidth - this.combinedBorderWidth;
// with scrollbar
if (numRows > numVisibleRows) {
visibleRowsHeight = numVisibleRows * this.rowHeight;
rowWidth -= 10;
}
// draw the new content
$(wrapId).innerHTML = strContent;
// capture mousedown
document.body.onmousedown = spMouseDown;
}//else id of select not found [ abort ]
},
closemenu: function() {
this.close();
},
select: function(index, displayedValue, internalValue) {
if ($(this.curId)) {
var menuId = this.curId;
// close the dropdown
this.close();
// change the displayed dropdown value (button text)
if ($(menuId + '_Val')) {
$(menuId + '_Val').innerHTML = displayedValue;
}
// set the first row of the menu to the current value
if ((this.menus[menuId].updateFirstRow) && $(menuId + '_hdnVal')) {
$(menuId+'_hdnVal').innerHTML = '<a href="javascript:spdd.select(' + index + ',\'' + this.encodeAttr(displayedValue) + '\',\'' + this.encodeAttr(internalValue) + '\')">' + displayedValue + '</a>';
}
var listId = this.menus[menuId].listId;
if ($(listId)) {
// if the value has changed
if ($(listId).selectedIndex != index) {
// set the index of the selected option for the invisible <select>
$(listId).selectedIndex = index;
// If an onchange event handler exists
if ($(listId).onchange) {
$(listId).onchange();
}
}
}
// if a callback function exists
try {
var onChoose = eval(menuId + '_OnChoose');
if (onChoose) {
onChoose();
}
}
catch(err) {
}
}
},
open: function(id) {
if($(id)) {
// Was the same menu clicked again?
var sameMenu = (this.curId == id);
// If a menu is already open
this.close();
// If a different menu was clicked
if (!sameMenu) {
$(id).style.display = "block";
this.curId = id;
spDropdownOpen = true;
}
}
},
close: function() {
if ($(this.curId)) {
$(this.curId).style.display = "none";
this.curId = '';
spDropdownOpen = false;
}
},
encodeAttr: function(str) {
str=str.replace(/\\/g,'\\\\');
str=str.replace(/\'/g,'\\\'');
str=str.replace(/\"/g,'&quot;');
str=str.replace(/\0/g,'\\0');
return str;
},
mouseDown: function(e, id) {
this.ignoreMouseDownBody = true;
return true;
},
mouseDownBtn: function(e, id) {
// True if the same dropdown button was clicked again.
this.ignoreMouseDownBody = (id && (this.curId == id));
return true;
},
mouseDownBody: function(e) {
if (!this.ignoreMouseDownBody) {
this.close();
}
this.ignoreMouseDownBody = false;
return true;
}
}