/** * THE CREW Cars */ SC.loadFancybox(); /*/ $(window).bind('popstate', function(e) { if (isIElte(9)) { var newLoc = {'href': SC.getBaseUrl() + document.location.hash.replace( /^#/, '' ) }; } else { var newLoc = history.location || document.location; } //if (newLoc.href.indexOf('cars/') >= 0) { showNews(newLoc, true); } }); //*/ SC.init_the_crew_cars = function() { tc_cars.init(); }; var tc_cars = (function() { var brands = { 'current':{ 'key':'' }, 'items':[], 'cars':[] }, cars = { 'current':{ 'key':'' }, 'items':[] }, load_cars = false, from_xhr = false, init_complete = false, loading = false, from_main_prev_nav = false, from_main_next_nav = false; var init = function() { cleanHtml(); addLoader(); checkUrl(); if (!from_xhr) // Not for ajax { initBrands(); initMainCarsNav(); initEvents(); //init_complete = true; } }; var addLoader = function() { $('.row_cars_container').prepend('<div id="tc_cars_loader"/>'); }; var showLoader = function() { $('#tc_cars_loader').show(); }; var hideLoader = function() { $('#tc_cars_loader').hide(); }; // Check the current url var checkUrl = function() { var b = ''; var u = parseUri(document.location); if (u.directory.indexOf('/cars/') < 0) { /* var b = $('ul.main_nav li.m-cars ul li:eq(0)').attr('class'); b = b.split(' '); $.each(b, function(k,v) { if (v.substr(0,2) == 'm-') { b = v.substr(2,v.length); log(b); return false; } }); */ } else { //var b = u.directory.split('/cars/')[1]; //b = b.split('/')[0]; var b = 'bmw'; } brands.current.key = b; //if (b == '') { load_cars = true; } else { brands.cars.push(b); cars.items.push( { 'brand':b, 'items': $('div.row_cars_container div.tabPanel').length } ); } load_cars = true; if (u.query != '') { if (u.queryKey.xhr != undefined) { if (u.queryKey.xhr == 'true') { from_xhr = true; } } } }; var cleanHtml = function() { $('div.row_main_content div:eq(0)').addClass('row_cars_container'); $('div.Brand-cars').addClass('row_cars_content').removeClass('Brand-cars'); //$('div.row_cars_container').append('<div id="tc_cars_kit_infos"></div>'); }; // Bind events var initEvents = function() { // Bind brands nav events $('#tc_brands li').off('click').on('click', 'a', function(e) { e.preventDefault(); if ($(this).parent().hasClass('current')) return false; if (loading) return false; hideCurrentCar( this, function(){ getBrandCars(e.target); } ); }); // Bind brands nav events $('div.tc_cars li').off('click').on('click', 'a', function(e) { e.preventDefault(); if ($(this).parent().hasClass('current')) return false; if (loading) return false; hideCurrentCar( this, function(){ showCar(e.target) } ); }); // Bind cars kits events $('div.tc_cars_kits').off('click').on('click touchend', 'li', function(e) { e.preventDefault(); if ($(this).hasClass('locked')) return false; showCarKit(this); }); $('div.tc_cars_kits').on('mouseover', 'li', function(e) { e.preventDefault(); if ($(this).hasClass('locked')) return false; showCarKitInfos(this); }) .on('mouseout', 'li', function(e) { e.preventDefault(); if ($(this).hasClass('locked')) return false; hideCarKitInfos(this); }); // Bind cars zoom (lightbox) events $('div.tc_cars_pictures').on('click touchend', 'div.tc_cars_pictures_zoom,div.tc_cars_pictures_zoom_small', function(){ showCarZoom(this); }) // Main cars navigation /*/ $('#tc_cars_main_nav').on('mouseover', function(e){ showMainCarsNav(); }) .on('mouseout', function(e){ hideMainCarsNav(); }); //*/ $('#jc_main_nav_prev').off('click').on('click', function(e){ e.preventDefault(); showPrevCar(); }); $('#jc_main_nav_next').off('click').on('click', function(e){ e.preventDefault(); showNextCar(); }); $('#jc_main_nav_prev,#jc_main_nav_next').on('mouseover', function(e){ $(this).stop().animate({'opacity':1}, { duration:250, queue:false }); }) .on('mouseout', function(e){ $(this).stop().animate({'opacity':0.5}, { duration:250, queue:false }); }); $('div.row_cars_content').swipe( { swipeLeft:function(event, direction, distance, duration, fingerCount) { $('#jc_main_nav_next').click(); }, swipeRight:function(event, direction, distance, duration, fingerCount) { $('#jc_main_nav_prev').click(); } }); }; // Init brands menu var initBrands = function() { // Parse brands (on sub nav) var _brands_name = [ 'Shelby', 'Mini', 'BMW', 'Bentley', 'Lamborghini', 'Dodge', 'Ruf', 'Chevrolet', 'Ford', 'Nissan' ]; var nav_b = [], nav_c = [], key, name, logo, link; $.each(_brands_name, function(i,v){ key = v.toLowerCase(); name = v; logo = 'tc_cars_' + key + '.png'; link = key + '/index.html'; brands.items.push( { 'key':key, 'name':name, 'logo':logo, 'link':link, 'loaded':false } ); }); // Make brands/cars jc nav_b.push( '<div id="tc_brands"><a href="#" class="jc_brands_prev jc_prev"/><a href="#" class="jc_brands_next jc_next"/><div id="tc_brands_jc"><ul class="jc_ul">' ); nav_c.push( '<div id="tc_cars">' ); $.each(brands.items, function(k,b) { nav_b.push( '<li class="jc_li" data-key="'+b.key+'"><a href="'+ b.link +'" title="'+ b.name +'" style="background:url(\''+ /*SC.getAssetsUrl()*/ '../common/img/' + b.logo +'\');"></a></li>' ); nav_c.push( '<div class="tc_cars"><a href="#" id="jc_cars_'+b.key+'_prev" class="jc_cars_prev jc_prev"/><a href="#" id="jc_cars_'+b.key+'_next" class="jc_cars_next jc_next"/><div id="tc_cars_'+b.key+'_jc" class="tc_cars_jc"><ul class="jc_ul"/></div></div>' ); }); // Complete jc with locked items var n = brands.items.length; if (n < 8) { for(i=8; i>n; i--) { nav_b.push( '<li class="jc_li locked"/>'); } } // Close html nav_b.push( '</ul></div></div>' ); nav_c.push( '</div>' ); // Insert brands/cars nav $('div.cars_nav').html( nav_b.join('') + nav_c.join('') ); // Highlight current brand (first init) if (brands.current.key !='') { $('#tc_brands li[data-key="'+brands.current.key+'"]').addClass('current'); } else $('#tc_brands li:eq(0)').addClass('current'); // Instanciate brands jc $('#tc_brands_jc').jCarouselLite( { btnPrev: '.jc_brands_prev', btnNext: '.jc_brands_next', visible: 8, scroll: 1, start: 0, //circular: true, circular: false, vertical: false, mouseWheel: false, //auto:5000, speed:250 }); // First load ? Get data if (load_cars) { getBrandCars( $('#tc_brands li.current a') ); } // Move cars list else { $('div.row_cars_content ul.tabHeads li').addClass('jc_li').appendTo( $('#tc_cars_'+brands.current.key+'_jc ul') ); $('div.row_cars_content ul.tabHeads').remove(); $('div.row_cars_content div.tabPanels').attr('id', 'tc_cars_'+brands.current.key+'_content'); // Init cars jc nav initCarsNav( brands.current.key ); } }; // Load a brand page content var getBrandCars = function(brand) { loading = true; var key = $(brand).parent().data('key'), link = $(brand).attr('href')+'?xhr=true'; // Set current items setCurrentNav(key); // Only one time if (jQuery.inArray(key, brands.cars) < 0) { window.setTimeout( delegate( this, loadBrandCarsData, [key,link] ), 300); } else { //setCurrentNav(key); showCurrentNav(key); } }; var loadBrandCarsData = function(key,link) { showLoader(); $.ajax({ type:"GET", timeout: 15000, cache: false, url: link, complete: function(jqXHR, textStatus) { }, success: function(data){ parseBrandCarsData(key, data); }, error: function(jqXHR, textStatus, errorThrown){ } }); }; // Parse data from xh load var parseBrandCarsData = function(key,data) { // Parse data var list = $(data).find('div.row_main_content div.tabs ul.tabHeads').html(), text = $(data).find('div.row_main_content div.tabs div.tabPanels').html(); // Add content to html $('div.row_cars_content').append( '<div id="tc_cars_'+key+'_content" class="tabPanels">'+ text +'</div>' ); var $items = $('div.cars_nav #tc_cars_'+key+'_jc ul').html( list ).find('li'); $items.addClass('jc_li'); // Store items length (prevent multiple loading) brands.cars.push( key ); cars.items.push( { 'brand':key, 'items':$items.length } ); initCarsNav( key ); }; // Parse cars data and init nav var initCarsNav = function( key ) { // Add thumbnails and preview wrapper var src; $('#tc_cars_'+key+'_jc li a').each(function(k,v) { src = $('#tc_cars_'+key+'_content div.tc_cars_pictures:eq('+k+') img:eq(0)').attr('src'); $(v).css({ 'background-image':'url('+src+')' }); $('#tc_cars_'+key+'_content div.tc_cars_pictures:eq('+k+')').html('<div class="tc_cars_pictures_jc"></div>'); }); // Complete jc with locked items var n = $('#tc_cars_'+key+'_jc li').length; var nav = []; if (n < 8) { for(i=8; i>n; i--) { nav.push( '<li class="jc_li locked"/>'); } $('#tc_cars_'+key+'_jc ul.jc_ul').append( nav.join('') ); } // Set current car $('#tc_cars_'+key+'_jc li:eq(0)').addClass('current'); // Add cars index $('#tc_cars_'+key+'_jc li').each(function(k,v) { $(v).addClass( 'tc_car_'+k).attr('data-key',k); } ); // Bind events initEvents(); // Instanciate cars nav jc $('#tc_cars_'+key+'_jc').jCarouselLite( { btnPrev: '#jc_cars_'+key+'_prev', btnNext: '#jc_cars_'+key+'_next', visible: 8, scroll: 2, start: 0, //circular: true, circular: false, vertical: false, mouseWheel: false, //mouseWheel: true, //auto:5000, speed:250 }); // Prepare cars contents initCarsContents(key); // Set current items //setCurrentNav(key); }; // Parse cars data and init contents var initCarsContents = function( key ) { // Parse kits and add previews var previews, kit, src1, src2, data1, data2, title, display; $('#tc_cars_'+key+'_content div.tc_cars_kits').each(function(kk,vv) { previews = []; display = ''; $.each( $(vv).find('li'), function(k,v) { data1 = data2 = ''; if ($(v).hasClass('locked')) { } else { kit = $(v).attr('class'); src1 = $(v).find('img:eq(0)').attr('src'); if (src1 != undefined) { src2 = $(v).find('img:eq(1)').attr('src'); title = $(vv).find('li.'+kit+' h3').text(); if (src2 != undefined) { data1 = 'data-big="true"'; data2 = '<a href="'+src2+'" rel="tc_cars_'+key+'_kit_'+kk+'" title="'+ title.toUpperCase() +'"></a>'; } previews.push( '<li class="'+kit+'" style="background-image:url('+src1+');" '+data1+'>'+data2+'</li>' ); if (display == '') display = kit; } } }); // Add content $('#tc_cars_'+key+'_content div.tc_cars_pictures:eq('+kk+') div.tc_cars_pictures_jc').html( '<div class="tc_cars_pictures_zoom'+(is_TABLET || is_MOBILE ? '_small' : '')+'"/><ul>'+ previews.join('') +'</ul>' ); // Set currents $('#tc_cars_'+key+'_content div.tc_cars_pictures:eq('+kk+') li.'+display).addClass('show'); $('#tc_cars_'+key+'_content div.tc_cars_kits:eq('+kk+') li.'+display).addClass('current'); }); // Add kits infos wrapper $('#tc_cars_'+key+'_content div.tc_cars_kits').append('<div class="tc_cars_kit_infos_current"/><div class="tc_cars_kit_infos"/>'); // Add current kit infos $('#tc_cars_'+key+'_content div.tc_cars_kit_infos_current').html( $('#tc_cars_'+key+'_content div.tc_cars_kits li.current p').html() ); //showCurrentNav(key); window.setTimeout( delegate( this, showCurrentNav, [key]), 0); }; // Hide the current brand cars nav var setCurrentNav = function( key ) { /*/ log(key); if (from_history == undefined) var from_history = true; if (!from_history) history.pushState( {'item':'cars', 'href':key}, null, key ); //*/ // Set current brand $('#tc_brands li').removeClass('current'); $('#tc_brands li[data-key="'+key+'"]').addClass('current'); brands.current.key = key; // Hide cars nav $('div.tc_cars').stop().animate({'top':'-200px'}, { duration:300, queue:false }); }; // Show the current brand cars nav var showCurrentNav = function( key, delay ) { var select_car = false; // if from main nav prev, select the last cars in nav if (from_main_prev_nav !== false) { if (from_main_prev_nav == -1) { // Get last car index var last_car = 0; $.each(cars.items, function(k,v){ if (v.brand == key) { last_car = (v.items)-1; return false; } }); select_car = last_car; } } else if (from_main_next_nav !== false) { select_car = 0; } // Highlight car if (select_car !== false) { $('#tc_cars_'+key+'_jc li').removeClass('current'); $('#tc_cars_'+key+'_jc li.tc_car_'+select_car).addClass('current'); } // Show nav $('#tc_cars_'+key+'_jc').parent().stop().animate({'top':'0px'}, 300, function() { // Show car hideLoader(); showCar(); }); }; // Show car info var showCar = function( el ) { // get info (key, index) var key = brands.current.key; if (el == undefined) var el = $('#tc_cars_'+key+'_jc li.current:eq(0) a'); var idx = $(el).parent().data('key'); // Highlight current car $('#tc_cars_'+key+'_jc li').removeClass('current'); $('#tc_cars_'+key+'_jc li.tc_car_'+idx).addClass('current'); // Show car content $('div.row_cars_content div.tabPanels div.tabPanel').hide(); $('#tc_cars_'+key+'_content div.tc_cars_specs li:odd').addClass('odd'); var $current = $('#tc_cars_'+key+'_content div.tabPanel:eq('+idx+')'); $current.show(); var $spec = $current.find('div.tc_cars_specs'); var $desc = $current.find('div.tc_cars_desc'); var $kits = $current.find('div.tc_cars_kits'); var $pict = $current.find('div.tc_cars_pictures'); $desc.stop().animate({'opacity':1, 'margin-left':'0px'}, 150, function(){ $spec.stop().animate({'opacity':1, 'margin-left':'0px'}, { duration:150, queue:false }); }); $pict.stop().animate({'opacity':1, 'right':'0px'}, 250, function(){ $kits.css({'opacity':0, 'top':'320px', 'right':'0px'}).stop().animate({'opacity':1, 'top':'370px'}, { duration:250, queue:false }); }); loading = from_main_prev_nav = from_main_next_nav = false; if (!init_complete) window.setTimeout( delegate(this, firstShowMainCarsNav, []), 500); init_complete = true; }; var hideCurrentCar = function( el, fn_callback ) { loading = true; hideCar(el); window.setTimeout( delegate( this, fn_callback, [] ), 450); }; var hideCar = function( el ) { loading = true; var $current = $('div.row_cars_content div.tabPanels div.tabPanel:visible'); var n = $current.length; if (n <= 0) return; var $spec = $current.find('div.tc_cars_specs'); var $desc = $current.find('div.tc_cars_desc'); var $kits = $current.find('div.tc_cars_kits'); var $pict = $current.find('div.tc_cars_pictures'); $spec.stop().animate({'opacity':0, 'margin-left':'-300px'}, 150, function(){ $desc.stop().animate({'opacity':0, 'margin-left':'-300px'}, { duration:250, queue:false }); }); $kits.stop().animate({'opacity':0, 'top':'320px'}, 150, function(){ $pict.stop().animate({'opacity':0, 'right':'-700px'}, { duration:250, queue:false }); }); }; // Show car kit var showCarKit = function( el ) { // Set current kit (nav) var kit = $(el).attr('class').replace('locked','').replace('current',''); $(el).parent().find('li').removeClass('current'); $(el).addClass('current'); // Update kit infos $(el).parents('div.tc_cars_kits').find('div.tc_cars_kit_infos_current').html( $(el).find('p').html() ); // Prepare kit picture transition var p = $(el).parents('div.tabPanel').find('div.tc_cars_pictures'); $(p).find('li:not(.show)').addClass('move').css({'top':'-350px'}); // Display kit picture $(p).find('li.'+kit).stop().animate({'top':'0px'}, 300, function() { // Set others lits pictures to be moved $(p).find('li:not(.'+kit+')').removeClass('show').css({'top':'-350px'}); $(this).addClass('show').removeClass('move'); // Show/hide zoom if ($(this).data('big') != '') { $(p).find('div.tc_cars_pictures_zoom').show(); } else { $(p).find('div.tc_cars_pictures_zoom').hide(); } }); }; // Display/hide bubble kit infos var showCarKitInfos = function( el ) { var infos = $(el).find('p').html(), p = $(el).parents('.tc_cars_kits'); $(p).find('div.tc_cars_kit_infos_current').hide(); $(p).find('div.tc_cars_kit_infos').html( infos ).show(); //showCarKit(el); }; var hideCarKitInfos = function( el ) { var p = $(el).parents('.tc_cars_kits'); $(p).find('div.tc_cars_kit_infos').hide(); $(p).find('div.tc_cars_kit_infos_current').show(); //showCarKit(el); }; // Display kit in lightbox var showCarZoom = function( el ) { var kit = $(el).parent().find('li.show'); if ($(kit).data('big') != '') { var url = $(kit).find('a').attr('href'), grp = $(kit).find('a').attr('rel'), elem = $(el).parent().find('li a'), idx = $(el).parent().find('ul li.show').index(); try { $.fancybox( elem, { transitionIn: 'none', transitionOut: 'none', padding: [20, 20, 100, 20], scrolling:'no', index: idx, helpers : { title : { type : 'inside' } } } ); } catch(e) {} } } // Add a main nav (car by car) var initMainCarsNav = function() { $('.row_cars_container').prepend('<div id="tc_cars_main_nav"><a href="#" id="jc_main_nav_prev"><span/></a><a href="#" id="jc_main_nav_next"><span/></a></div>'); }; var firstShowMainCarsNav = function() { $('#jc_main_nav_prev').css({'left':'50px','opacity':0}); $('#jc_main_nav_next').css({'right':'50px','opacity':0}); $('#tc_cars_main_nav').show(); showMainCarsNav(true); }; var showMainCarsNav = function(force) { if (!init_complete && force==undefined) return false; $('#jc_main_nav_prev').stop().delay(1000).animate({'left':'0px','opacity':0.5}, { duration:250, queue:false }); $('#jc_main_nav_next').stop().delay(1000).animate({'right':'0px','opacity':0.5}, { duration:250, queue:false }); }; var hideMainCarsNav = function() { return; $('#jc_main_nav_prev').stop().animate({'left':'50px','opacity':0}, { duration:250, queue:false }); $('#jc_main_nav_next').stop().animate({'right':'50px','opacity':0}, { duration:250, queue:false }); }; var showPrevCar = function() { if (loading) return false; showMainNextCar('prev'); }; var showNextCar = function() { if (loading) return false; showMainNextCar('next'); }; var showMainNextCar = function(dir) { from_main_prev_nav = from_main_next_nav = false; // get brand(s) infos var brand = $('#tc_brands li.current').data('key'); var brand_idx = -1; $.each(brands.items, function(k,v){ if (v.key == brand) { brand_idx = k; return false; } }); var nb_brands = brands.items.length; // get car(s) infos var car_idx = $('#tc_cars_'+brand+'_jc li.current').data('key'); var nb_cars = 0; $.each(cars.items, function(k,v){ if (v.brand == brand) { nb_cars = v.items; return false; } }); // Set the next var next_brand = brand; var next_brand_idx = brand_idx; var next_car_idx = car_idx; // go to the next car if (dir == 'next') { next_car_idx = car_idx+1; // if next brand, then first car if (next_car_idx >= nb_cars) { next_brand_idx = brand_idx+1; if (next_brand_idx >= nb_brands) next_brand_idx = 0; next_car_idx = 0; } from_main_next_nav = next_car_idx; } // go to the previous car else if (dir == 'prev') { next_car_idx = next_car_idx-1; // if prev brand, then last car if (next_car_idx < 0) { next_brand_idx = next_brand_idx-1; if (next_brand_idx < 0) next_brand_idx = nb_brands - 1; next_car_idx = -1; } from_main_prev_nav = next_car_idx; } // Set the next car brand next_brand = brands.items[next_brand_idx].key; // Change brand ? if (next_brand != brand) { $('#tc_brands_jc li:eq('+next_brand_idx+') a').trigger('click'); } // Same brand... else { $('#tc_cars_'+brand+'_jc li:eq('+next_car_idx+') a').trigger('click'); } }; // Main init //init(); // Return (public) object return { init: init }; })();