var kbv;
var selected;
var dollPart;
var pos2;
var invisWar;
var wardCont
var shapes = [];
var body;

$(document).ready(function() {
	
	var imageURLs = [
		'location_01',
		'location_02',
		'location_03',
		'location_04',
		'location_05',
		'location_06',
		'location_07',
		'location_08',
	];
	$.preload(imageURLs, {base: 'pics/', ext: '.png'});

	paperDoll();
	
	invisWar = $('#invisibleWardrobe');
	wardCont = $('#wardrobeContents');
	body = $('body');
	
	$('.draggable').mousedown( function() {
		if ($(this).parent().hasClass('wardrobe')) {
			var pos1 = $(this).position();
			// pos2 is wardrobe position
			var posT = pos1['top'] + 64 + 30;
			var posL = pos2['left'] + pos1['left'] + 221;
			
			$(this).css({
				top: posT + 'px',
				left: posL + 'px'
			})
		}
		
		$(this).appendTo(invisWar);
	}).draggable({ 
		handle: '.canvas div div',
		zIndex: 5000,
		distance: 2,
		drag: function() {
			$(this).addClass('dragon');
		}
	}).mouseup( function() {
		var pos1 = $(this).position();
		// pos2 is wardrobe position
		if (!$(this).hasClass('dragon')) {
			$(this).appendTo(wardCont).css({
				top: '',
				left: ''
			});
		} else if (pos1['top'] >= pos2['top'] + 64 - 5 && pos1['top'] <= pos2['top'] + 64 + 551 + 5 && pos1['left'] >= pos2['left'] + 221 - 5 && pos1['left'] <= pos2['left'] + 221 + 291 + 5) {
			$(this).appendTo(wardCont).css({
				top: '',
				left: ''
			});
		}
	}).dblclick( function() {
		if ($(this).hasClass('dragon')) {
			$(this).appendTo(wardCont).css({
				top: '',
				left: ''
			}).removeClass('dragon');
			showWardrobe(selected);
		}
	});
	
	$('.canvas div div').dblclick( function() {
		var dragDiv = $(this).parent().parent().parent();
		if (dragDiv.hasClass('dragon')) {
			dragDiv.appendTo(wardCont).css({
				top: '',
				left: ''
			}).removeClass('dragon');
			showWardrobe(selected);
		}
	})
	
	$('.locations').click( function() {
		var filename = 'pics/' + $(this).attr('id') + '.png';
		$('#base').css('background-image', 'url(' + filename + ')');
	})

	if (window.console && (window.console.firebug || window.console.firebugVersion)) {
		$('#firebugwarning').show();
	}

});

function paperDoll() {
	x_sajax_get_coords(paperDoll_cb);
}

function paperDoll_cb(results) {
	var el;
	var coordsXObj;
	var coordsYObj;
	var coordsX;
	var coordsY;
	var shape;

	kbv = results['kbv'];
	var coords = results['coords'];
	
	var els = coords['els'];
	var count = coords['count'];
	
	for (var i=0; i<count; i++) {
		el = els[i];
		coordsXObj = coords[el]['x'];
		coordsYObj = coords[el]['y'];
		// those are objects, we need them to be arrays
		coordsX = [];
		for (var j=0; j<coords[el]['xNum']; j++) {
			coordsX[j] = coordsXObj[j];
		}
		
		coordsY = [];
		for (var j=0; j<coords[el]['yNum']; j++) {
			coordsY[j] = coordsYObj[j];
		}
		
		shape = new jsGraphics('canvas_' + el);
		shape.setColor('transparent');
		shape.fillPolygon(coordsX, coordsY);
 		shapes[i] = shape;
	}
	
	/*
	for (var i=0; i<count; i++) {
		shapes[i].paint();
	}
	*/
	
	$('#loading').hide();
	$('#top, #bottom').show();

	pos2 = $('#wardrobe').position();
}

function showWardrobe(wardrobe) {
	var wardrobeEls = $('div.' + wardrobe);
	
	body.css('cursor','wait');
	selected = wardrobe;
	$('div.wardrobe div.draggable, div.wardrobe div.locations').hide();
	wardrobeEls.show()
	if (wardrobe != 'locations') {
		wardrobeEls.each(function() {
			var k = $(this).attr('id');
			var v = kbv[k];
			if (v >= 0) {
				shapes[v].paint();
			}
			kbv[k] = -1;
		});
	}
	setTimeout("body.css('cursor','')",1);
}

function wardrobeToggle() {
	$('#wardrobe').toggle();
}