Remove droiddoc/templates dir in favor of templates-sdk, move Android-specific assets to templates-sdk, add copies to templates-pdk as workaround.

Change-Id: Iad7d0f1955e5731ee9cebb8828a45bf3c297417b

core/droiddoc.mk

@@ -40,11 +40,8 @@ ifeq ($(LOCAL_DROIDDOC_SOURCE_PATH),)
 LOCAL_DROIDDOC_SOURCE_PATH := $(LOCAL_PATH)
 endif
 
-ifeq ($(LOCAL_DROIDDOC_TEMPLATE_DIR),)
-LOCAL_DROIDDOC_TEMPLATE_DIR := $(SRC_DROIDDOC_DIR)/templates
-endif
 ifeq ($(LOCAL_DROIDDOC_CUSTOM_TEMPLATE_DIR),)
-LOCAL_DROIDDOC_CUSTOM_TEMPLATE_DIR := $(SRC_DROIDDOC_DIR)/templates
+LOCAL_DROIDDOC_CUSTOM_TEMPLATE_DIR := $(SRC_DROIDDOC_DIR)/$(LOCAL_DROIDDOC_CUSTOM_TEMPLATE_DIR)
 endif
 
 ifeq ($(LOCAL_DROIDDOC_ASSET_DIR),)
@@ -125,7 +122,6 @@ ifneq ($(strip $(LOCAL_DROIDDOC_USE_STANDARD_DOCLET)),true)
 ##
 
 droiddoc_templates := \
-    $(shell find $(LOCAL_DROIDDOC_TEMPLATE_DIR) -type f) \
     $(shell find $(LOCAL_DROIDDOC_CUSTOM_TEMPLATE_DIR) -type f)
 
 droiddoc := \
@@ -135,9 +131,7 @@ droiddoc := \
 $(full_target): PRIVATE_DOCLETPATH := $(HOST_OUT_JAVA_LIBRARIES)/jsilver$(COMMON_JAVA_PACKAGE_SUFFIX):$(HOST_OUT_JAVA_LIBRARIES)/doclava$(COMMON_JAVA_PACKAGE_SUFFIX)
 $(full_target): PRIVATE_CURRENT_BUILD := -hdf page.build $(BUILD_ID)-$(BUILD_NUMBER)
 $(full_target): PRIVATE_CURRENT_TIME :=  -hdf page.now "$(shell date "+%d %b %Y %k:%M")"
-$(full_target): PRIVATE_TEMPLATE_DIR := $(LOCAL_DROIDDOC_TEMPLATE_DIR)
 $(full_target): PRIVATE_CUSTOM_TEMPLATE_DIR := $(LOCAL_DROIDDOC_CUSTOM_TEMPLATE_DIR)
-$(full_target): PRIVATE_IN_ASSET_DIR := $(LOCAL_DROIDDOC_TEMPLATE_DIR)/$(LOCAL_DROIDDOC_ASSET_DIR)
 $(full_target): PRIVATE_IN_CUSTOM_ASSET_DIR := $(LOCAL_DROIDDOC_CUSTOM_TEMPLATE_DIR)/$(LOCAL_DROIDDOC_CUSTOM_ASSET_DIR)
 $(full_target): PRIVATE_OUT_ASSET_DIR := $(out_dir)/$(LOCAL_DROIDDOC_ASSET_DIR)
 $(full_target): PRIVATE_OUT_CUSTOM_ASSET_DIR := $(out_dir)/$(LOCAL_DROIDDOC_CUSTOM_ASSET_DIR)
@@ -166,7 +160,6 @@ $(full_target): $(full_src_files) $(droiddoc_templates) $(droiddoc) $(html_dir_f
                 -doclet com.google.doclava.Doclava \
                 -docletpath $(PRIVATE_DOCLETPATH) \
                 -templatedir $(PRIVATE_CUSTOM_TEMPLATE_DIR) \
-                -templatedir $(PRIVATE_TEMPLATE_DIR) \
                 $(PRIVATE_DROIDDOC_HTML_DIR) \
                 $(addprefix -bootclasspath ,$(PRIVATE_BOOTCLASSPATH)) \
                 $(addprefix -classpath ,$(PRIVATE_CLASSPATH)) \
@@ -174,12 +167,6 @@ $(full_target): $(full_src_files) $(droiddoc_templates) $(droiddoc) $(html_dir_f
                 -d $(PRIVATE_OUT_DIR) \
                 $(PRIVATE_CURRENT_BUILD) $(PRIVATE_CURRENT_TIME) \
                 $(PRIVATE_DROIDDOC_OPTIONS) \
-        && rm -rf $(PRIVATE_OUT_ASSET_DIR) \
-        && rm -rf $(PRIVATE_OUT_CUSTOM_ASSET_DIR) \
-        && mkdir -p $(PRIVATE_OUT_ASSET_DIR) \
-        && mkdir -p $(PRIVATE_OUT_CUSTOM_ASSET_DIR) \
-        && cp -fr $(PRIVATE_IN_ASSET_DIR)/* $(PRIVATE_OUT_ASSET_DIR)/ \
-        && cp -fr $(PRIVATE_IN_CUSTOM_ASSET_DIR)/* $(PRIVATE_OUT_CUSTOM_ASSET_DIR)/ \
         && touch -f $@ \
     ) || (rm -rf $(PRIVATE_OUT_DIR) $(PRIVATE_SRC_LIST_FILE); exit 45)
 

tools/droiddoc/templates-pdk/customizations.cs

@@ -1,6 +1,7 @@
 <?cs # This file defines custom definitions for the masthead (logo, searchbox, tabs, etc) and 
 left nav (toc) that gets placed on all pages, for the open source site. See also the components/
 directory. ?>
+
 <?cs def:community_nav() ?>
   <div class="g-section g-tpl-240" id="body-content">
     <div class="g-unit g-first side-nav-resizable" id="side-nav">

tools/droiddoc/templates-sdk/assets/android-developer-docs-devguide.css

@@ -0,0 +1,19 @@
+
+@import url("android-developer-docs.css");
+
+/* Page title */
+
+#jd-header h1 {
+  padding: 8px 0 0 0;
+}
+
+/* Page content container */
+
+#jd-header table {
+margin: 0 0 1em 1em;
+}
+
+#jd-content table table,
+#jd-content table img {
+  margin:1em 0;
+}

tools/droiddoc/templates-sdk/assets/android-developer-reference.js

@@ -0,0 +1,390 @@
+
+/* API LEVEL TOGGLE */
+addLoadEvent(changeApiLevel);
+
+var API_LEVEL_ENABLED_COOKIE = "api_level_enabled";
+var API_LEVEL_COOKIE = "api_level";
+var minLevel = 1;
+
+function toggleApiLevelSelector(checkbox) {
+  var date = new Date();
+  date.setTime(date.getTime()+(10*365*24*60*60*1000)); // keep this for 10 years
+  var expiration = date.toGMTString();
+  if (checkbox.checked) {
+    $("#apiLevelSelector").removeAttr("disabled");
+    $("#api-level-toggle label").removeClass("disabled");
+    writeCookie(API_LEVEL_ENABLED_COOKIE, 1, null, expiration);
+  } else {
+    $("#apiLevelSelector").attr("disabled","disabled");
+    $("#api-level-toggle label").addClass("disabled");
+    writeCookie(API_LEVEL_ENABLED_COOKIE, 0, null, expiration);
+  }
+  changeApiLevel();
+}
+
+function buildApiLevelSelector() {
+  var maxLevel = SINCE_DATA.length;
+  var userApiLevelEnabled = readCookie(API_LEVEL_ENABLED_COOKIE);
+  var userApiLevel = readCookie(API_LEVEL_COOKIE);
+  userApiLevel = userApiLevel == 0 ? maxLevel : userApiLevel; // If there's no cookie (zero), use the max by default
+
+  if (userApiLevelEnabled == 0) {
+    $("#apiLevelSelector").attr("disabled","disabled");
+  } else {
+    $("#apiLevelCheckbox").attr("checked","checked");
+    $("#api-level-toggle label").removeClass("disabled");
+  }
+  
+  minLevel = $("body").attr("class");
+  var select = $("#apiLevelSelector").html("").change(changeApiLevel);
+  for (var i = maxLevel-1; i >= 0; i--) {
+    var option = $("<option />").attr("value",""+SINCE_DATA[i]).append(""+SINCE_DATA[i]);
+  //  if (SINCE_DATA[i] < minLevel) option.addClass("absent"); // always false for strings (codenames)
+    select.append(option);
+  }
+  
+  // get the DOM element and use setAttribute cuz IE6 fails when using jquery .attr('selected',true)
+  var selectedLevelItem = $("#apiLevelSelector option[value='"+userApiLevel+"']").get(0);
+  selectedLevelItem.setAttribute('selected',true);
+}
+
+function changeApiLevel() {
+  var maxLevel = SINCE_DATA.length;
+  var userApiLevelEnabled = readCookie(API_LEVEL_ENABLED_COOKIE);
+  var selectedLevel = maxLevel;
+  
+  if (userApiLevelEnabled == 0) {
+    toggleVisisbleApis(selectedLevel, "body");
+  } else {
+    selectedLevel = $("#apiLevelSelector option:selected").val();
+    toggleVisisbleApis(selectedLevel, "body");
+    
+    var date = new Date();
+    date.setTime(date.getTime()+(10*365*24*60*60*1000)); // keep this for 10 years
+    var expiration = date.toGMTString();
+    writeCookie(API_LEVEL_COOKIE, selectedLevel, null, expiration);
+  }
+  
+  if (selectedLevel < minLevel) {
+    var thing = ($("#jd-header").html().indexOf("package") != -1) ? "package" : "class";
+    $("#naMessage").show().html("<div><p><strong>This " + thing + " is not available with API Level " + selectedLevel + ".</strong></p>"
+                              + "<p>To use this " + thing + ", your application must specify API Level " + minLevel + " or higher in its manifest "
+                              + "and be compiled against a version of the Android library that supports an equal or higher API Level. To reveal this "
+                              + "document, change the value of the API Level filter above.</p>"
+                              + "<p><a href='" +toRoot+ "guide/appendix/api-levels.html'>What is the API Level?</a></p></div>");
+  } else {
+    $("#naMessage").hide();
+  }
+}
+
+function toggleVisisbleApis(selectedLevel, context) {
+  var apis = $(".api",context);
+  apis.each(function(i) {
+    var obj = $(this);
+    var className = obj.attr("class");
+    var apiLevelIndex = className.lastIndexOf("-")+1;
+    var apiLevelEndIndex = className.indexOf(" ", apiLevelIndex);
+    apiLevelEndIndex = apiLevelEndIndex != -1 ? apiLevelEndIndex : className.length;
+    var apiLevel = className.substring(apiLevelIndex, apiLevelEndIndex);
+    if (apiLevel > selectedLevel) obj.addClass("absent").attr("title","Requires API Level "+apiLevel+" or higher");
+    else obj.removeClass("absent").removeAttr("title");
+  });
+}
+
+/* NAVTREE */
+
+function new_node(me, mom, text, link, children_data, api_level)
+{
+  var node = new Object();
+  node.children = Array();
+  node.children_data = children_data;
+  node.depth = mom.depth + 1;
+
+  node.li = document.createElement("li");
+  mom.get_children_ul().appendChild(node.li);
+
+  node.label_div = document.createElement("div");
+  node.label_div.className = "label";
+  if (api_level != null) {
+    $(node.label_div).addClass("api");
+    $(node.label_div).addClass("api-level-"+api_level);
+  }
+  node.li.appendChild(node.label_div);
+  node.label_div.style.paddingLeft = 10*node.depth + "px";
+
+  if (children_data == null) {
+    // 12 is the width of the triangle and padding extra space
+    node.label_div.style.paddingLeft = ((10*node.depth)+12) + "px";
+  } else {
+    node.label_div.style.paddingLeft = 10*node.depth + "px";
+    node.expand_toggle = document.createElement("a");
+    node.expand_toggle.href = "javascript:void(0)";
+    node.expand_toggle.onclick = function() {
+          if (node.expanded) {
+            $(node.get_children_ul()).slideUp("fast");
+            node.plus_img.src = me.toroot + "assets/images/triangle-closed-small.png";
+            node.expanded = false;
+          } else {
+            expand_node(me, node);
+          }
+       };
+    node.label_div.appendChild(node.expand_toggle);
+
+    node.plus_img = document.createElement("img");
+    node.plus_img.src = me.toroot + "assets/images/triangle-closed-small.png";
+    node.plus_img.className = "plus";
+    node.plus_img.border = "0";
+    node.expand_toggle.appendChild(node.plus_img);
+
+    node.expanded = false;
+  }
+
+  var a = document.createElement("a");
+  node.label_div.appendChild(a);
+  node.label = document.createTextNode(text);
+  a.appendChild(node.label);
+  if (link) {
+    a.href = me.toroot + link;
+  } else {
+    if (children_data != null) {
+      a.className = "nolink";
+      a.href = "javascript:void(0)";
+      a.onclick = node.expand_toggle.onclick;
+      // This next line shouldn't be necessary.  I'll buy a beer for the first
+      // person who figures out how to remove this line and have the link
+      // toggle shut on the first try. --joeo@android.com
+      node.expanded = false;
+    }
+  }
+  
+
+  node.children_ul = null;
+  node.get_children_ul = function() {
+      if (!node.children_ul) {
+        node.children_ul = document.createElement("ul");
+        node.children_ul.className = "children_ul";
+        node.children_ul.style.display = "none";
+        node.li.appendChild(node.children_ul);
+      }
+      return node.children_ul;
+    };
+
+  return node;
+}
+
+function expand_node(me, node)
+{
+  if (node.children_data && !node.expanded) {
+    if (node.children_visited) {
+      $(node.get_children_ul()).slideDown("fast");
+    } else {
+      get_node(me, node);
+      if ($(node.label_div).hasClass("absent")) $(node.get_children_ul()).addClass("absent");
+      $(node.get_children_ul()).slideDown("fast");
+    }
+    node.plus_img.src = me.toroot + "assets/images/triangle-opened-small.png";
+    node.expanded = true;
+    
+    // perform api level toggling because new nodes are new to the DOM
+    var selectedLevel = $("#apiLevelSelector option:selected").val();
+    toggleVisisbleApis(selectedLevel, "#side-nav");
+  }
+}
+
+function get_node(me, mom)
+{
+  mom.children_visited = true;
+  for (var i in mom.children_data) {
+    var node_data = mom.children_data[i];
+    mom.children[i] = new_node(me, mom, node_data[0], node_data[1],
+        node_data[2], node_data[3]);
+  }
+}
+
+function this_page_relative(toroot)
+{
+  var full = document.location.pathname;
+  var file = "";
+  if (toroot.substr(0, 1) == "/") {
+    if (full.substr(0, toroot.length) == toroot) {
+      return full.substr(toroot.length);
+    } else {
+      // the file isn't under toroot.  Fail.
+      return null;
+    }
+  } else {
+    if (toroot != "./") {
+      toroot = "./" + toroot;
+    }
+    do {
+      if (toroot.substr(toroot.length-3, 3) == "../" || toroot == "./") {
+        var pos = full.lastIndexOf("/");
+        file = full.substr(pos) + file;
+        full = full.substr(0, pos);
+        toroot = toroot.substr(0, toroot.length-3);
+      }
+    } while (toroot != "" && toroot != "/");
+    return file.substr(1);
+  }
+}
+
+function find_page(url, data)
+{
+  var nodes = data;
+  var result = null;
+  for (var i in nodes) {
+    var d = nodes[i];
+    if (d[1] == url) {
+      return new Array(i);
+    }
+    else if (d[2] != null) {
+      result = find_page(url, d[2]);
+      if (result != null) {
+        return (new Array(i).concat(result));
+      }
+    }
+  }
+  return null;
+}
+
+function load_navtree_data(toroot) {
+  var navtreeData = document.createElement("script");
+  navtreeData.setAttribute("type","text/javascript");
+  navtreeData.setAttribute("src", toroot+"navtree_data.js");
+  $("head").append($(navtreeData));
+}
+
+function init_default_navtree(toroot) {
+  init_navtree("nav-tree", toroot, NAVTREE_DATA);
+  
+  // perform api level toggling because because the whole tree is new to the DOM
+  var selectedLevel = $("#apiLevelSelector option:selected").val();
+  toggleVisisbleApis(selectedLevel, "#side-nav");
+}
+
+function init_navtree(navtree_id, toroot, root_nodes)
+{
+  var me = new Object();
+  me.toroot = toroot;
+  me.node = new Object();
+
+  me.node.li = document.getElementById(navtree_id);
+  me.node.children_data = root_nodes;
+  me.node.children = new Array();
+  me.node.children_ul = document.createElement("ul");
+  me.node.get_children_ul = function() { return me.node.children_ul; };
+  //me.node.children_ul.className = "children_ul";
+  me.node.li.appendChild(me.node.children_ul);
+  me.node.depth = 0;
+
+  get_node(me, me.node);
+
+  me.this_page = this_page_relative(toroot);
+  me.breadcrumbs = find_page(me.this_page, root_nodes);
+  if (me.breadcrumbs != null && me.breadcrumbs.length != 0) {
+    var mom = me.node;
+    for (var i in me.breadcrumbs) {
+      var j = me.breadcrumbs[i];
+      mom = mom.children[j];
+      expand_node(me, mom);
+    }
+    mom.label_div.className = mom.label_div.className + " selected";
+    addLoadEvent(function() {
+      scrollIntoView("nav-tree");
+      });
+  }
+}
+
+/* TOGGLE INHERITED MEMBERS */
+
+/* Toggle an inherited class (arrow toggle)
+ * @param linkObj  The link that was clicked.
+ * @param expand  'true' to ensure it's expanded. 'false' to ensure it's closed.
+ *                'null' to simply toggle.
+ */
+function toggleInherited(linkObj, expand) {
+    var base = linkObj.getAttribute("id");
+    var list = document.getElementById(base + "-list");
+    var summary = document.getElementById(base + "-summary");
+    var trigger = document.getElementById(base + "-trigger");
+    var a = $(linkObj);
+    if ( (expand == null && a.hasClass("closed")) || expand ) {
+        list.style.display = "none";
+        summary.style.display = "block";
+        trigger.src = toRoot + "assets/images/triangle-opened.png";
+        a.removeClass("closed");
+        a.addClass("opened");
+    } else if ( (expand == null && a.hasClass("opened")) || (expand == false) ) {
+        list.style.display = "block";
+        summary.style.display = "none";
+        trigger.src = toRoot + "assets/images/triangle-closed.png";
+        a.removeClass("opened");
+        a.addClass("closed");
+    }
+    return false;
+}
+
+/* Toggle all inherited classes in a single table (e.g. all inherited methods)
+ * @param linkObj  The link that was clicked.
+ * @param expand  'true' to ensure it's expanded. 'false' to ensure it's closed.
+ *                'null' to simply toggle.
+ */
+function toggleAllInherited(linkObj, expand) {
+  var a = $(linkObj);
+  var table = $(a.parent().parent().parent()); // ugly way to get table/tbody
+  var expandos = $(".jd-expando-trigger", table);
+  if ( (expand == null && a.text() == "[Expand]") || expand ) {
+    expandos.each(function(i) {
+      toggleInherited(this, true);
+    });
+    a.text("[Collapse]");
+  } else if ( (expand == null && a.text() == "[Collapse]") || (expand == false) ) {
+    expandos.each(function(i) {
+      toggleInherited(this, false);
+    });
+    a.text("[Expand]");
+  }
+  return false;
+}
+
+/* Toggle all inherited members in the class (link in the class title)
+ */
+function toggleAllClassInherited() {
+  var a = $("#toggleAllClassInherited"); // get toggle link from class title
+  var toggles = $(".toggle-all", $("#doc-content"));
+  if (a.text() == "[Expand All]") {
+    toggles.each(function(i) {
+      toggleAllInherited(this, true);
+    });
+    a.text("[Collapse All]");
+  } else {
+    toggles.each(function(i) {
+      toggleAllInherited(this, false);
+    });
+    a.text("[Expand All]");
+  }
+  return false;
+}
+
+/* Expand all inherited members in the class. Used when initiating page search */
+function ensureAllInheritedExpanded() {
+  var toggles = $(".toggle-all", $("#doc-content"));
+  toggles.each(function(i) {
+    toggleAllInherited(this, true);
+  });
+  $("#toggleAllClassInherited").text("[Collapse All]");
+}
+
+
+/* HANDLE KEY EVENTS
+ * - Listen for Ctrl+F (Cmd on Mac) and expand all inherited members (to aid page search)
+ */
+var agent = navigator['userAgent'].toLowerCase();
+var mac = agent.indexOf("macintosh") != -1;
+
+$(document).keydown( function(e) {
+var control = mac ? e.metaKey && !e.ctrlKey : e.ctrlKey; // get ctrl key
+  if (control && e.which == 70) {  // 70 is "F"
+    ensureAllInheritedExpanded();
+  }
+});

tools/droiddoc/templates-sdk/assets/carousel.js

@@ -0,0 +1,311 @@
+/* file: carousel.js
+   date: oct 2008
+   author: jeremydw,smain
+   info: operates the carousel widget for announcements on 
+         the android developers home page. modified from the
+         original market.js from jeremydw. */
+
+/* -- video switcher -- */
+
+var oldVid = "multi"; // set the default video
+var nowPlayingString = "Now playing:";
+var assetsRoot = "assets/";
+
+
+/* -- app thumbnail switcher -- */
+
+var currentDroid;
+var oldDroid;
+
+// shows a random application
+function randomDroid(){
+
+	// count the total number of apps
+	var droidListLength = 0;
+	for (var k in droidList)
+		droidListLength++;
+		
+	// pick a random app and show it
+  var j = 0;
+  var i = Math.floor(droidListLength*Math.random());
+  for (var x in droidList) {
+    if(j++ == i){
+    	currentDroid = x;
+    	showPreview(x);
+    	centerSlide(x);
+    }
+  }
+
+}
+
+// shows a bulletin, swaps the carousel highlighting
+function droid(appName){
+
+  oldDroid = $("#droidlink-"+currentDroid);
+  currentDroid = appName;
+
+  var droid = droidList[appName];
+  
+  $("#"+appName).show().siblings().hide();
+
+  if(oldDroid)
+    oldDroid.removeClass("selected");
+
+  $("#droidlink-"+appName).addClass("selected");
+}
+
+
+// -- * build the carousel based on the droidList * -- //
+function buildCarousel() {
+  var appList = document.getElementById("app-list");
+  for (var x in droidList) {
+    var droid = droidList[x];
+    var icon = droid.icon;
+    var name = droid.name;
+    var a = document.createElement("a");
+    var img = document.createElement("img");
+    var br = document.createElement("br");
+    var span = document.createElement("span");
+    var text = document.createTextNode(droid.name);
+
+    a.setAttribute("id", "droidlink-" + x);
+    a.className = x;
+    a.setAttribute("href", "#");
+    a.onclick = function() { showPreview(this.className); return false; }
+    img.setAttribute("src", toRoot + assetsRoot + "images/home/" + droid.icon);
+    img.setAttribute("alt", "");
+
+    span.appendChild(text);
+    a.appendChild(img);
+    a.appendChild(br);
+    a.appendChild(span);
+    appList.appendChild(a);
+    
+    
+    /* add the bulletins */
+    var layout = droid.layout;
+    var div = document.createElement("div");
+    var imgDiv = document.createElement("div");
+    var descDiv = document.createElement("div");
+    
+    div.setAttribute("id", x);
+    div.setAttribute("style", "display:none");
+    imgDiv.setAttribute("class", "bulletinImg");
+    descDiv.setAttribute("class", "bulletinDesc");
+	
+	  if (layout == "imgLeft") {
+	    $(imgDiv).addClass("img-left");
+	    $(descDiv).addClass("desc-right");
+	  } else if (layout == "imgTop") {
+	    $(imgDiv).addClass("img-top");
+	    $(descDiv).addClass("desc-bottom");
+	  } else if (layout == "imgRight") {
+	    $(imgDiv).addClass("img-right");
+	    $(descDiv).addClass("desc-left");
+	  }
+	
+	  imgDiv.innerHTML = "<img src='" + toRoot + assetsRoot + "images/home/" + droid.img + "'>";
+	  descDiv.innerHTML = (droid.title != "") ? "<h3>" + droid.title + "</h3>" + droid.desc : droid.desc;
+		$(div).append(imgDiv);
+		$(div).append(descDiv);
+    
+    $("#carouselMain").append(div);
+    
+  }
+}
+
+// -- * slider * -- //
+
+// -- dependencies:
+//    (1) div containing slides, (2) a "clip" div to hide the scroller
+//    (3) control arrows
+
+// -- * config below * -- //
+
+var slideCode = droidList; // the dictionary of slides
+var slideList = 'app-list'; // the div containing the slides
+var arrowRight = 'arrow-right'; // the right control arrow
+var arrowLeft = 'arrow-left'; // the left control arrow
+
+
+function showPreview(slideName) {
+  centerSlide(slideName);
+  if (slideName.indexOf('selected') != -1) {
+    return false;
+  }
+  droid(slideName); // do this function when slide is clicked
+}
+
+var thumblist = document.getElementById(slideList);// the div containing the slides
+
+var slideWidth = 144; // width of a slide including all margins, etc.
+var slidesAtOnce = 3; // no. of slides to appear at once (requires odd number to have a centered slide)
+
+// -- * no editing should be needed below * -- //
+
+var originPosition = {};
+var is_animating = 0;
+var currentStripPosition = 0;
+var centeringPoint = 0;
+var rightScrollLimit = 0;
+
+// makeSlideStrip()
+// - figures out how many slides there are
+// - determines the centering point of the slide strip
+function makeSlideStrip() {
+  var slideTotal = 0;
+  centeringPoint = Math.ceil(slidesAtOnce/2);
+  for (var x in slideCode) {
+    slideTotal++;
+  }
+  var i = 0;
+  for (var code in slideCode) {
+    if (i <= centeringPoint-1) {
+      originPosition[code] = 0;
+    } else {
+      if (i >= slideTotal-centeringPoint+1)  {
+        originPosition[code] = (slideTotal-slidesAtOnce)*slideWidth;
+      } else {
+        originPosition[code] = (i-centeringPoint+1)*slideWidth;
+      }
+    }
+    i++;
+  }
+  rightScrollLimit = -1*(slideTotal-slidesAtOnce)*slideWidth;
+}
+
+// slides with acceleration
+function slide(goal, id, go_left, cp) {
+  var div = document.getElementById(id);
+  var animation = {};
+  animation.time = 0.5;  // in seconds
+  animation.fps = 60;
+  animation.goal = goal;
+  origin = 0.0;
+  animation.origin = Math.abs(origin);  
+  animation.frames = (animation.time * animation.fps) - 1.0;
+  var current_frame = 0;
+  var motions = Math.abs(animation.goal - animation.origin);
+  function animate() {
+    var ease_right = function (t) { return (1 - Math.cos(t * Math.PI))/2.0; };
+    var ease = ease_right;
+    if (go_left == 1) {
+      ease = function(t) { return 1.0 - ease_right(t); };
+    }
+    var left = (ease(current_frame/animation.frames) * Math.abs(animation.goal - animation.origin)) - cp; 
+    if(left < 0) {
+      left = 0;
+    }
+    if(!isNaN(left)) {
+      div.style.left = '-' + Math.round(left) + 'px';
+    }
+    current_frame += 1;
+    if (current_frame == animation.frames) {
+      is_animating = 0;
+      window.clearInterval(timeoutId)
+    }
+  }
+  var timeoutId = window.setInterval(animate, animation.time/animation.fps * 1000);
+}
+
+//Get style property
+function getStyle(element, cssProperty){
+  var elem = document.getElementById(element);
+  if(elem.currentStyle){
+    return elem.currentStyle[cssProperty]; //IE
+  } else{
+    var style =  document.defaultView.getComputedStyle(elem, null); //firefox, Opera
+    return style.getPropertyValue(cssProperty);
+  }
+}
+
+// Left and right arrows
+function page_left() {
+  var amount = slideWidth;
+  animateSlide(amount, 'left');
+}
+
+function page_right() { 
+  var amount = slideWidth;
+  animateSlide(amount, 'right');
+}
+
+
+// animates the strip
+// - sets arrows to on or off
+function animateSlide(amount,dir) {
+  var currentStripPosition = parseInt(getStyle(slideList,'left'));
+  var motionDistance;
+  if (amount == slideWidth ) {
+    motionDistance = slideWidth;
+  } else {
+    motionDistance = amount;
+  }
+  
+  var rightarrow = document.getElementById(arrowRight);
+  var leftarrow = document.getElementById(arrowLeft);
+  
+  function aToggle(state,aDir) {
+    if (state == 'on') {
+      if (aDir =='right') {
+        rightarrow.className = 'arrow-right-on';
+        rightarrow.href = "javascript:page_right()";
+      } else {
+        leftarrow.className = 'arrow-left-on';
+        leftarrow.href = "javascript:page_left()";
+      }
+    } else {
+      if (aDir =='right') {
+        rightarrow.href = "javascript:{}";
+        rightarrow.className = 'arrow-right-off'; 
+      } else {
+        leftarrow.href = "javascript:{}";
+        leftarrow.className = 'arrow-left-off';
+      }
+    }
+  }
+  
+  function arrowChange(rP) {
+    if (rP >= rightScrollLimit) {
+      aToggle('on','right');
+    }
+    if (rP <= rightScrollLimit) {
+      aToggle('off','right');
+    }
+    if (rP <= slideWidth) {
+      aToggle('on','left');
+    }
+    if (rP >= 0) {
+      aToggle('off','left');
+    }
+  }
+
+  if (dir == 'right' && is_animating == 0) {
+    arrowChange(currentStripPosition-motionDistance);
+    is_animating = 1;
+    slide(motionDistance, slideList, 0, currentStripPosition);
+  } else if (dir == 'left' && is_animating == 0) {
+    arrowChange(currentStripPosition+motionDistance);
+    is_animating = 1;
+    rightStripPosition = currentStripPosition + motionDistance;
+    slide(motionDistance, slideList, 1, rightStripPosition);
+  }
+}
+
+function centerSlide(slideName) {
+  var currentStripPosition = parseInt(getStyle(slideList,'left'));
+  var dir = 'left';
+  var originpoint = Math.abs(currentStripPosition);
+  if (originpoint <= originPosition[slideName]) {
+    dir = 'right';
+  }
+  var motionValue = Math.abs(originPosition[slideName]-originpoint);
+  animateSlide(motionValue,dir);
+}
+
+
+function initCarousel(def) {
+  buildCarousel();
+  showPreview(def);
+  makeSlideStrip();
+}