/*-----------------------------------------   

copyright 2010 by opendo

Version: 1.0

Author: Georg Paul

Author URI: http://www.opendo.at  	

-------------------------------------------*/

$(document).ready(function(){
	
	//var JSON_URL = ( getURLParam('preview') != '1' ) ? '/fileadmin/system/assets/js/cars.json' : '/?eID=cars_showonhome';
	var JSON_URL = '/?eID=cars_showonhome';
	
	$.getJSON(JSON_URL, function(data){
		
		// append container markup
		$('#showcase').append('<ul class="thumbs"></ul><div id="highlight"></div>');
		
		
		// append next and prev button
		$('#showcase #highlight').append('<div class="prev-btn"></div><div class="next-btn"></div>');
		
		images = new Array();
		imageObj = new Image();
		
		// append thumbs
		$.each(data.cars, function(i, car){
			var activeClass = (i == 0) ? ' class="active"' : '';
			
			// preload images
			images[i] = car.img_big;
			imageObj.src = images[i]
			
			var thumbMarkup = '<li' + activeClass + '><a href="' + car.link + '"><img src="' + car.img_thumb + '" width="110" height="74" alt="' + car.name + '" /></a><span class="car-name">' + car.name + '</span></li>';
			$('#showcase .thumbs').append(thumbMarkup);
		})
		
		
		// append highlight car
		var highlightMarkup = '<img id="highlight-car" src="' + data.cars[0].img_big + '" alt="" /><div id="infos"><h2>' + data.cars[0].name + '</h2><dl><dt>Kraftstoff</dt><dd>' + data.cars[0].facts.fuel + '</dd><dt>Karosserie</dt><dd>' + data.cars[0].facts.body + '</dd><dt>Leistung</dt><dd>' + data.cars[0].facts.engine + '</dd><dt>Höchstgeschw.</dt><dd>' + data.cars[0].facts.speed + '</dd></dl><a href="' + data.cars[0].link + '" class="more-link">Zur Produktseite</a></div>';
		$('#highlight').append(highlightMarkup);
		
		
		// bind click events
		$('#showcase .thumbs a').bind('click', function(event){
			event.preventDefault();
			
			var pos = $(this).parent().prevAll().length;
			
			changeCar(data, pos, '');
			
			$('#showcase li.active').removeClass('active');
			$(this).parent().addClass('active');
		})
		
		$('#showcase .next-btn').bind('click', function(){
		
			var pos = $('#showcase li.active').prevAll().length;
			var $next = $('#showcase li.active').next();
			if (!$next.length > 0) {
				$next = $('#showcase li:first');
				pos = -1;
			}
			
			changeCar(data, pos + 1, 'next');
			
			$('#showcase li.active').removeClass('active');
			$next.addClass('active');
		})
		
		$('#showcase .prev-btn').bind('click', function(){
		
			var pos = $('#showcase li.active').prevAll().length;
			var $next = $('#showcase li.active').prev();
			if (!$next.length > 0) {
				$next = $('#showcase li:last');
				pos = 4;
			}
			
			changeCar(data, pos - 1, 'prev');
			
			$('#showcase li.active').removeClass('active');
			$next.addClass('active');
		})
		
		// scale thumbnails on hover
		$('#showcase .thumbs li a').hover(function(){
			$(this).animate({
				width: '110px',
				marginTop: '-7px'
			}, 100)
		}, function(){
			$(this).animate({
				width: '92px',
				marginTop: '0'
			}, 100)
			
		})
	})
	
})

function getURLParam(name) {
	
	name = name.replace(/[\[]/,"\\\[").replace(/[\]]/,"\\\]");
	var regexS = "[\\?&]"+name+"=([^&#]*)";
	var regex = new RegExp( regexS );
	var results = regex.exec( window.location.href );
	
	if( results == null )
		return "";
	else
		return results[1];
		
}

function changeCar(data, pos, btn) {
	
	if (!$.browser.msie) {
		$('#highlight-car').animate({
			opacity: '0',
			bottom: '-272px'
		}, function(){
			$(this).attr('src', data.cars[pos].img_big);
			$(this).animate({
				opacity: '1',
				bottom: '5px'
			})
		})
	}
	else {
		// no opactiy animation with png's in IE
		$('#highlight-car').animate({ bottom: '-272px' }, function(){
			$(this).attr('src', data.cars[pos].img_big);
			$(this).animate({
				bottom: '5px'
			})
		})
	}
				
	$('#highlight #infos h2').text(data.cars[pos].title);
	$('#highlight #infos dl dd:eq(0)').text(data.cars[pos].facts.fuel);
	$('#highlight #infos dl dd:eq(1)').text(data.cars[pos].facts.body);
	$('#highlight #infos dl dd:eq(2)').text(data.cars[pos].facts.engine);
	$('#highlight #infos dl dd:eq(3)').text(data.cars[pos].facts.speed);		
	$('#highlight #infos .more-link').attr('href', data.cars[pos].link);
}