Einführung ThumbPages und Fahrzeug-Farbwechsler

js/ahd.js

@@ -7,13 +7,16 @@
  */
 
 $(document).ready(function () {
+    carColor.init();
     slider.init();
     kenBurns.init();
+    thumbPage.init();
 });
 
 $(window).resize(function () {
     slider.initVariables();
     kenBurns.initVariables();
+    thumbPage.init();
 });
 
 var slider = {
@@ -364,4 +367,53 @@ var kenBurns = {
             })
     }
 
+};
+
+
+var carColor = {
+    activePreview: 0,
+    previewElement: null,
+    previewImages: null,
+    thumbElement: null,
+    thumbImages: null,
+
+
+    init: function () {
+        carColor.initVariables();
+        carColor.thumbImages.on('mouseenter', function () {
+            $(carColor.previewImages.get(carColor.activePreview)).hide();
+            carColor.activePreview = parseInt($(this).data('thumb'));
+            $(carColor.previewImages.get(carColor.activePreview)).css('display', 'block');
+        });
+    },
+
+
+    initVariables: function () {
+        carColor.previewElement = $('.car-color');
+        carColor.previewImages = $('img', carColor.previewElement);
+        carColor.thumbElement = $('.car-color-thumbs');
+        carColor.thumbImages = $('img', carColor.thumbElement);
+    }
+};
+
+
+var thumbPage = {
+    init: function () {
+        var thumbElement = $('.thumbPage');
+        var thumbImages = $('.thumbnail', '.thumbPage');
+        var left = 0;
+
+        if (thumbElement.length === 0) {
+            return false;
+        }
+
+        $('.clearfix', thumbElement).remove();
+
+        $.each(thumbImages, function(key, image) {
+            if($(image).offset().left <= left) {
+                $(image).parent().before('<div class="clearfix"></div>');
+            }
+            left = $(image).offset().left;
+        });
+    }
 };