$(document).ready(function(){
	//con.groupCollapsed('document.ready called from todiefor.js');

	$("#select_embed").click(function() {
		con.log("apa");
		$("#embed").select();
	});

	$("#embed").click(function () {
		$(this).select();
		return false;
	});

	if($('#outfit-view #view img.outfit').size() > 0 ) {
	}
	if ($("body").attr("id")=='index')
		outfitSlideShow();
	
	// Links return false
	$("a[href^='#']").click(function(){
		return false;
	});
	
	// Product filter
	var pfHeight = $('#product-filter').height();
	$('#product-filter ul').height(pfHeight);
	
	$('a.filter-btn').click(function() {
		var target = $(this).attr('href');
		
		$(this).toggleClass('active');
		$(target).toggle();
		
		return false;
	});
	
	$('#product-filter ul li a').click(function(){
	});
	
	outfitViewer();
	con.groupEnd();
});

var view = {//{{{
	addCallbacks : function () {
		$('#outfit-view #view').hover(view.hover.on, view.hover.off);
		$('.dot').hover(view.dothover.on, view.dothover.off);
	},
	hover : {
		on : function () {//{{{
			log('hovered');
			$(this).stop();
			$(this).children("div").children('.dot').fadeIn(320);
		},//}}}
		off : function () {//{{{
			log('unhovered');
			$(this).stop();
			$(this).children("div").children('.dot').fadeOut(320);
		}//}}}
	},
	dothover : {
		on : function () {//{{{
			var rel = $(this).attr('rel');
			
			$("#outfit-view li span:contains('"+rel+"')").addClass('active');
			$(this).addClass('active');
		},//}}}
		off : function () {//{{{
			$("#outfit-view li span").removeClass('active');
			$(this).removeClass('active');
		}//}}}
	}
}//}}}

function outfitViewer() {
	view.addCallbacks();

	$('#outfit-view .info ol li span').hover(function(){
		var rel = $(this).text();
			
		$(this).addClass('active');
		$('#outfit-view #view .dot[rel='+rel+']').fadeIn(320);
	}, function(){
		$('#outfit-view #view .dot').fadeOut(320);
		$('#outfit-view .info ol li span').removeClass('active');
	});
}

function outfitSlideShow() {
	var $wrapper = $('#index #outfit-view .content');
	var $prev    = $wrapper.find('a.prev');
	var $next    = $wrapper.find('a.next');
	var $thumbs  = $wrapper.find('#thumbs ul');
	var $active  = $thumbs.find('li.active');
	
	var tWidth   = 10;
	var wOffset1 = $wrapper.offset().left;
	var wOffset2 = wOffset1 + ($wrapper.outerWidth(true)/2);
	var slide = true;

	function next_click_timer(){
		if (slide) {
			log('next.click called');
			$active.removeClass('active');
			$active = $active.next('li');
			$active.addClass('active');
			$first = $thumbs.find('li:first');
			//log($active.attr("value"));
			loadImage($('#index #outfit-view'), $active.find('img').attr('src'), $active.attr("value"));

			$thumbs.animate({left:
		'-'+$first.outerWidth(true)+'px'}, 200, function(){
				$first.remove();
				$thumbs.css('left', '0px');
				$thumbs.append($first);
			});
			setTimeout(next_click_timer, 7000);
		}
	}

	setTimeout(next_click_timer, 7000);

	$next.click(function(){
		slide = false;
		log('next.click called');
		$active.removeClass('active');
		$active = $active.next('li');
		$active.addClass('active');
		$first = $thumbs.find('li:first');
		//log($active.attr("value"));
		loadImage($('#index #outfit-view'), $active.find('img').attr('src'), $active.attr("value"));

		$thumbs.animate({left: 
'-'+$first.outerWidth(true)+'px'}, 200, function(){
			$first.remove();
			$thumbs.css('left', '0px');
			$thumbs.append($first);
		});
		return false;
	});

	$prev.click(function(){
		log('prev.click called');

		$last = $thumbs.find('li:last');
		$last.remove();
		$thumbs.css('left', '-'+($last.width()+10)+'px');
		$thumbs.prepend($last);

		$active.removeClass('active');
		$active = $active.prev('li');
		$active.addClass('active');
		
		loadImage($('#index #outfit-view'), $active.find('img').attr('src'), $active.attr("value"));
		
		$thumbs.animate({left: '0px'}, 200);	
		return false;
	});

	$thumbs.find('a').click( function(){
		$active.removeClass('active');
		$active = $(this).parent('li');
		$active.addClass('active');
		loadImage($('#index #outfit-view'), $(this).find('img').attr('src'),$(this).parent().attr("value"));
	});
	
	$thumbs.find('a').live('click', function(){
		log('strange function clicked', 2);
		$active.removeClass('active');
		$active = $(this).parent('li');
		$active.addClass('active');
		loadImage($('#index #outfit-view'), $(this).find('img').attr('src'),$(this).parent().attr("value"));
		return false;
	});

}

var g = {}

function imageLoaded (){
	log('image loaded');
	log('width of #view: ' + g.$target.find('#view img').width());
	var outfitInfoWidth = 578 - g.$target.find('#view img').width();
	g.$info.width(outfitInfoWidth);

	view.addCallbacks();

	g.$info.fadeIn(400);
	g.$image.fadeIn(400);
};

function loadImage($target, imageUrl, outfit_id) {
	log('Loading another outfit',1);
	log('loadimage called');
	var outfit = outfits[outfit_id];

	log(outfit);
	$("#outfit_username").children("a").html(outfit.username);
	$("#outfit_username").children("a").attr({href:"/user/"+outfit.user_slug});
	$("p.about-outfit").html(outfit.description);


	$(".module.c3 li.like a").attr({"value":"" + outfit.id + " outfit"})
	$(".module.c3 li.follow").attr({"value":outfit.user_id})
	$(".module.c3 li.more a").attr({"href":"/user/"+outfit.user_slug+"/outfits"})

	if (outfit.star) {
		log(outfit.star);
		$(".module.c3 li.like a").attr({"class":"love active"})
	}
	else {
		log('outfit not starred');
		log($(".module.c3 li.like a").attr("class"))
		$(".module.c3 li.like a").attr({"class":"love"})
		log($(".module.c3 li.like a").attr("class"))
	}

	if (outfit.user_star)
		$(".module.c3 li.follow a").attr({"class":"active"})
	else
		$(".module.c3 li.follow a").attr({"class":""})


	log(outfit.image_url);
	imageUrl = '/img/outfit/large_' + outfit.image_url;

	$("#boxcontainer").html("");
	$("#boxlist").html("");
	for (var i=0;i<outfit.boxes.length;i++) {
		var box = outfit.boxes[i];
		var url = "";
		var gender = (outfit.gender=="female"?"dam":"herr");

		if ( box.cat_slug ) {
			if ( box.brand_slug ) {
				url = "/" + gender + box.cat_slug + "/" + box.brand_slug;
				log (url);
			} else {
				url = "/" + gender + box.cat_slug;
				log (url);
			}
		}
		else if ( box.brand_slug ) {
			log("found brand_slug: " + box.brand_slug);
			url = "/" + box.brand_slug;
			log (url);
		}
		var boxhtml = '<a '+(url?'href="'+url+'"':'')+' class="dot" alt="'+box.name+', '+box.brand+'" style="top: '+box.coord_y+'px; left: '+box.coord_x+'px;">'+(i+1)+'</a>';
		var boxlisthtml = '<li><span><a '+(url?'href="'+url+'"':'')+'>'+box.name+', '+box.brand+'</a></span></li>'
		$("#boxcontainer").append(boxhtml);
		$("#boxlist").append(boxlisthtml);
	}

	g.imageUrl = imageUrl;
	g.$target  = $target;
	g.$image   = $target.find('#view').find('img');
	g.$info    = $target.find('.info');

	//alert(imageUrl);
	g.$info.fadeOut(400);
	g.$image.fadeOut(400, function() {

	// FIXME, frontpage ugly hack.
	var link = "";
	if (outfit.id == 169)
		link = "/dam/pumps";
	else if (outfit.id == 170)
		link = "/dam/stövlar#category:1397640:";
	else if (outfit.id == 172)
		link = "/dam/tröjor#color:1399023:";
	else if (outfit.id == 173)
		link = "/dam/klänningar#color:1399033:";
	else if (outfit.id == 174)
		link = "/full_search.php?q=leopard";
	$("#front_link").attr({"href":link});
	g.$image.attr('src', imageUrl).load(imageLoaded);
	});

	log('Done loading',1);
}