(function($) { var donertaal =0; var ITEM_SIZE; var ITEM_RECTS; var CAROUSEL_WIDTH; var CAROUSEL_HEIGHT; var _selectedIndex = -1; var _settings; function setupVars(ref, settings) { _settings = $.extend({ items: new Array(), itemSize: 256 }, settings || {}); ITEM_SIZE = _settings.itemSize; CAROUSEL_WIDTH = ref.width(); CAROUSEL_HEIGHT = ref.height(); ITEM_RECTS = preCalculateRects(_settings.items.length); } $.fn.carousel = function(settings) { var refCarousel = $(this); setupVars(refCarousel, settings); // Add items for (var i = 0; i < _settings.items.length; i++) { // Create item var wrapper = createItem(i); // Click event handler wrapper.click(function(event) { var newIndex = $(this).attr("itemIndex"); if (newIndex == _selectedIndex) { // Navigate to item } else { if(donertaal == 0){ doSelection(newIndex); event.preventDefault(); donertaal = 1; } } }); refCarousel.append(wrapper); } // First time animation doSelection(0); return this; }; function doSelection(index) { beforeSelectionStarts(); _selectedIndex = index; layout(index); } function beforeSelectionStarts() { if (_selectedIndex != -1) { if(_selectedIndex==0){ newdex = 1;}else if(_selectedIndex == 1){ newdex = 2; }else{ newdex = 3; } $('#thehu_'+_selectedIndex).attr("src", "./images/logo_cff/0" + newdex + ".png"); } } function selectionCompleted(wrapper, index) { document.getElementById('carousel').style.visibility = 'visible'; $('#wacarousel').animate({opacity: 0}, 200, '',function(){ }); if(index != 0){ } if(index==0){ newdex = 1;}else if(index == 1){ newdex = 2; }else{ newdex = 3; } if(index!=0){ $('#thehu_'+_selectedIndex).animate({opacity: 0}, 200, '',function(){ $('#thehu_'+index).attr("src", "./images/logo_cff/0" + newdex + "_.png").animate({opacity: 1}, 200, '', function (){ var inti = newdex; document.location.href='./?setstate=' + inti; }); }); } } function preCalculateRects(count) { var rectList = new Array(); for (var i = 0; i < count; i++) { var rect = calculateRect(i, count); rectList.push(rect); } return rectList; } function createItem(index) { if(index == 0){ varcahr='./images/logo_cff/01_.png'; }else{ varcahr=_settings.items[index].image; } var img = $(""); var wrapper = $("").append(img); // Store index of item wrapper.attr("itemIndex", index); return wrapper; } function calculateRect(index, count) { var ratio = (index / count); var x = (CAROUSEL_WIDTH * 0.5) * Math.sin(ratio * 2 * Math.PI); var z = Math.sin(ratio * Math.PI); var scale = 1 / (1 + z); var rect = new Object(); rect.width = ITEM_SIZE * scale; rect.height = ITEM_SIZE * scale; rect.x = (CAROUSEL_WIDTH - rect.width) * 0.5 + (x * scale); rect.z = count - Math.floor(count * z); rect.y = scale * (rect.height/2); return rect; } function layout(selectedIndex) { var itemCount = _settings.items.length; for (var i = 0; i < itemCount; i++) { // Get the rect to be used var rectIndex = i - selectedIndex; if (rectIndex < 0) { rectIndex += _settings.items.length; } var rect = ITEM_RECTS[rectIndex]; var wrapper = $("#item_" + i); wrapper.css("zIndex", rect.z); var img = wrapper.find("img:first"); // STELZE! if(selectedIndex == 0){ if(i == 0){ rect.y = rect.y - 105; } }else{ } // Animate wrapper.animate({ left: rect.x, top: rect.y + 40 , width: rect.width, height: rect.height }, {complete: function() { var index = $(this).attr("itemIndex"); if (index == _selectedIndex) { selectionCompleted($(this), selectedIndex); } }}); img.animate({ width: rect.width, height: rect.height }); } } })(jQuery);