var timeout = false;
var testtimeout = false;
var oldpicture = new Array();

function addElement(id, type){
	if(timeout) {
		if(!$('.collection_frame').hasClass('collection_active')) {
			/* Big Picture */
			var parent = id;
			$('#' + type +' li .product_pic').css({'display' : 'none'});
			$('#' + type +' li .new_product').css({'display' : 'none'});
			var relations = $('#' + type +' .' + id + ' a').attr('rel');
			var pictures = relations.split(';');
			setTimeout(function() {
				$('#' + type +' .cf_6 img').after('<img src="' + pictures[0] + '" alt="" class="addedpic big_pic" />');
			}, 500);
			setTimeout(function() {
				$('#' + type +' .cf_7 img').after('<img src="' + pictures[0] + '" alt="" class="addedpic big_pic" />');
			}, 300);
			setTimeout(function() {
				$('#' + type +' .cf_10 img').after('<img src="' + pictures[0] + '" alt="" class="addedpic big_pic" />');
			}, 100);
			setTimeout(function() {
				$('#' + type +' .cf_11 img').after('<img src="' + pictures[0] + '" alt="" class="addedpic big_pic" />');
			}, 250);

			/* Detail Pictures */
			setTimeout(function() {
				$('#' + type +' .cf_16 img').after('<img src="' + pictures[1] + '" alt="" class="addedpic" />');
			}, 400);
			setTimeout(function() {
				$('#' + type +' .cf_13 img').after('<img src="' + pictures[2] + '" alt="" class="addedpic" />');
			}, 450);
			setTimeout(function() {
				$('#' + type +' .cf_14 img').after('<img src="' + pictures[3] + '" alt="" class="addedpic" />');
			}, 300);
			setTimeout(function() {
				$('#' + type +' .cf_15 img').after('<img src="' + pictures[4] + '" alt="" class="addedpic" />');
			}, 180);
			setTimeout(function() {
				$('#' + type +' .cf_2 img').after('<span class="addedpic"><em>' + $('#tt_lang_model').val() +':</em> <strong>' + pictures[5] + '</strong></span>');
			}, 350);
			setTimeout(function() {
				$('#' + type +' .cf_3 img').after('<span class="addedpic"><em>' + $('#tt_lang_color').val() +':</em> <strong>' + pictures[7] + '</strong></span>');
			}, 120);
			setTimeout(function() {
				$('#' + type +' .cf_4 img').after('<span class="addedpic"><em>' + $('#tt_lang_sizes').val() +':</em> <strong>' + pictures[6] + '</strong></span>');
			}, 280);
			/*setTimeout(function() {
				$('#' + type +' .cf_1 img').after('<img src="/fileadmin/templates/images/collection_joyssylogo.jpg" alt="" class="addedpic" />');
			}, 210);*/
			$('#' + type +' li a').attr('title', 'Klicken Sie für die Detailansicht');
			$('#' + type).addClass('collection_active');
			return false;
		}
	}
}

function removeElement() {
	$('.collection_frame li .product_pic').css({'display' : 'block'});
	$('.collection_frame li .new_product').css({'display' : 'block'});
	$('.collection_frame').removeClass('collection_active');
	$('.addedpic').remove();
}

$(document).ready( function(){
	$('.collection_frame li a').mouseover(function() {
		var id = $(this).closest('li').attr('class');
		var type = $(this).closest('div').attr('id');
		timeout = true;
		testtimeout = setTimeout('addElement("' + id + '", "' + type + '")', 600);
	});
	$('.collection_frame li a').mouseleave(function() {
		timeout = false;
		clearTimeout(testtimeout);
		removeElement();
	});
	$('#slider').after('<div id="slider_nav">').cycle({
		//fx:'scrollLeft',
    speed:'fast',
    timeout:0,
		pager:'#slider_nav',
		// callback fn that creates a thumbnail to use as pager anchor 
		pagerAnchorBuilder: function(idx, slide) { 
			return '<li><a href="#"><img src="' + slide.src + '" width="50" height="33" /></a></li>'; 
		}
	});
});