download instruction buttons now work via ajax too

frontend/templates/base.html

@@ -23,7 +23,7 @@
     {% block extra_css %}{% endblock %}
 	<script type="text/javascript" src="{{ jquery_home }}"></script>
     <script type="text/javascript" src="/static/js/jquery.cookie.js"></script>
-	<script type="text/javascript" src="/static/js/sitewide.js"></script>
+	<script type="text/javascript" src="/static/js/sitewide1.js"></script>
 	<script type="text/javascript" src="/static/js/watermark_init.js"></script>
 	<script type="text/javascript" src="/static/js/watermark_change.js"></script>
     {% block extra_js %}

static/css/enhanced_download.css

@@ -0,0 +1 @@
+.buttons{display:inherit}.instructions div:not(#trythis_div),.instructions h4{display:none}

static/css/enhanced_download_ie.css

@@ -0,0 +1 @@
+.buttons{display:inherit}.instructions div,.instructions h4{display:none}#trythis_div{display:inherit}

static/js/download_page.js

@@ -1,21 +1,22 @@
 var $j = jQuery.noConflict();
 
-$j(document).on('prettifyDownload', function(){
-    $j('.buttons').show();
-    $j('.instructions div:not(#trythis_div)').hide();
-    $j('.instructions h4').hide();
-    
-    $j('.buttons div').on('click', function() {
-        $j(this).removeClass('modify');
-        $j(this).siblings().addClass('modify');
-        var buttonID = $j(this).children('a').attr('id');
-        var divSelector = '#' + buttonID + '_div';
-        var activeDiv = $j(divSelector);
-        activeDiv.show();
-        activeDiv.siblings().hide();
-    });
-});
+// must load CSS rather than show/hide jQuery objects; can't trigger an event
+// on an element not present on pageload, so binding it via on is useless
+if (document.createStyleSheet) {
+    // make it work in IE <= 8
+    document.createStyleSheet('/static/css/enhanced_download_ie.css');
+}
+else {
+    $j('<link rel="stylesheet" type="text/css" href="/static/css/enhanced_download.css" />').appendTo('head'); 
+}
 
-// needs to work both when people go straight to /download and when they get there via hijax link
-// ergo can't fire on document ready; needs custom trigger
-$j(document).trigger('prettifyDownload');
+// browser has a better sense of DOM changes than jQuery, so user can trigger click element
+$j(document).on('click', '.buttons div', function() {
+    $j(this).removeClass('modify');
+    $j(this).siblings().addClass('modify');
+    var buttonID = $j(this).children('a').attr('id');
+    var divSelector = '#' + buttonID + '_div';
+    var activeDiv = $j(divSelector);
+    activeDiv.show();
+    activeDiv.siblings().hide();
+});

static/js/sitewide1.js

@@ -23,7 +23,7 @@ $j(document).ready(function() {
 
 		if ($j(this).attr("href").indexOf("download") !== -1) {
 		    jQuery.getScript('/static/js/download_page.js');
-		    jQuery.getScript('https://platform.readmill.com/send.js');
+            jQuery.getScript('https://platform.readmill.com/send.js');
 		}
 				
 		//need to push next cookie for sign-in links

static/less/enhanced_download.less

@@ -0,0 +1,7 @@
+.buttons {
+    display: inherit;
+}
+
+.instructions div:not(#trythis_div), .instructions h4 {
+    display: none;
+}

static/less/enhanced_download_ie.less

@@ -0,0 +1,12 @@
+.buttons {
+    display: inherit;
+}
+
+.instructions div, .instructions h4 {
+    display: none;
+}
+
+/* the not selector doesn't work in IE <= 8 */
+#trythis_div {
+    display: inherit;
+}