Store API

by Laura Kishimoto

HTML

<link rel="stylesheet" href="http://images.mec.ca/media/css/mec_styles_v1_m56577569831289067.css">
<!-- to test FR, add class="fr-CA" to any div -->

<div id="storepage">
    
    <div id="storeintro"></div>
    
    <div id="storehours"></div>
    
    <div id="storelocation">
        <div id="storeaddress"></div>        
        <div id="storedirections"></div>        
        <p id="storeparking"></p>        
        <div id="storemap"></div>
    </div>
    
    <div id="storecommunity"></div>
    <div id="storecontact"></div>
    <div id="storeservices"></div>

</div>

CSS

* { text-align: left; max-width: 460px; }
.clear { clear: both; }
.subtext { font-weight: normal; font-size: 11px; }
.nomargin { line-height: 100%; }

#storepage { overflow: hidden; }
#storeintro img { max-width: none; text-align: center; margin-left: -90px; }

/*===========================
    Store: hours
===========================*/

#storehours, #storelocation, #storecommunity { margin-top: 20px; padding-top: 30px; background: url('http://images.mec.ca/media/img/tpl/dtl/bottom_shadow_460.jpg') top no-repeat; }
#storehours ul { margin: 5px 0 10px 0; padding: 0; list-style: none; }
#storehours li { font-weight: bold; margin: 0; padding: 3px 8px; }
#storehours li:nth-of-type(odd) { background-color: #F3FBF4; }
#storehours li span { font-weight: normal; }

/*===========================
    Store: location
===========================*/

#storeaddress { width: 47.826086956%; float: left; }
#storedirections { width: 47.826086956%; float: right; }
#storeparking { clear: both; padding: 10px 0; }
#storedirections li a, #storedirections li a:hover { border: 0; width: 50px; display: inline-block; }
#storelocation iframe { height: 300px; width: 460px; }

JavaScript

function store(storeid) {

    // variables for intro
    var enabout = 'About the Store';
    var frabout = '&Agrave; propos du magasin';

    // variables for hours
    var enclosed = 'Closed';
    var frclosed = 'Ferm&eacute;';
    var enhours = 'Opening Hours';
    var frhours = 'Horaire';
    var enspacer = ' &ndash; ';
    var frspacer = ' &agrave; ';
    var entries = 7;
    var enday = ['Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday', 'Sunday'];
    var enmonth = ['January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November', 'December'];
    var frday = ['Lundi', 'Mardi', 'Mercredi', 'Jeudi', 'Vendredi', 'Samedi', 'Dimanche'];
    var frmonth = ['janvier', 'février', 'mars', 'avril', 'mai', 'juin', 'juillet', 'août', 'septembre', 'octobre', 'novembre', 'décembre'];
    
    // variables for location
    var enlocation = 'Location and Directions';
    var frlocation = 'Adresse et itin&eacute;raire';
    var endirections = 'Get directions for:';
    var frdirections = 'Itin&eacute;raire&nbsp;:';
    var endirtype = ['Pedestrians', 'Bike', 'Public transit', 'Car'];
    var frdirtype = ['&Agrave; pied', 'En v&eacute;lo', 'En transports en commun', 'En voiture'];
    var enparking = 'Parking:';
    var frparking = 'Stationnement&nbsp;:';

    // variables for community
    var encommunity = 'Community';
    var frcommunity = 'Communaut&eacute;';

    // variables for contact info
    var encontact = 'Contact';
    var frcontact = 'Coordonn&eacute;es';
    var enphone = 'Telephone:';
    var frphone = 'T&eacute;l&eacute;phone&nbsp;:';
    var enmanager = 'Manager:';
    var frmanager = 'Directeur ou directrice&nbsp;:'; // needs something for gender

    // variables for services
    var enservices = 'Services';
    var frservices = 'Services';
    var frservicetypes = {'Bike Shop': 'Atelier de v&eacute;lo', 'Ski Shop': 'Atelier de ski', 'Equipment Rentals': 'Location d\'&eacute;quipement',...