/*
 * The very first increment of Droppables&Draggables demo. The code is going to
 * be more concise (remove unnecessary code repetitions etc.). And imho the
 * photo management is a good candidate for demonstration of more jQuery UI
 * components (sortables, selectables...). More to come...
 *
 */

var suki='';
var kirai='';
var ranking = new Array();
var id=0;

$(window).bind('load', function() {
	// make images in the gallery draggable
	$('ul.gallery img').addClass('img_content').draggable({
		helper: 'clone'
	});

	// make the trash box droppable, accepting images from the content section only
	$('#trash1 div').droppable({
		accept: '.img_content',
		activeClass: 'active',
		drop: function(ev, ui) {
			var $that = $(this);
			ui.draggable.parent().fadeOut('slow', function() {
				ui.draggable
					.hide()
					.appendTo($that)
					.fadeIn('slow')
					.animate({
						width: '60px',
						height: '60px'
					})
					.removeClass('img_content')
					.addClass('img_trash');
			  choice(1,this.id);
				$(this).remove();
			});
		}
	});
	$('#trash2 div').droppable({
		accept: '.img_content',
		activeClass: 'active',
		drop: function(ev, ui) {
			var $that = $(this);
			ui.draggable.parent().fadeOut('slow', function() {
				ui.draggable
					.hide()
					.appendTo($that)
					.fadeIn('slow')
					.animate({
						width: '60px',
						height: '60px'
					})
					.removeClass('img_content')
					.addClass('img_trash');
			  choice(2,this.id);
				$(this).remove();
			});
		}
		
	});
/*
	// make the shredder box droppable, accepting images from both content and trash sections
	$('#shred div').droppable({
		accept: '.img_content, .img_trash',
		activeClass: 'active',
		drop: function(ev, ui) {
			var $that = $(this);
			// images from the content
			if (ui.draggable.hasClass('img_content')) {
				ui.draggable.parent().fadeOut('slow', function() {
					ui.draggable
						.appendTo($that)
						.animate({
							width: '0',
							height: '0'
						}, 'slow', function(){
							$(this).remove();
						});
					$(this).remove();
				});
			}
			// images from the trash
			else if (ui.draggable.hasClass('img_trash')) {
				ui.draggable
					.appendTo($that)
					.animate({
						width: '0',
						height: '0'
					}, 'slow', function(){
						$(this).remove();
					});
			}
		}
	});
*/
	// make the gallery droppable as well, accepting images from the trash only
	$('ul.gallery').droppable({
		accept: '.img_trash',
		activeClass: 'active',
		drop: function(ev, ui) {
			var $that = $(this);
			ui.draggable.fadeOut('slow', function() {
				var $item = createGalleryItem(this).appendTo($that);
				$(this)
					.removeClass('img_trash')
					.addClass('img_content')
					.css({ width: '91px', height: '91px' })
					.show();
				choice(0,this.getAttribute('alt'));
				$item.fadeIn('slow');
			});
		}
		
	});

	// handle the trash icon behavior
	$('a.tb_trash').livequery('click', function() {
		var $this = $(this);
		var $img = $this.parent().siblings('img');
		var $item = $this.parents('li');

		$item.fadeOut('slow', function() {
			$img
				.hide()
				.appendTo('#trash div')
				.fadeIn('slow')
				.animate({
					width: '60px',
					height: '60px'
				})
				.removeClass('img_content')
				.addClass('img_trash');
			$(this).remove();
		});

		return false;
	});

	// handle the magnify button
	$('a.tb_supersize').livequery('click', function() {
		$('<img width="56" height="73">')
			.attr('src', $(this).attr('href'))
			.appendTo('#body_wrap')
			.displayBox();
		return false;
	});
});

function createGalleryItem(img) {
	var title = img.getAttribute('alt');
	var href = img.getAttribute('src').replace(/thumbs\//, '');

//	var $item = $('<li><p>'+title+'</p></li>').hide();
	var $item = $('<li id='+title+'><p></p></li>').hide();
	$item.prepend($(img));

	return $item;
}

function choice(act,no) {
  if (act == 0) {
    set_ranking(no,0);
  } else {
    id += 1;
    ranking[id] = no;
  }
//  alert(no+' => '+ranking[no]);
  
  var obj = document.getElementById('card_choice_'+no);
  obj.value = act;
}

function set_ranking(r_no,r_rank) {
  for (i = 0; i < ranking.length; i++) {
    if (ranking[i] == r_no) {
      ranking[i] = r_rank;
    }
  }
}

function act( $url ) {
  this.document.proj.action = $url;
  this.document.proj.target = "_self";
  this.document.proj.submit();
//  disableAll();
  return true;
}

function disableAll(){
  for(i=0;i<document.proj.elements.length;i++){
    document.proj.elements[i].disabled = true;
  }
}



function act_event( $mode, $param ) {
  var txt1='';
  var txt2='';
  var rank='';
  var suki_cnt=0;
  var kirai_cnt=0;
  var no;
  for (no=1;no<=88;no++) {
    var obj = document.getElementById('card_choice_'+no);
    if (!!obj) {
      if (obj.value == 1) {
        suki_cnt += 1;
        txt1 += no+'=>'+obj.value+'|';
      } else if (obj.value == 2) {
        kirai_cnt += 1;
        txt2 += no+'=>'+obj.value+'|';
      }
    }
  }
  
  if ((suki_cnt + kirai_cnt) == 0) {
    alert( 'カードを1枚以上選択してください。' );
    return false;
  }
  
  var cnt = 1;
  for (i = 0; i < ranking.length; i++) {
    if (ranking[i] != undefined && ranking[i] != 0) {
//      alert( ranking[i] );
      if (cnt != 1) {
        rank += '||';
      }
      rank += ranking[i];
      cnt += 1;
    }
  }
  this.document.proj.RANKING.value = rank;
  
//  alert( txt1 );
//  alert( txt2 );
  
  this.document.proj.btn_event.value = $param;
  act($mode);
  
  return false;
}