$(document).ready(function(){
	var prevIndex = 1;
	var index = 1;
	var done = false;
	var t;
	$("body").data("decoratorInit",false);
	function openDecorator() {
	    if (!done) {
		prevIndex = index;
		openDecoratorView("selection" + index);
		index = (index + 1) % 4;
		if (index <= 0)
		    index++;
		t = setTimeout(openDecorator, 5000);
	    }
	}

	$("#viewer").hover(function(){
		done = true;
	    },function(){
		done = false;
		clearTimeout(t);
		t = setTimeout(openDecorator, 5000);
	    });
	
	$("#decorator #viewer .view").hide();
	$("#decorator .selection.up").mouseover(function(){
		$(this).removeClass("up");
		$(this).addClass("over");
	});
	$("#decorator .selection.up").mouseout(function(){
		$(this).removeClass("over");
		$(this).addClass("up");
	});
	$("#decorator .selection").click(function(){
		done = true;
	        var i = $(this).attr("id").charAt(9); 
	        if (i != prevIndex) {
		    openDecoratorView($(this).attr("id"));
		    prevIndex = i;
		}
	});
	$("#decorator #viewer .detail .marker").each(function(){
		var upImg = $(this).children("img.up").attr("src");
		$(this).css("background-image","url("+upImg+")");
	});
	$("#decorator #viewer .detail .marker").mouseover(function(){
		var overImg = $(this).children("img.over").attr("src");
		$(this).css("background-image","url("+overImg+")");
		var h = $(this).siblings(".content").height();
		var w = $(this).siblings(".content").outerWidth();
		var mark_w = $(this).width();
		var mark_h = $(this).height();
		var view_w = $("#decorator #viewer").width() * 1;
		var off_l = numberFromStyle($(this).parent().css("margin-left"));
		var off_t = numberFromStyle($(this).parent().css("margin-top"));
		if(off_t < h) $(this).siblings(".content").css("top",mark_h/2+15+"px");
		else $(this).siblings(".content").css("top",-h-mark_h/2-15+"px");
		if(off_l < w/2) {
			$(this).siblings(".content").css("left",mark_w/2+"px");
		}
		else if(view_w - off_l < w/2) {
			$(this).siblings(".content").css("left",-w-mark_w/2+"px");
		} else {
			$(this).siblings(".content").css("left",-w/2+"px");
		}
		$("#decorator #viewer .detail .content").hide();
		$(this).siblings(".content").fadeIn(200);
	});
	$("#decorator #viewer .detail .marker").mouseout(function(){
		var upImg = $(this).children("img.up").attr("src");
		$(this).css("background-image","url("+upImg+")");
		
		$(this).siblings(".content").fadeOut(200);
	});
	$("#decorator #pointer").onImagesLoad({
		selectorCallback: function(){
		    $(this).css("left",-$(this).width());
		}
	});
	openDecorator();
	//openDecoratorView("selection1");
});

function openDecoratorView(id) {
    var decoratorInit = $("body").data("decoratorInit");
    if(decoratorInit){
	$("#decorator #viewer .view").each(function(){
		if($(this).attr("id") != id) $(this).fadeOut();
	});
    }

    //    $("#decorator #viewer #viewer"+id).show();
    $("#decorator #viewer #viewer"+id).onImagesLoad({
	    selectorCallback: function(){
		    $("#decorator #viewer #viewer"+id+" .detail .content").hide();
		    $("#decorator #viewer #viewer"+id).fadeIn();
		}
    });
	
	var tmpdelay = decoratorInit ? 500 : 0;
	$("#decorator #selections .selection").each(function(){
		if($(this).attr("id") == id) {
			$(this).removeClass("over");
			$(this).removeClass("up");
			$(this).addClass("down");
			$(this).children("a.learn-more").delay(tmpdelay).fadeIn();
			$(this).children(".cta").delay(tmpdelay).hide();
		} else {
			$(this).removeClass("down");
			$(this).removeClass("over");
			$(this).addClass("up");
			$(this).children("a.learn-more").delay(tmpdelay).hide();
			$(this).children(".cta").delay(tmpdelay).fadeIn();
		}
	});
	$("#decorator #pointer").onImagesLoad({
		selectorCallback: function(){
			var off_t = $("#decorator #selections #"+id).offset().top - $("#decorator #selections :first").offset().top;
			var h = $(".selection").outerHeight();
			var p_h = $(this).height();
			var new_top = off_t+h/2 - p_h / 2;
			var new_left = -$(this).width();
			if(decoratorInit) $("#decorator #pointer").css("left","0px");
			else $("#decorator #pointer").css("left",new_left+"px");
			if(decoratorInit) {
				$(this).animate({
					left: new_left
				},500,function(){ 
					$(this).css("top",new_top+"px");
					$(this).animate({
						left: 0
					},500); 
				});
			} else {
				$(this).css("top",new_top+"px");
				$(this).animate({
					left: 0
				},500);
			}
			       
			$("body").data("decoratorInit",true);
		}
		});
}

function numberFromStyle(str) {
    if(str != undefined) {
        var l = str.length - 2;
        str = str.substr(0,l);
        num = str * 1;
        return num;
    }
}