<div id="gallery1" class="gallery">
    <a rel="gallery1" href="/path/to/fullsize1.jpg"><img src="/path/to/thumbnail1.jpg" width="50" height="50" alt="" /></a>
    <a rel="gallery1" href="/path/to/fullsize2.jpg"><img src="/path/to/thumbnail2.jpg" width="50" height="50" alt="" /></a>
    <a rel="gallery1" href="/path/to/fullsize3.jpg"><img src="/path/to/thumbnail3.jpg" width="50" height="50" alt="" /></a>
</div>

The HTML is rather straight forward. You’ve got a <div> as a container for a bunch of thumbnails, each linked to a matching fullsize image. The CSS on the gallery has fixed dimensions matching the dimensions of the thumbnails with overflow set to hidden.

$(".gallery").cycle({ 
    speed:      0,
    timeout:    0
});

$(".gallery").mousemove(function(e){
    var n = $(this).children().length;
    var w = $(this).width();
    var x = e.pageX - this.offsetLeft;
    var i = Math.floor(x/w * n);

    $(this).cycle(i);
}); 

$(".gallery a").fancybox();

As for the JavaScript, it’s refreshingly short, which just goes to show how much heavylifting jQuery and the two plugins do. Let’s start with the Cycle activation. The speed parameter is set to 0. This means that the transition is instantaneous when an image flips. Setting the timeout parameter to 0 prevents the Cycle plugin from auto-advancing. So far nothing new for anyone who’s used the Cycle plugin.

The next part actually sets up the effect. Just like when you mouseover an Event group in iPhoto, whenever the mouse moves within the gallery div, the position of the mouse determines the index of the image to display. First we count the number of images within the gallery. Next, we get the width of the gallery. Then we get the horizontal position of the mouse within the gallery’s coordinate system. Finally, we use those three values to calculate the index. Using this index, we tell the Cycle plugin which image to display.

Now that the iPhoto effect is working, all that’s left is to activate the Fancybox plugin and we’re done.

It’s built using WordPress, but you wouldn’t know it by looking at it. This way I can add and remove samples easily. I opted to go with a (mostly) single-page site. There’s a second page for a contact form. jQuery and various plugins handle the dynamic features. I definitely prefer this over what I had before.

Feel free to check it out by clicking the Portfolio link above.

Adding a product to a Magento (ver. 1.3.1) shopping cart is accomplished through an HTTP GET request. It will look like or similar to this:

/path/to/app/checkout/cart/add?product=[id]&qty=[qty]

That URL is output by the template helper:

$this->getAddToCartUrl($_product)

Since adding a product to the shopping cart is nothing more than a GET request, then all that needs to be done is queue up the URLs of the desired products, make each request in order, and then reload the page when done.

First, in app/design/frontend/ / /template/catalog/product/list.html, I first added checkboxes to allow customers to select which products they want and also hidden fields for storing the URLs to add the product and text fields for the quantity.

<input type="checkbox" class="input-checkbox add" name="add_<?php echo $_iterator; ?>" id="add_<?php echo $_iterator; ?>" />
<input type="hidden" name="url_<?php echo $_iterator; ?>" id="url_<?php echo $_iterator; ?>" value="<?php echo $this->getAddToCartUrl($_product) ?>" />
<?php if(!$_product->isGrouped()): ?>
     <input type="text" class="input-text qty" name="qty_<?php echo $_iterator; ?>" id="qty_<?php echo $_iterator; ?>" maxlength="12" value="<?php echo $this->getMinimalQty($_product) ?>" />
<?php endif; ?>

I added this code within the loop that generate the HTML for the product line items for the list. Next, I added the JavaScript that does the actual processing, also within the list section right after the script block that contains: decorateList('products-list', 'none-recursive').

<script type="text/javascript">
    function processNext(urls, i) {
        var next = i + 1;
        $('processing-text').update('Processing item ' + next);
        if (next < urls.size()) {
            new Ajax.Request(urls[i], {
              method: 'get',
              onComplete: function(transport) {
                processNext(urls, next);
              }
            });
        } else {
            new Ajax.Request(urls[i], {
              method: 'get',
              onComplete: function(transport) {
                window.location.reload();
              }
            });
        }
    }

    function addItemsToCart() {
        $('add-items-to-cart').hide();
        $('waiting').show();
        
        var addToCartUrls = [];
        $$('input.add').each(function(e){ 
            if(e.checked == true) {
                var id = e.readAttribute('id').split('_')[1];
                var qty = Number($('qty_' + id).value);
                if (qty < 1) qty = 1;
                addToCartUrls.push($('url_' + id).value + 'qty/' + qty);
            }
        });
        
        if (addToCartUrls.size() > 0) {
            processNext(addToCartUrls, 0);
        } else {
            $('add-items-to-cart').show();
            $('waiting').hide();
            alert('Please check off the items you want to add.');
        }
    }
</script>

At the bottom of the list I added a submit button.

<div style="margin-bottom:5px; text-align:right;"><button id="add-items-to-cart" class="form-button" onclick="addItemsToCart()"><span><?php echo $this->__('Add Items to Cart') ?></span></button><div id="waiting" style="height:22px; display:none; line-height:22px;"><span id="processing-text">Processing...</span> <img src="<?php echo $this->getSkinUrl().'images/wait22trans.gif'; ?>" width="22" height="22" style="display:inline; vertical-align:middle;"/></div></div>

Clicking the button calls the function addItemsToCart(). The function hides the button to prevent a double click and unhides the status message. Next, the function determines which checkboxes are checked. For each checked checkbox, the function finds the corresponding URL field and quantity field, concatenates the two values, and stores the new URL in an array. If the length of the array is greater than 0, then the function calls processNext(), otherwise it displays an error message and resets the submit button.

The function processNext() first updates the processing message. The function takes the array of URLs and an index, and then creates an AJAX GET request using the URL at the given index in the array. If the AJAX request completes, it calls processNext() with the same array but with an incremented index while the index is less than the array length. If the incremented index is greater than the array length, then that ends the processing and the function reloads the page.

That’s it. If there is anything wrong with the code, it assumes that all the GET requests will complete. Unfortunately, given the time constraints there was no time to account for the scenario where a GET request fails.

I updated MyGoogleCal4 with a small bugfix this weekend as well. That will be the last update. Future development will continue with RESTYLEgc. Since the code was originally public domain, I opted to go with an MIT open source license. I also got the code in a Subversion repository which I should’ve done a long time ago. With the Issues tab at Google Code, I can better track and encourage bug reports and feature requests.

The code is still free, but paid support is available. I’ve also got some other ideas of where I want to take the site. So stay tuned!

UPDATE (2009 July 5): MyGoogleCal is now RESTYLEgc.

UPDATE (2009 June 23): Google’s recent update broke the jQuery injection. In fact, the update is incompatible with injecting jQuery, Prototype, and MooTools. The only JavaScript framework that works is Dojo. I updated the code to inject that framework instead. For those people who value stability over having the latest and greatest features, I also added a comment to MyGoogleCal4js.php that explains how to freeze the calendar version. That should hopefully help all you fellow developers who tire of your clients calling you when their calendar breaks.

UPDATE (2009 May 3): MyGoogleCal4 now supports jQuery manipulation of the DOM. This gives the ability to apply styles after page load. As an example, the default code removes the inline style on the body tag allowing the stylesheet to set the background color. The default code also removes the width property from the inline style of the bubble class so that its width can be set in the stylesheet as well. This should help overcome many of the problems that can’t be solved directly using a stylesheet. You can thank TechTriad.com for funding this new feature.

Download: mygooglecal4.zip. Contains MyGoogleCal4.php, MyGoogleCal4js.php, mygooglecal4.css, and images. The CSS file is not guaranteed to be up-to-date so you may have to follow the instructions described in the PHP file to download the latest version from Google. phpinfo.php is used for diagnostic purposes to make sure your PHP installation is working and that it has the required plugins. In the archive folder, you can find previous versions of Google’s Javascript and CSS files, in case you want to use those (see MyGoogleCal4js.php).

<?php
/*******************************************************************************
 * FILE: MyGoogleCal4.php
 *
 * DESCRIPTION:
 *  This script is an intermediary between an iframe and Google Calendar that
 *  allows you to override the default style.
 *
 * USAGE:
 *  <iframe src="MyGoogleCal4.php?src=user%40domain.tld"></iframe>
 *
 *  where user@domain.tld is a valid Google Calendar account.
 *
 * VALID QUERY STRING PARAMETERS:
 *    title:         any valid url encoded string 
 *                   if not present, takes title from first src
 *    showTitle:     0 or 1 (default)
 *    showNav:       0 or 1 (default)
 *    showDate:      0 or 1 (default)
 *    showTabs:      0 or 1 (default)
 *    showCalendars: 0 or 1 (default)
 *    mode:          WEEK, MONTH (default), AGENDA
 *    height:        a positive integer (should be same height as iframe)
 *    wkst:          1 (Sun; default), 2 (Mon), or 7 (Sat)
 *    hl:            en, zh_TW, zh_CN, da, nl, en_GB, fi, fr, de, it, ja, ko, 
 *                   no, pl, pt_BR, ru, es, sv, tr
 *                   if not present, takes language from first src
 *    bgcolor:       url encoded hex color value, #FFFFFF (default)
 *    src:           url encoded Google Calendar account (required)
 *    color:         url encoded hex color value     
 *                   must immediately follow src
 *    
 *    The query string can contain multiple src/color pairs.  It's recommended 
 *    to have these pairs of query string parameters at the end of the query 
 *    string.
 *
 * HISTORY:
 *   03 December 2008 - Original release
 *                      Uses technique from MyGoogleCal2 for all browsers,
 *                      rather than giving IE special treatment.
 *   16 December 2008 - Modified MyGoogleCal4js.php so that the regex does a
 *                      general match rather than specifically look for the
 *                      variable 'Ac'.
 *   Mar--Apr    2009 - Added jQuery for modifying the style after page load
 *   23 June     2009 - Replaced jQuery with Dojo since jQuery, Prototype, and
 *                      MooTools are not compatible
 *   05 July     2009 - Fixed bug to remove width style from bubble
 *                      
 *   
 * ACKNOWLEDGMENTS:
 *   Michael McCall (http://www.castlemccall.com/) for pointing out "htmlembed"
 *   Mike (http://mikahn.com/) for the link to the online CSS formatter
 *   TechTriad.com (http://techtriad.com/) for requesting and funding the 
 *       Javascript code to edit CSS properties and for selflessly letting the
 *       code be published for everyone's use and benefit.
 *   
 *
 * copyright (c) by Brian Gibson
 * email: bwg1974 yahoo com
 ******************************************************************************/

/* URL for overriding stylesheet
 * The best way to create this stylesheet is to 
 * 1) Load "http://www.google.com/calendar/embed?src=user%40domain.tld" in a
 *    browser,
 * 2) View the source (e.g., View->Page Source in Firefox),
 * 3) Copy the relative URL of the stylesheet (i.e., the href value of the 
 *    <link> tag), 
 * 4) Load the stylesheet in the browser by pasting the stylesheet URL into 
 *    the address bar so that it reads similar to:
 *    "http://www.google.com/calendar/d003e2eff7c42eebf779ecbd527f1fe0embedcompiled.css"
 * 5) Save the stylesheet (e.g., File->Save Page As in Firefox)
 * Edit this new file to change the style of the calendar.
 *
 * As an alternative method, take the URL you copied in Step 3, and paste it
 * in the URL field at http://mabblog.com/cssoptimizer/uncompress.html.
 * That site will automatically format the CSS so that it's easier to edit.
 */
$stylesheet = 'mygooglecal4.css';

/*******************************************************************************
 * DO NOT EDIT BELOW UNLESS YOU KNOW WHAT YOU'RE DOING
 ******************************************************************************/

// URL for the calendar
$url = "";
if(count($_GET) > 0) {
  $url = "http://www.google.com/calendar/embed?" . $_SERVER['QUERY_STRING'];
}

// Request the calendar
$ch = curl_init();
curl_setopt($ch, CURLOPT_URL, $url);
curl_setopt($ch, CURLOPT_HEADER, 0);
curl_setopt($ch, CURLOPT_RETURNTRANSFER, 1);
$buffer = curl_exec($ch);
curl_close($ch);

// Point stylesheet and javascript to custom versions
$pattern = '/(<link.*>)/';
$replacement = '<link rel="stylesheet" type="text/css" href="' . $stylesheet . '" />';
$buffer = preg_replace($pattern, $replacement, $buffer);

$pattern = '/src="(.*js)"/';
$replacement = 'src="MyGoogleCal4js.php?$1"';  
$buffer = preg_replace($pattern, $replacement, $buffer);

// Add a hook to the window onload function
$pattern = '/}\);}<\/script>/';
$replacement = '}); myGoogleCal();}</script>';
$buffer = preg_replace($pattern, $replacement, $buffer);

// Use DHTML to modify the DOM after the calendar loads
$pattern = '/(<\/head>)/';
$replacement = <<<MGC
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/dojo/1.3.1/dojo/dojo.xd.js"></script>
<script type="text/javascript">
function myGoogleCal() {
    // remove inline style from body so background-color can be set using the stylesheet
    dojo.removeAttr(dojo.body(),'style');

    // iterate over each bubble and remove the width property from the style attribute
    // so that the width can be set using the stylesheet
    dojo.query('.bubble').forEach(function(node){
        dojo.attr(node, {style:{'width': ''}});
    });

    // see Dojo documentation for other ways to edit DOM
    // http://dojotoolkit.org/
}
</script>
</head>
MGC;
$buffer = preg_replace($pattern, $replacement, $buffer);

// display the calendar
print $buffer;
?>

?>

If you look at lines 39–41 in MyGoogleCal4js.php, you’ll see how simple the fix is. No more XmlHttpRequest bugs. Thank you, Google.

<?php header("Content-type: application/x-javascript");
/*******************************************************************************
 * FILE: MyGoogleCal4js.php
 *
 * DESCRIPTION:
 *  Companion file for MyGoogleCal4.php to edit the javascript file that
 *  generates the Google Calendar.
 *   
 * USAGE:
 *  There are no user-editable parameters.
 *
 * copyright (c) by Brian Gibson
 * email: bwg1974 yahoo com
 ******************************************************************************/
// URL for the javascript
$url = "";
if(count($_GET) > 0) {
  $url = "http://www.google.com/calendar/" . $_SERVER['QUERY_STRING'];
}

/* If you would like to freeze the calendar version, download the Javascript
 * file using the same method for downloading the CSS file, as described in
 * the main script.  You can find some previous versions in the archive folder.
 * NOTE: You should use the corresponding CSS file as well.
 *
 * Edit and uncomment the following line to freeze the calendar version.
 */
//$url = "http://myserver.tld/path/to/archive/6a3eb8ba4a07edb76f79a18d6bdb8933embedcompiled__en.js";

// Request the javascript
$ch = curl_init();
curl_setopt($ch, CURLOPT_URL, $url);
curl_setopt($ch, CURLOPT_HEADER, 0);
curl_setopt($ch, CURLOPT_RETURNTRANSFER, 1);
$buffer = curl_exec($ch);
curl_close($ch);

// Fix URLs in the javascript
$pattern = '/this\.[a-zA-Z]{2}\+"calendar/';
$replacement = '"http://www.google.com/calendar';
$buffer = preg_replace($pattern, $replacement, $buffer);

// Display the javascript
print $buffer;
?>

The installation of MyGoogleCal4 is the same as the installation for MyGoogleCal2 except you download the zip file above. You can ignore step 3 regarding the .htaccess file. As far as I can tell, it’s no longer needed.

UPDATE: MyGoogleCal now has a fourth version.

Download: mygooglecal3.zip. Contains MyGoogleCal3.php, MyGoogleCal3js.php, mygooglecal3.css, mygooglecal3ie.css, and an .htaccess file. The CSS files are not guaranteed to be up-to-date so you may have to follow the instructions described in the PHP file to download the latest version from Google.

<?php
/*******************************************************************************
 * FILE: MyGoogleCal3.php
 *
 * DESCRIPTION:
 *  This script is an intermediary between an iframe and Google Calendar that
 *  allows you to override the default style.
 *
 * USAGE:
 *  <iframe src="MyGoogleCal3.php?src=user%40domain.tld"></iframe>
 *
 *  where user@domain.tld is a valid Google Calendar account.
 *
 * VALID QUERY STRING PARAMETERS:
 *    title:         any valid url encoded string 
 *                   if not present, takes title from first src
 *    showTitle:     0 or 1 (default)
 *    showNav:       0 or 1 (default)
 *    showDate:      0 or 1 (default)
 *    showTabs:      0 or 1 (default)
 *    showCalendars: 0 or 1 (default)
 *    mode:          WEEK, MONTH (default), AGENDA
 *    height:        a positive integer (should be same height as iframe)
 *    wkst:          1 (Sun; default), 2 (Mon), or 7 (Sat)
 *    hl:            en, zh_TW, zh_CN, da, nl, en_GB, fi, fr, de, it, ja, ko, 
 *                   no, pl, pt_BR, ru, es, sv, tr
 *                   if not present, takes language from first src
 *    bgcolor:       url encoded hex color value, #FFFFFF (default)
 *    src:           url encoded Google Calendar account (required)
 *    color:         url encoded hex color value     
 *                   must immediately follow src
 *    
 *    The query string can contain multiple src/color pairs.  It's recommended 
 *    to have these pairs of query string parameters at the end of the query 
 *    string.
 *
 * HISTORY:
 *   21 June     2008 - Reverted to an older custom JavaScript file
 *   18 May      2008 - Corrected a bunch of typos 
 *   24 April    2008 - Original release
 *                      Uses the technique from MyGoogleCal for IE browsers and
 *                      the technique from MyGoogleCal2 for the rest.
 *   
 * ACKNOWLEDGMENTS:
 *   Michael McCall (http://www.castlemccall.com/) for pointing out "htmlembed"
 *   Mike (http://mikahn.com/) for the link to the online CSS formatter
 *
 * copyright (c) by Brian Gibson
 * email: bwg1974 yahoo com
 ******************************************************************************/

/* URL for overriding stylesheet
 * The best way to create this stylesheet is to 
 * 1) Load "http://www.google.com/calendar/embed?src=user%40domain.tld" in a
 *    browser,
 * 2) View the source (e.g., View->Page Source in Firefox),
 * 3) Copy the relative URL of the stylesheet (i.e., the href value of the 
 *    <link> tag), 
 * 4) Load the stylesheet in the browser by pasting the stylesheet URL into 
 *    the address bar so that it reads similar to:
 *    "http://www.google.com/calendar/embed/d003e2eff7c42eebf779ecbd527f1fe0embedcompiled.css"
 * 5) Save the stylesheet (e.g., File->Save Page As in Firefox)
 * Edit this new file to change the style of the calendar.
 *
 * As an alternative method, take the URL you copied in Step 3, and paste it
 * in the URL field at http://mabblog.com/cssoptimizer/uncompress.html.
 * That site will automatically format the CSS so that it's easier to edit.
 */
$stylesheet = 'mygooglecal3.css';

/* For the IE stylesheet replace "embed" with "htmlembed" in step (1) 
 */
$stylesheet_ie = 'mygooglecal3ie.css';

/*******************************************************************************
 * DO NOT EDIT BELOW UNLESS YOU KNOW WHAT YOU'RE DOING
 ******************************************************************************/

// URL for the calendar
$url = "";
$is_ie = FALSE;
if(count($_GET) > 0) {
  if(stristr($_SERVER['HTTP_USER_AGENT'], 'msie') === FALSE) {
    $url = "http://www.google.com/calendar/embed?" . $_SERVER['QUERY_STRING'];
  } else {
    $url = "http://www.google.com/calendar/htmlembed?" . $_SERVER['QUERY_STRING'];
    $is_ie = TRUE;
  }
}

// Request the calendar
$ch = curl_init();
curl_setopt($ch, CURLOPT_URL, $url);
curl_setopt($ch, CURLOPT_HEADER, 0);
curl_setopt($ch, CURLOPT_RETURNTRANSFER, 1);
$buffer = curl_exec($ch);
curl_close($ch);

if($is_ie) {
  // Fix hrefs, image sources, and stylesheet
  $pattern = '/(href="render)/';
  $replacement = 'href="http://www.google.com/calendar/render';
  $buffer = preg_replace($pattern, $replacement, $buffer);

  $pattern = '/(href="event)/';
  $replacement = 'href="http://www.google.com/calendar/event';
  $buffer = preg_replace($pattern, $replacement, $buffer);

  $pattern = '/(http:\/\/www.google.com\/calendar\/htmlembed)/';
  $replacement = 'MyGoogleCal3.php';
  $buffer = preg_replace($pattern, $replacement, $buffer);

  $pattern = '/(src="images)/';
  $replacement = 'src="http://www.google.com/calendar/images';
  $buffer = preg_replace($pattern, $replacement, $buffer);

  $pattern = '/(<link.*>)/';
  $replacement = '<link rel="stylesheet" type="text/css" href="' . $stylesheet_ie . '" />';
  $buffer = preg_replace($pattern, $replacement, $buffer);
} else {
  // Point stylesheet and javascript to custom versions
  $pattern = '/(<link.*>)/';
  $replacement = '<link rel="stylesheet" type="text/css" href="' . $stylesheet . '" />';
  $buffer = preg_replace($pattern, $replacement, $buffer);

  $pattern = '/src="(.*js)"/';
  $replacement = 'src="MyGoogleCal3js.php?$1"';
  $buffer = preg_replace($pattern, $replacement, $buffer);
}

// display the calendar
print $buffer;
?>

The installation of MyGoogleCal3 is more or less the same as the installation for MyGoogleCal2 except you download the zip file above. Also MyGoogleCal3 uses two stylesheets, one for IE and one for all the other browsers.

There is a minor bug. Despite changing the URL from ../images/ext/poweredby.png to images/poweredby.png in the IE CSS file, this does not make the Powered by Google logo appear in the lower right. I think that’s OK since it doesn’t appear on Google’s site either.

Update (21 Jun 2008): Google changed the JavaScript once again and this time very radically. I’ve been keeping snapshots of their JavaScript code, so I’ve changed the script to load an older customized .js file. This is a quick fix.

UPDATE: MyGoogleCal now has a third version.

Download: mygooglecal2.zip. Contains MyGoogleCal2.php, mygooglecal2.css, MyGoogleCal2js.php, and an .htaccess file. The CSS file is not guaranteed to be up-to-date so you may have to follow the instructions described in the PHP file to download the latest version from Google.

<?php
/*******************************************************************************
 * FILE: MyGoogleCal2.php
 *
 * DESCRIPTION:
 *  This script is an intermediary between an iframe and Google Calendar that
 *  allows you to override the default style.
 *
 * USAGE:
 *  <iframe src="MyGoogleCal2.php?src=user%40domain.tld"></iframe>
 *
 *  where user@domain.tld is a valid Google Calendar account.
 *
 * VALID QUERY STRING PARAMETERS:
 *    title:         any valid url encoded string 
 *                   if not present, takes title from first src
 *    showTitle:     0 or 1 (default)
 *    showNav:       0 or 1 (default)
 *    showDate:      0 or 1 (default)
 *    showTabs:      0 or 1 (default)
 *    showCalendars: 0 or 1 (default)
 *    mode:          WEEK, MONTH (default), AGENDA
 *    height:        a positive integer (should be same height as iframe)
 *    wkst:          1 (Sun; default), 2 (Mon), or 7 (Sat)
 *    hl:            en, zh_TW, zh_CN, da, nl, en_GB, fi, fr, de, it, ja, ko, 
 *                   no, pl, pt_BR, ru, es, sv, tr
 *                   if not present, takes language from first src
 *    bgcolor:       url encoded hex color value, #FFFFFF (default)
 *    src:           url encoded Google Calendar account (required)
 *    color:         url encoded hex color value     
 *                   must immediately follow src
 *    
 *    The query string can contain multiple src/color pairs.  It's recommended 
 *    to have these pairs of query string parameters at the end of the query 
 *    string.
 *
 * HISTORY:
 *   22 March    2008 - Replaced the custom javascript with a PHP script that 
 *                      uses the same technique as MyGoogleCal.php
 *   14 March    2008 - Update to match Google changes to javascript code
 *   14 January  2008 - Fixed Add to Calendar URL to point to Google
 *    3 January  2008 - Reverted back to customized javascript code to fix
 *                      bug where no data is displayed when navigating
 *                      into future or past
 *                      Note: imported calendars (e.g. iCal) should work again
 *   29 October  2007 - Update to match Google changes to javascript code
 *                      Note: imported calendars (e.g. iCal) do not work
 *   14 October  2007 - Original release
 *   
 * copyright (c) by Brian Gibson
 * email: bwg1974 yahoo com
 ******************************************************************************/

/* URL for overriding stylesheet
 * The best way to create this stylesheet is to 
 * 1) Load "http://www.google.com/calendar/embed?src=user%40domain.tld" in a
 *    browser,
 * 2) View the source (e.g., View->Page Source in Firefox),
 * 3) Copy the relative URL of the stylesheet (i.e., the href value of the 
 *    <link> tag), 
 * 4) Load the stylesheet in the browser by pasting the stylesheet URL into 
 *    the address bar so that it reads similar to:
 *    "http://www.google.com/calendar/embed/d003e2eff7c42eebf779ecbd527f1fe0embedcompiled.css"
 * 5) Save the stylesheet (e.g., File->Save Page As in Firefox)
 * Edit this new file to change the style of the calendar.
 *
 * As an alternative method, take the URL you copied in Step 3, and paste it
 * in the URL field at http://mabblog.com/cssoptimizer/uncompress.html.
 * That site will automatically format the CSS so that's more easily editable.
 */
$stylesheet = 'mygooglecal2.css';

/*******************************************************************************
 * DO NOT EDIT BELOW UNLESS YOU KNOW WHAT YOU'RE DOING
 ******************************************************************************/

// URL for the calendar
$url = "";
if(count($_GET) > 0) {
  $url = "http://www.google.com/calendar/embed?" . $_SERVER['QUERY_STRING'];
}

// Request the calendar
$ch = curl_init();
curl_setopt($ch, CURLOPT_URL, $url);
curl_setopt($ch, CURLOPT_HEADER, 0);
curl_setopt($ch, CURLOPT_RETURNTRANSFER, 1);
$buffer = curl_exec($ch);
curl_close($ch);

// Point stylesheet and javascript to custom versions
$pattern = '/(<link.*>)/';
$replacement = '<link rel="stylesheet" type="text/css" href="' . $stylesheet . '" />';
$buffer = preg_replace($pattern, $replacement, $buffer);

$pattern = '/src="(.*js)"/';
$replacement = 'src="MyGoogleCal2js.php?$1"';
$buffer = preg_replace($pattern, $replacement, $buffer);

// display the calendar
print $buffer;
?>

Use is similar to the original MyGoogleCal.php. To help create the <iframe>, you can use the Embeddable Calendar Helper. Just remember to update the src attribute to point to MyGoogleCal2.php and not http://www.google.com/calendar/embed.

In addition to a custom CSS file the script makes use of a custom Javascript file. Each URL is set after the script’s header and includes instructions on how to download versions of these files from Google. This is important since it appears that the Javascript file is localized. (I included copies that I downloaded in the above Zip file.)

Update (22 Mar 08): I created a new PHP file, MyGoogleCal2js.php, which downloads the JavaScript code and edits the code on-the-fly. This negates the need to maintain a customized version of the JavaScript code on the same server as the MyGoogleCal.php script. This should also lessen the chance that MyGoogleCal2.php will break when Google updates the code as long as the changes are minor.

The UI images are no longer contained in the CSS file. You have two options on how to handle this. If your site runs off of Apache, you can create a rewrite rule to hotlink to the Google images. (I included an .htaccess file in the Zip file above that has a sample rule.) The other, more conventional option is to create an “images” subfolder where the script is located and place copies of these images there. You will definitely have to do this if you want to replace those images with customized versions. (I included images in the Zip file.)

What I’m hung-up on right now is figuring out a way to not have to save and rewrite the Javascript file. The Javascript file is responsible for drawing the calendar, retrieving the XML data from Google, and then putting that data into the calendar. The _init() function dynamically creates the URL from which to retrieve the XML data by using the browser’s window.location.host property. Since the browser will presumably be pointing to your site, the host property will not be www.google.com. As a result, the Javascript hangs at the XML loading stage fails to retrieve data when navigating into the future or past. My attempts at circumventing this problem has been met with little success.

I tried the passthru directive in .htaccess file like so:

RewriteRule ^(calendar/feeds/.*)$ http://www.google.com/$1 [P]

The browser spits out a 502 error.

A redirect, [R] instead of [P], only works half-way. The XmlHttpRequest goes thru but the data is rejected because it’s considered insecure since you can’t load data retrieved from an external domain.

I also tried ProxyPass/ProxyPassReverse to map

/calendar/

to

http://www.google.com/calendar

but it simply results in an error. I’ll have to consult with my host to figure if the error is the configuration on their end or mine.

Update (03 Jan 08): After talking with my hosting provider it turns out this error is the fault of my virtual server and it won’t be fixed since they’re retiring the hardware. I’ve been placed in the queue to migrate my account over to a new (hopefully problem-free) server. In any case, I’ll definitely revisit this solution after the migration is over and test it then.

For more info, checkout: Fixing AJAX: XMLHttpRequest Considered Harmful or Use a Web Proxy for Cross-Domain XMLHttpRequest Calls. The last one has pretty pictures.

Failed experiments include:

• Use the Javascript prototype mechanism to somehow override the window.location.host property to return a string of my choosing.

• Rewrite a request to www.google.com to point to MyGoogleCal2.php so that I could inject code into the calendar page. I thought this had a lot promise up until the point I realized I couldn’t put an .htaccess file at google.com. This was one of those “Duh!” moments.

• Manipulate the <iframe> DOM in order to change its document.styleSheets property directly. Due to security reasons, you can’t modify, let alone read, the DOM properties across different domains.

• Proxy the XmlHttpRequest thru a curl script. This almost worked. The curl request succeeded in getting the JSON data, but for whatever reason, the Javascript code failed to do anything with it. Depending on the content-type requested for the response, either nothing happening or the browser would spit out a Javascript error. I’m sure it had to with an incomplete request header or returning just the response data instead of the entire response. But whatever reason it was, this solution seemed more trouble than it was worth.

Update (29 Oct 07): Google’s new version of the Javascript code does not require any customization. Do you suppose some Google developer read my post? However, a side-effect is that imported calendars do not work. I’m betting it has to do with XmlHttpRequest permissions, but I won’t know for certain without further investigation.

When you’re done restyling your calendar, show it off! Oh and don’t forget to Digg the article.

First step is to go to the Google Calendar Gadget page. Click on the “Add to Your Webpage” button. The reason I don’t provide a direct link is because clicking on the button appears to set some locale settings. Once there you can roughly style the calendar the way you want—like the overall size, what border, whether you want to display the calendar, agenda, or both, which calendar(s) you want to load, the link color for each event (which can be different for each calendar), etc. Note that the calendar URL that you want to use is the XML one. You get the URL by going to your Google Calendar, click on “Manage Calendars,” click the specific calendar, and then clicking the XML button under “Calendar Address.” Just copy and paste the address into the form. After you are done previewing the calendar, you’ll want to click the “Get the Code” button which will generate a script block that will be the foundation on which we’ll build.

Let’s dissect the generated HTML.

<script src="http://gmodules.com/ig/ifr

This is some JavaScript that’s part of iGoogle and the Google Gadget framework. A lot of the behind the scenes magic happens here. What I’ve determined so far is that this creates a table and iframe to contain the gadget. There’s some bad news because of this, but I’ll get to that later.

?url=http://www.google.com/ig/modules/calendar-for-your-site.xml

This XML file is what defines the gadget itself. This is where we’ll be doing most of our restyling.

&up_showCalendar2=1
&up_showAgenda=1
&up_calendarFeeds=(%7B%7D)
&up_firstDay=Sunday
&up_syndicatable=true
&up_stylesheet=
&up_sub=1

Now I added carriage returns to improve readability. Most of these settings map directly to settings you set in the form. Supposedly you can supply your own stylesheet, but the fact of the matter is it gets ignored because, as we’ll see later, the gadget provides it’s own styles inline.

&up_c0u=http%3A%2F%2Fwww.google.com%2Fcalendar%2Ffeeds%2Fuser%2540domain.tld%2Fpublic%2Fbasic
&up_c0c=
&up_c1u=
&up_c1c=
&up_c2u=
&up_c2c=
&up_c3u=
&up_c3c=

These are the XML feeds for each of the calendars. You can embed up to four calendars and each can have a different color. The colors won’t show up in the calendar view but will show up in the agenda view for each event link as well as each subscription link.

&up_min=
&up_start=
&up_timeFormat=1%3A00pm
&up_calendarFeedsImported=0
&synd=open
&w=320
&h=450
&title=Google+Calendar
&border=%23ffffff%7C3px%2C1px+solid+%23999999
&output=js"></script>

Some more settings. You can have a blank title if you want. This is also where the border is defined. Again you can have a blank border or you can be very fancy with your border design as long as it’s valid URL encoded CSS. You can also tweak the width and height if the need arises.

The next step is download the source code for the gadget. (You can select “File->Save Page As” in Firefox if you load the source code in the browser.) This way we now have a copy of the gadget that we can modify. Open up the XML file in your favorite editor. Scroll down until you find the style block. This is where most of the style changes can be made. Anywhere you see #c3d9ff or rgb(195, 217, 255) is Google blue. Most of the class selectors are self-explanatory. The one style that’s not in the style block that you may wish to change is the one contained in the table with the id pickerContainer__MODULE_ID__. This is the color for the “Loading…” splash.

The last step is to change the script block that loads the gadget. Instead of

<script src="http://gmodules.com/ig/ifr?url=http://www.google.com/ig/modules/calendar-for-your-site.xml

you need to change it to

<script src="http://gmodules.com/ig/ifr?url=http://mywebsite.com/path/to/file/calendar-for-your-site.xml

Don’t forget to upload the edited XML file to your web site. That should do it.

Now about that problem I alluded to earlier. The JavaScript that loads the gadget unfortunately has some hard coded styles, in particular, it sets the background to white. White is certainly a popular background color, but obviously not all web sites follow that convention. The only way to do that is to use JavaScript to dynamically change the style. In the XML file, locate this script block at the bottom:

if (navigator.userAgent.toLowerCase().indexOf('msie') != -1) {
  document.body.onload = function() { new _CalendarModule(__MODULE_ID__); };
} else {
  new _CalendarModule(__MODULE_ID__);
}

and change it to

if (navigator.userAgent.toLowerCase().indexOf('msie') != -1) {
  document.body.onload = function() { new _CalendarModule(__MODULE_ID__); document.body.style.backgroundColor = "gray"; };
} else {
  new _CalendarModule(__MODULE_ID__);
  document.body.style.backgroundColor = "gray";
}

Of course feel free to change the color string to match your web site. Now don’t be surprised if after reloading the page, the background doesn’t change. I’m not a 100% sure why this is the case. My best guess is that the code is being cached, but clearing it on the client side doesn’t seem to have an effect. So there appears to be some server-side caching going on. The good news is that eventually the cached version times out and the correct background color will display. This technique can also be used to load a background image or change other style settings.

Assuming you do change the background color you will have to host your own corner images on your web site. Locate these lines in the style block of the XML file.

td.tl {background:url("http://www.google.com/calendar/images/corner_tl.gif") top left}
td.bl {background:url("http://www.google.com/calendar/images/corner_bl.gif") bottom left}
td.tr {background:url("http://www.google.com/calendar/images/corner_tr.gif") top right}
td.br {background:url("http://www.google.com/calendar/images/corner_br.gif") bottom right}

You will need to download, edit those GIF files to match your background color, and then upload the files to your site. Once that’s done, you’ll need to update the XML file to reflect the new URLs for those images.

Happy styling! When you’re done restyling your calendar, show it off!

P.S. The technique used to restyle Google Calendar can be used to edit the XML file. I leave this as an exercise for the reader. The technique described above doesn’t require PHP so will be most applicable to those non-programmers out there.

Object.extend(Control.Slider.prototype, {
  setLength: function(length) {
    // resize the element
    if (this.isVertical()) {
      Element.setStyle(this.track, {height: length + "px"});
    } else {
      Element.setStyle(this.track, {width: length + "px"});
    }
    
    // update lengths
    this.trackLength = this.maximumOffset() - this.minimumOffset();

    this.handleLength = this.isVertical() ? 
      (this.handles[0].offsetHeight != 0 ? 
        this.handles[0].offsetHeight : this.handles[0].style.height.replace(/px$/,"")) : 
      (this.handles[0].offsetWidth != 0 ? this.handles[0].offsetWidth : 
        this.handles[0].style.width.replace(/px$/,""));
    
    // reposition handles
    this.handles.each( function(h,i) {
      h.style[this.isVertical() ? 'top' : 'left'] = 
        this.translateToPx(this.values[i]);
    }.bind(this));
  }
})

Just drop this code into your extensions.js file and you should be good to go. Then just call the instance method like so mySlider.setLength(newLength) where newLength is an integer value.

Patch: http://dev.rubyonrails.org/ticket/6398

Enable

So what can you do with it? The basic use is simply to capture mouse input in a defined area of a web page and then map that input to a specific range of values. Another use would be to hook the output of the Touchpad to the inputs of two Sliders. This way you have one controller that can control two controllers simultaneously. (Additionally, this preserves the last value of the Touchpad unless of course you move the Slider independent of the Touchpad.) Another slick use is one that I’ve seen requested on the forums. If you hide the overflow of the Touchpad and then nest a really wide div that contains thumbnails for products, you can then limit the output of the Touchpad to horizontal values—the vertical values are simply clamped to 0—and then use the callback to set the left coordinate of the child div. Now you can scroll through your products without an ugly scrollbar.

If this sounds like something you can use and you can’t wait til the developers choose to add it to the trunk, then go visit the URL above. Then simply download and run the attached diff file on your script.aculo.us installation using Subversion. I recommend you run the functional test included in the patch (tests/run_functional_test.html –> click on touchpad_test in the left frame) to see some examples of the touchpad in action.

script.aculo.us is at version 1.6.4 at the time of this writing.