Cleanup & Minor improvements

TODO Selector configuration for easier implementation

bannerslider.js

@@ -5,14 +5,13 @@
 
 /*
  *
- * CONFIGURATION
+ * CONFIGURATION DEFAULTS
  *
  * */
 slider_aspect = 16 / 10;
-//TODO Selectors for Bannergroup & Banneritems + add Bannergroup & -item classes
 /*
  *
- * END CONFIGURATION
+ * END CONFIGURATION DEFAULTS
  *
  * */
 
@@ -83,8 +82,6 @@ function Dimensions() {
 
         bannergroupwidth = bannergroup[0].clientWidth;
         banneritemwidth = banneritems[0].clientWidth;
-        //bannergroupwidth = bannergroup[0].width();
-        //banneritemwidth = banneritems[0].width();
 
         // CALCULATE BANNER DIMENSIONS
         bannerheight = banneritemwidth / slider_aspect;
@@ -128,7 +125,9 @@ function banner(activeitem) {
         // ------------------------------------------------------------------------
         // ADD the Jumper-wrapper
         bannergroup.append("<div class='bannerjump-wrapper'></div>");
+
         // TODO Jumps to <a>-top by clicking left/right arrows
+
         // ADD the left/right start/stop controls
         bannergroup
             .append(
@@ -179,7 +178,6 @@ function banner(activeitem) {
         bannercontrols_left = $('.bannercontrols .left');
         bannercontrols_right = $('.bannercontrols .right');
 
-
         bannercontrols_left.css({
             position: "absolute",
             left: '',
@@ -210,7 +208,6 @@ function banner(activeitem) {
             "z-index": "10000"
         });
 
-
         // SET THE BANNERITEMS'POSITIONS
         // --------------------------------------------------------------
 
@@ -219,18 +216,20 @@ function banner(activeitem) {
         for (var $i = 0; $i <= (bannerarraylength); $i++) {
 
             // LOGIC TO POSITION THE IMAGES
-            //
-
             $banneritemnr = $i;
             $posnr = orderarray[$i];
-
+            // Get the item for position $i
             $banneritem = $(".banneritem:eq(" + $banneritemnr + ")");
-
-            $posoffset = activepos - 1 - $posnr;
-
+            // get the position-offset in Layout
+            // position 1 is the middle all others are
+            // aligned around it:
+            // position 2 is after 1 and the last position
+            // position n is before it
+            $posoffset = (activepos - 1) - $posnr;
+            // calculate the offset based on the position
             $left = ($posoffset * banneritemwidth) + banneroffset;
 
-            // Get optional for styling
+            // Set CLASSES for styling
             if (activeitem == $i) {
                 $state = "active";
                 $removal = "inactive";
@@ -262,11 +261,14 @@ function banner(activeitem) {
             $banneritem.addClass($state);
             $banneritem.removeClass($removal);
 
+            //
+            // JUMP CIRCLES
             if (bannerarraylength > 0) {
+
                 // CONSTRUCT THE JUMP-ICONS
                 $('.bannerjump-wrapper').prepend(
-                    "<a class='bannerjump bannerjump-" + ($i)
-                    + "' onclick='jump(" + ($i) + ")'></a>");
+                    "<a class='bannerjump bannerjump-" + ($i) + "' onclick='jump(" + ($i) + ")'></a>"
+                );
 
                 // Make the active jumper colored different
                 if (activeitem == $i) {
@@ -278,6 +280,7 @@ function banner(activeitem) {
 
         //prevent banner iframes from getting too large
         var iframes = $('.banneritem iframe');
+
         for (var i = 0; i < iframes.length; i++) {
             var iframe = iframes[i];
             iframe.removeAttribute('height');
@@ -288,7 +291,6 @@ function banner(activeitem) {
 }
 
 function resetcss() {
-
     bannercontrols_left.css({
         left: '',
         top: '',
@@ -310,8 +312,6 @@ function resetcss() {
         width: '',
         height: ''
     });
-    //banneritems.attribute('style','');
-    //bannergroup.attr('style','');
 }
 
 function pause() {
@@ -320,19 +320,21 @@ function pause() {
         window.clearInterval(bannerautoslide);
     }
 }
+
 function play() {
     // Play Button Press
-    scrollL();
+    scrollR();
     start();
 }
+
 function start() {
-    //if (typeof bannerautoslide == 'undefined') {
-    // Scroll on Time
+    // Pause to avoid multiple Intervals
     pause();
+
+    // Scroll on Time
     bannerautoslide = window.setInterval(function () {
-        scrollL();
+        scrollR();
     }, 7500);
-    //}
 }
 
 // jump to specific Banneritem
@@ -344,6 +346,8 @@ function jump($activeitem) {
 
         // JUMP to chosen Item
         activeitem = $activeitem;
+
+        // Reorder
         order(activeitem);
     })(jQuery);
 }
@@ -390,33 +394,46 @@ function scrollR() {
 // TODO Set images as background-images
 
 function order($item) {
-    //if ($item != null) {
-    //    activeitem = 0;
-    //}
 
+    // Variables
     banneritems = $('.banneritem');
     orderarray = new Array();
 
     // Calculate the center Position
     activepos = Math.round(banneritems.length / 2);
 
+    // Get all item Numbers in an Array of the positions
     for (i = 0; i < banneritems.length; i++) {
         orderarray[i] = i;
     }
+
+    // Rotate the Array by the Number of the middle position
+    // plus the number of the active item
     for (j = 0; j < activepos + activeitem; j++) {
         orderarray.unshift(orderarray.pop());
     }
+
+    // Execute the maintenance function (Dimensions & Banner arrangement)
     maintenance();
 }
 
 function notransitions() {
+    // remove the transitions set in css
+    // by overwriting them in Element
     $('.bannergroup *').css({
         transition: "none"
     })
 }
 
 function yestransitions() {
+    // remove the transitions set in Element
+    // to make the ones set in css work again
     $('.bannergroup *').css({
         transition: ""
     })
+}
+
+function sg_slider_config($aspect) {
+    slider_aspect = $aspect;
+    //TODO make selectors configurable and add original selectors to elements
 }