var ArtCollection = {};
var Top3 = [0,0,0];

var showRanking = false;
var reacties = {};
var currentReactie = 0;

$(function(){

	var initDetailID = parseInt(location.hash.substr(1));
	if (isNaN(initDetailID)) initDetailID = -1;

	var b = $('#content_samenstel');
	var currentDetailID = 0;

	$.getJSON(ArtSrc,function(data){
        $('#loader').hide();
		ArtCollection = data;
		createArt();
		populateFilters();
		applyFilters();
		initFromCookie();

		if (ArtCollection[initDetailID])
			openArtDetail(initDetailID);
	});

    // fancybox
    $('a#artwork_detail_zoom_anchor').fancybox({
        overlayOpacity: 0.5,
        overlayColor: '#000000'
    });

	function populateFilters () {
		var artiesten = [];
		for (var i in ArtCollection) {
			if ($.inArray(ArtCollection[i].artiest_az, artiesten) == -1)
				artiesten.push(ArtCollection[i].artiest_az);
		}
		artiesten.sort();

		var filters = [];
		for (var i in ArtCollection) {
			for (var j in ArtCollection[i].filters) {
				if ($.inArray(ArtCollection[i].filters[j], filters) == -1)
					filters.push(ArtCollection[i].filters[j]);
			}
		}
		filters.sort();

		var filter_artiest = $('#filter_artiest');
		for (var i in artiesten) {
			filter_artiest.append('<option value="'+artiesten[i]+'">'+artiesten[i]+'</option>');
		}

		var filter_filters = $('#filter_filters');
		for (var i in filters) {
			filter_filters.append('<option value="'+filters[i]+'">'+filters[i]+'</option>');
		}

		// fix for IE7 to repaint them
		filter_artiest.hide().show();
		filter_filters.hide().show();

		filter_artiest.change(applyFilters);
		filter_filters.change(applyFilters);
	}

	function applyFilters () {
		var filter_artiest = $('#filter_artiest').val();
		var filter_filters = $('#filter_filters').val();

		closeArtDetail();
		b.find('span.thumb').each(function(){
			var r = $(this).attr('art');
			var match_artiest = (filter_artiest != '' && filter_artiest == ArtCollection[r].artiest_az) || filter_artiest == '';
			var match_filters = (filter_filters != '' && $.inArray(filter_filters, ArtCollection[r].filters)>-1) || filter_filters == '';

			if (match_artiest && match_filters)
				$(this).show();
			else
				$(this).hide();
		});
	}

	function addToTop3 (pos, artID, skipCookieUpdate) {
		if (pos < 0 || pos > 2) return;
		var currentPos = $.inArray(artID, Top3);
		if (currentPos == pos) return;
		if (Top3[pos] == 0) {
			Top3[pos] = artID;
			if (currentPos != -1) Top3[currentPos] = 0;
		}
		else {
			if (currentPos == -1) {
				var temp = Top3[pos];
				Top3[pos] = artID;
				if (pos < 3) addToTop3(pos+1, temp);
			} else {
				if (pos == 0 && currentPos == 2) {
					Top3[2] = Top3[1];
					Top3[1] = Top3[0];
					Top3[0] = artID;
				} else if (pos == 2 && currentPos == 0) {
					Top3[0] = Top3[1];
					Top3[1] = Top3[2];
					Top3[2] = artID;
				} else {
					var temp = Top3[pos];
					Top3[pos] = artID;
					Top3[currentPos] = temp;
				}
			}
		}

		if (!skipCookieUpdate)
			updateCookie();
	}

	function paintTop3 () {
		paintTop3Item(0, Top3[0]);
		paintTop3Item(1, Top3[1]);
		paintTop3Item(2, Top3[2]);

		if (currentDetailID)
			updateDetailRanking();

		if (Top3[0]>0&&Top3[1]>0&&Top3[2]>0)
			$('#button_verzend-mijn-top3').css('display', 'block');
		else
			$('#button_verzend-mijn-top3').css('display', 'none');
	}

	function paintTop3Item (pos, artID) {
		if (artID == 0) {
			$('#dropbox'+pos).hide();
			$('#dropbox_empty'+pos).show();
		} else {
			var d = $('#dropbox'+pos);
			d.attr('art',artID);

			d.find('img.art').attr('alt',ArtCollection[artID].titel)[0].src = ArtCollection[artID].afbeelding_overview;
			d.find('div.art_title').text(ArtCollection[artID].titel);
			//d.find('div.art_title_alt').text(ArtCollection[artID].titel_alt);

            var artist = ArtCollection[artID].artiest;
            if (ArtCollection[artID].artiest_jaar) {
                artist += ' (' + ArtCollection[artID].artiest_jaar + ')';
            }
			d.find('div.artist').text(artist);
			d.click(function(){
				openArtDetail(parseInt($(this).attr('art')));
			}).show();
			$('#dropbox_empty'+pos).hide();
		}
	}

	function createArt () {
		var p = 1;
		for (var i in ArtCollection) {
			var img = $('<img src="'+ArtCollection[i].afbeelding_overview+'" art="'+i+'">');
			img.hover(function () {
                $('div.thumbhover').remove();

                var container = $('<div class="thumbhover">'),
                    art = parseInt($(this).attr('art')),
                    o = $(this).offset();

                $(this).clone(false).appendTo(container);

                container.css({
                    position: 'absolute',
                    left: (o.left-30)+'px',
                    top: (o.top-30)+'px'
                });
                container.attr('art', art);
				container.attr('title', ArtCollection[art].titel+", "+ArtCollection[art].artiest);
                container.mousedown(function () {
					$(this).stop(true,true);
				});
                container.mouseout(function () {
					if (!($.browser.msie && $.browser.version == 8)) {
						if (!$(this).hasClass('ui-draggable-dragging')) {
							$(this).remove();
                        }
					}
				});
                container.click(function () {
					$('div.thumbhover').remove();
					openArtDetail(art);
				});

                container.draggable({
					stop: function () {
                        $(this).remove();
                    },
					distance: 1
				});
                container.appendTo(b).fadeIn('fast');
			});
			var s = $('<span class="thumb" art="'+i+'"></span>');
			s.append(img);
			if (showRanking) {
				$('<span class="top50rank">'+p+'</span>').appendTo(s);
            }
			b.append(s);
			p++;

			if (showRanking && p>50) {
				return;
            }
		}
	}

	$('div.dropbox').draggable({
		helper: function(){
			return $(this).find('img.art').clone().css({zIndex:999});
		},
		distance: $.browser.safari ? 0 : 10
	}).hover(function(){
		$(this).addClass('hover');
	},function(){
		$(this).removeClass('hover');
	});

	$('div._droppable').droppable({
		drop: function (event, ui) {
			addToTop3(parseInt($(this).attr('pos')),parseInt($(ui.draggable).attr('art')));
			paintTop3();
		},
		hoverClass: 'drophover'
	});

	function openArtDetail (artID) {
		b.find('span.thumb').hide();
		currentDetailID = artID;
		$('#artwork_detail_img').attr('alt',ArtCollection[artID].titel)[0].src = ArtCollection[artID].afbeelding_detail;
        $('#artwork_detail_center').attr('title', ArtCollection[artID].titel);

        $('#lightbox-content img').attr('src', ArtCollection[artID].afbeelding_lightbox);
        $('#lightbox-content h2').text(ArtCollection[artID].titel);

        var artist = ArtCollection[artID].artiest;
        if (ArtCollection[artID].artiest_jaar) {
            artist += ' (' + ArtCollection[artID].artiest_jaar + ')';
        }
        $('#lightbox-content p.artist').text(artist);

        $('#lightbox-content p.properties').text(ArtCollection[artID].techniek + ', ' + ArtCollection[artID].datum);

		var d = $('#artwork_detail_container');
		d.find('div.art_title').text(ArtCollection[artID].titel);
		//d.find('div.art_title_alt').text(ArtCollection[artID].titel_alt);
		d.find('div.artist').text(artist);
		d.find('div.art_prop').text(ArtCollection[artID].techniek+', '+ArtCollection[artID].datum);
		var r = $('#related').html('');
		for (var i=0; i<5&&i<ArtCollection[artID].related.length; i++) {
			var related_artID = ArtCollection[artID].related[i];
			var src = ArtCollection[related_artID].afbeelding_overview;
			var ttl = ArtCollection[related_artID].titel;
			$('<img src="'+src+'" width="90" height="90" alt="'+ttl+'" title="'+ttl+'" art="'+related_artID+'">').click(function(){
				openArtDetail(parseInt($(this).attr('art')));
			}).appendTo(r);
		}
		updateDetailRanking();

		$('#detail_reactie_title strong').text('');
		$('#detail_balloon').text('');
		$.getJSON('/expose/jsonreaction',{artID:artID},function(data){
			reacties = data;
			initReacties();
		});

		$('#artwork_detail').show();
	}

	function closeArtDetail() {
		currentDetailID = 0;
		$('#artwork_detail').hide();
	}

	function initReacties() {
		if (reacties.length > 0) {
			currentReactie = 0;
			showReactie(currentReactie);
		}
	}

	function showReactie(i) {
		$('#detail_reactie_title strong').text(reacties[i].naam);
		$('#detail_balloon').text(reacties[i].reactie);
	}

	function showReactiePrev() {
		if (currentReactie == 0)
			currentReactie = reacties.length-1;
		else currentReactie--;
		showReactie(currentReactie);
	}

	function showReactieNext() {
		if (currentReactie == reacties.length-1)
			currentReactie = 0;
		else currentReactie++;
		showReactie(currentReactie);
	}

	$('#button_reactie_prev').click(showReactiePrev);
	$('#button_reactie_next').click(showReactieNext);

	function setRank() {
		var r = parseInt($(this).attr('alt'))-1;
		addToTop3(r, currentDetailID);
		paintTop3();
	}

	function updateDetailRanking() {
		$('#artwork_detail_container div.ranking img').each(function(){
			var r = parseInt($(this).attr('alt'))-1;
			if (Top3[r] == currentDetailID) {
				$(this)[0].src = 'images/rank'+(r+1)+'_active.gif';
			} else {
				$(this)[0].src = 'images/rank'+(r+1)+'.gif';
			}
		});
	}

	function updateCookie() {
		$.setCookie('KMMTOP3', Top3.join('|'));
	}

	function initFromCookie() {
		var c = $.getCookie('KMMTOP3');
		if (c) {
			var ca = c.split('|');
			for (var i=0; i<ca.length; i++)
				addToTop3(i, parseInt(ca[i]), true);
			paintTop3();
		}
	}

	$('#artwork_detail_container div.ranking img').click(setRank);

	$('#button_detail_close').click(applyFilters);

	$('div.dropbox img.remove').click(function(){
		var pos = parseInt($(this).parent().parent().attr('pos'));
		Top3[pos] = 0;
		paintTop3();
		updateCookie();
		return false;
	});

});