Ajaxy photo update.

index.php

@@ -9,6 +9,7 @@
 $products = Product::all(array("order" => "name ASC"));
 $sizes = Size::all(array("order" => "id ASC"));
 $colors = Color::all(array("order" => "name ASC"));
+$first_color_id = $colors[0]->id(); // make sure the images line up with the select box
 
 include "app/includes/header.php";
 
@@ -22,7 +23,7 @@
         <?= $product->g("name") ?> - <?= implode(", ", $product->category_names()) ?>
       </span>
 
-      <img src="<?= $product->photo()->url("medium") ?>" width="300" height="300" class="product_photo">
+      <img src="<?= $product->photo($first_color_id)->url("medium") ?>" width="300" height="300" class="product_photo">
 
       <form action="/cart/add.php" method="post">
         <input type="hidden" name="product_id" value="<?= $product->id() ?>">

js/master.js

@@ -0,0 +1,16 @@
+$(function() {
+
+  if ($("ul.products li").length > 0) {
+    $("ul.products li select[name=color_id]").change(function() {
+      var product_id = $(this).parent().find("input[name=product_id]").val();
+      var image_tag = $(this).parents("li").find("img.product_photo");
+
+      $.get(
+        "/photos/image_tag.php", 
+        { product_id:product_id, color_id:this.value },
+        function(data) { $(image_tag).replaceWith(data); }
+      );
+    });
+  }
+
+});

photos/image_tag.php

@@ -0,0 +1,16 @@
+<?
+
+$dir = dirname(__FILE__);
+require_once "$dir/../app/requires.php";
+$db = new DB();
+
+$photo = Photo::first(array(
+  "where" => array(
+    "product_id = ? AND color_id = ?", 
+    $_REQUEST["product_id"], 
+    $_REQUEST["color_id"]
+  )
+));
+
+?>
+<img src="<?= $photo->url("medium") ?>" width="300" height="300" class="product_photo">