DIR : /home/kozerus/public_html/jkwii/js/jsdoit/trance/index.js

/home/kozerus/public_html/jkwii/js/jsdoit/trance

/**
 *============================================================
 * Trance Metal Generator HTML5 α ver
 * （トランスメタルジェネレーター アルファ版）
 * @author itoz 
 *============================================================
 */
//_____________________________________________________________________
//再生IDたちを格納
var playObject = new Object();

//_____________________________________________________________________
//サウンドID
var soundIdNameArray = ["00","01","02","10","11","12","20","21","22"];

//_____________________________________________________________________
//サウンドネーム
var soundProp =new Object();
soundProp["00"] = {name:"drum 1"};
soundProp["01"] = {name:"drum 2"};
soundProp["02"] = {name:"drum 3"};
soundProp["10"] = {name:"synce 1"};
soundProp["11"] = {name:"synce 2"};
soundProp["12"] = {name:"synce 3"};
soundProp["20"] = {name:"guitar 1"};
soundProp["21"] = {name:"guitar 2"};
soundProp["22"] = {name:"guitar 3"};

/**====================================================================
 *  swf embed
 * ====================================================================
 */
var domainPath 		= "http://www.romatica.com/dev/jsdoit/TranceMetalGenerator/";
var preloaderSwf 	= domainPath + "commons/swf/preloader.swf";
var mainSwf 		= domainPath +"commons/swf/sound.swf";

function setSwf(){
	var flashvars={'swf':mainSwf};
	var params = {allowscriptaccess: "always"};
    var attributes = {id:"flash_area",name:"flash_area"};
	swfobject.embedSWF(preloaderSwf,
		"flash_area", "1","1","10","",
		flashvars,params,attributes);
}

/**====================================================================
 *  [FROM SWF]  swf loading event
 * ====================================================================
 */
function swfLoadStart(){
//	console.debug("[swfLoadStart] ");
	$("#loadMessage").text("swf load");
}

function swfLoadProgress(n){
	//console.debug("[progress] "+n+"%");
	$("#loadMessage").text("sound swf load "+n+"%");
}

function swfLoadComplete(){
//	console.debug("[swfLoadComplete] ");
}

/**====================================================================
 *  [FROM SWF]  wave Image
 * ====================================================================
 */

var waveCnt = 0;//生成カウント
var soundWava64s = new Object();//波形画像をbase64で保持するよう

//_____________________________________________________________________
// 波形画像生成スタート
function waveCreateStart() {
	$("#loadMessage").text("sound 波形画像を生成しています");
}

//_____________________________________________________________________
//1波形生成完了
function soundThumbCreateComplete(str, id) {
	soundWava64s[id] = str;
	waveCnt++;
	if (waveCnt >= 9) {
		waveCreateComplete()
	}
}
//_____________________________________________________________________
// 全波形生成完了
function waveCreateComplete() {
	setLayout();
}


/**====================================================================
 * sound controll
 * ====================================================================
 */
var nowPlayingThumbId  =null;//現在再生中のプレビューID

//_____________________________________________________________________
// [TO SWF] タイムライン再生
function startTimeline(){
	stopThumb();
	console.debug(playObject);
	if(playObject ==null) return;
	swfTarget("flash_area").externalStartTimeline(playObject);
	setPlayMode();
}
//_____________________________________________________________________
// [FROM SWF] タイムラインストップ
function FROM_SWF_stopTimeline(){
	stopTimeline();
}
//_____________________________________________________________________
// [TO SWF] タイムラインストップ
function stopTimeline(){
	swfTarget("flash_area").externalStopTimeline();
	stopThumb();
	setStopMode();
}

//_____________________________________________________________________
// [TO SWF] サムネイル再生
function playThumb(obj){
	
	//なにか再生されている
	if(nowPlayingThumbId != null ) {
		//再生されているのが自分自身だった
		if(nowPlayingThumbId == obj.soundId){
			//ストップしてリターン
			stopThumb() ; 
			return;
		}
		stopThumb() ; 
	}
	//再生する
	nowPlayingThumbId= obj.soundId;
	$("#" + obj.soundId).css("opacity", "0.5");
	swfTarget("flash_area").externalPlayThumb(obj);
}
//_____________________________________________________________________
// [TO SWF] 全サムネイル停止
function stopThumb(){
	for(var i =0 ; i < soundIdNameArray.length;i++){
		var id = soundIdNameArray[i];
		$("#" + id).css("opacity", "1");
	}
	swfTarget("flash_area").externalStopThumb();
	nowPlayingThumbId = null;
}
//_____________________________________________________________________
// [FROM SWF] サムネイルの再生が終わった
function FROM_SWF_stopThumb(){
	stopThumb()
}

//_____________________________________________________________________
//[FROM SWF] カレント矢印動かす
//
function FROM_SWF_currentArrowMove(xpos) 
{
//  console.debug("xpos = " + xpos);
  $("#currentBar").css("left",xpos);
}


/**====================================================================
 * レイアウト用意ができたらインターフェイス初期設定
 * ====================================================================
 */

function setInitMode(){
	setStopMode();
}

//_____________________________________________________________________
//デリートボタン押された
function deleteClick(soundId)
{
	$(event.target).css("visibility", "hidden");
	$(event.target).closest(".dropbox").css("background-color", "#222");
	$(event.target).closest(".dropbox").css("background-image", "none");
	$(event.target).closest(".dropbox").children(".soundLabel").text("");
	delete playObject[soundId];
}

//_____________________________________________________________________
//ドロップされたら
//doropID soundID
function setDropImage(targetId,soundId)
{
	var target = $("#d"+targetId);
	target.css("background-image","url('data:image/png;base64," + soundWava64s[soundId] + "')");
	target.css("background-repeat","no-repeat");
	target.children(".soundLabel").text(soundProp[soundId].name);
	target.children(".deleteButton").css("visibility","visible");
	playObject[targetId] = soundId;
}


/**====================================================================
 * 再生可能状態にする
 * ====================================================================
 */
function setStopMode(){
	
	//再生ボタン有効に
	$("#buttonPlay").unbind("click").bind("click",function(){stopThumb();startTimeline();return false;});
	$("#buttonPlay").css("cursor","pointer");
	$("#buttonPlay").css("opacity", "1");
	$("#buttonPlay").css("display","block");
	//停止ボタン無効
	$("#buttonStop").css("cursor","default");
	$("#buttonStop").css("opacity", "0.5");
	$("#buttonStop").unbind("click");
	$("#buttonStop").css("display","block");
	
	for(var i =0 ; i < soundIdNameArray.length;i++){
		
		var id = soundIdNameArray[i];

		//サムネイル再生ボタン有効
		var previewPlayArrow = $("#p"+id);
		previewPlayArrow.unbind("click").bind("click",
				function(i){
					var _i = i;
					return function(){
							playThumb({soundId:_i})
						};
				}(id));
		previewPlayArrow.css("cursor","pointer");
		previewPlayArrow.css("opacity", "1");
		
		//デリートボタン有効
		var dropThumb = $("#d"+id);
		console.debug(dropThumb.children(".deleteButton"));
		var delBtn = dropThumb.children(".deleteButton");
		delBtn.unbind("click").bind("click",
				function(i){
					var _i = i;
					return function(){
							deleteClick(_i)
						};
				}(id));
	}
	
	//ドラッグ有効化
	$(".dragged").attr("draggable",true);
	$(".dragged").css("cursor","move");
	
	//デリートボタン有効
	$(".deleteButton").css("cursor","pointer");
		
	// セットサンプル有効化
	$("#setSample").unbind("click").bind("click", function() {
		setSampleSounds();
		return false;
	});
	$("#setSample").css("cursor","pointer");
	$("#setSample").css("opacity", "1");
	$("#setSample").css("display","block");
}


/**====================================================================
 * 再生中の状態にする
 * ====================================================================
 */
function setPlayMode() {
	
	//停止ボタン有効に
	$("#buttonStop").unbind("click").bind("click",function(){stopTimeline();return false;});
	$("#buttonStop").css("cursor","pointer");
	$("#buttonStop").css("opacity", "1");
	//再生ボタン無効
	$("#buttonPlay").css("cursor", "default");
	$("#buttonPlay").css("opacity", "0.5");
	$("#buttonPlay").unbind("click");
	//サムネイル再生ボタン無効化
	for(var i =0 ; i < soundIdNameArray.length;i++){
		var id = soundIdNameArray[i];
		var previewPlayArrow = $("#p"+id);
		previewPlayArrow.css("cursor","default");
		previewPlayArrow.css("opacity", "0.5");
		previewPlayArrow.unbind("click");
	}
	$(".dragged").attr("draggable",false);
	$(".dragged").css("cursor","default");
	
	//デリートボタン無効
	$(".deleteButton").css("cursor","default");
	$(".deleteButton").unbind("click");
	
	// セットサンプル無効化
	$("#setSample").unbind("click");
	$("#setSample").css("cursor","default");
	$("#setSample").css("opacity", "0.5");
}

/**====================================================================
 * レイアウト
 * ====================================================================
 */
function setLayout() {

	$("#loadArea").css("display", "none");

	$(function() {	

		for ( var i = 0; i < 3; i++) {
			
			for ( var j = 0; j < 3; j++) {
				var id = (i + "" + j)
				var soundObj = soundProp[id];
				var dragItem = $("<div class='dragged' draggable='true'><div class='soundLabel'>" + (soundObj.name) + "</div><img src='http://www.romatica.com/dev/jsdoit/TranceMetalGenerator/commons/images/PreviewThumb_PreviewButton.png' id='p"+id+"' class='samplePlayButton' /></div>");
				dragItem.attr("id",  (i + ""+j) );
				dragItem[0].addEventListener("dragstart", f_dragstart, false);
				
				$("#soundArea" +i+ ":first").append(dragItem);
				var pos = dragItem.offset();
				dragItem.data("pos", {left: pos.left,
						      right: pos.left + dragItem.outerWidth(),
						      top: pos.top,
						      bottom: pos.top + dragItem.outerHeight()
						     });
				$("#" + id).css("background-image","url('data:image/png;base64," + soundWava64s[id] + "')");
				$("#" + id).css("width", 112);
				$("#" + id).css("height", 36);
			}
		}
	
		$(".dropbox").each(function () {
			this.addEventListener("dragover", f_dragover, false);
			this.addEventListener("drop", f_drop, false);
		});
	
		
		function f_dragstart(e) {
			//サムネ再生停止　
			stopThumb();
			var idList = "";
			$(".selected").each(function () {
				idList += this.id + " ";
			});
			e.dataTransfer.setData("text", idList);
		}
		function f_dragover(e) {
			e.preventDefault();
		}
		
		//------------------------------------------------------
		//
		//ドロップされた
		//
		function f_drop(e) {
		
			if (!$(e.target).hasClass("dropbox")) return;
			var soundId = e.dataTransfer.getData("text").split(" ")[0];
			var soundObj = soundProp[soundId];
			//ドロップIDからさうんどID に ex(d00 > 00)
			var dropId = (e.target.id).substring(1,3);
			
//			console.debug(soundObj.name);
//			console.debug(dropId)
//			console.debug(soundId)
			
			//ドロップセットされたら
			setDropImage(dropId,soundId)
			
			e.preventDefault();
		}
		
		multiSelect($(document), "dragged", "mousedown", "selected");
		
		$(".dropbox").each(function () {
			
			var drawRect = new DrawRect(this, "rect");
			//マウスダウン
			drawRect.downHandler = function (e) {
						if (e.target !== drawRect.field) return;
						var data = {rect: drawRect.getRect()};
						data.selected = $(".selected");
						$(document).mousemove(data, drawRect.moveHandler);
						$(document).mouseup(drawRect.upHandler);	
			};
			//マウスムーブ
			drawRect.moveHandler = checkOverlap;
			//マウスアップ
			drawRect.upHandler = function (){$(".rect").remove();
			  		$(document).unbind("mousemove");
					$(document).unbind("mouseup");
			}
			//アドハンドラーズ
			drawRect.addHandlers();
		});
		
		function checkOverlap(e){
			var rect = e.data.rect;
			var selected = e.data.selected
			if (!e.shiftKey) {
				$(".dragged").each(function () {
					if (rect.offset().left < $(this).data("pos").right 
					 && rect.offset().left + rect.outerWidth() > $(this).data("pos").left 
					 && rect.offset().top < $(this).data("pos").bottom
					 && rect.offset().top + rect.outerHeight() > $(this).data("pos").top
					) {
						$(this).addClass("selected");
					}
					else {
						$(this).removeClass("selected");
					}
				});
			}
			else {
				$(".dragged").each(function () {
					if (rect.offset().left < $(this).data("pos").right 
					 && rect.offset().left + rect.outerWidth() > $(this).data("pos").left 
					 && rect.offset().top < $(this).data("pos").bottom
					 && rect.offset().top + rect.outerHeight() > $(this).data("pos").top
					) {
						if (selected.is(this)) $(this).removeClass("selected");
						else $(this).addClass("selected");
					}
					else {
						if (selected.is(this)) $(this).addClass("selected");
						else $(this).removeClass("selected");
					}
				});
			}
		}
	    
	    function multiSelect(field, targetClass, eventType, addedClass){
			field.bind(eventType, function (e){
				if (!e.shiftKey && !$(e.target).hasClass(addedClass)) {
					$("." + addedClass).removeClass(addedClass);
				}
			
				if (e.shiftKey && $(e.target).hasClass(addedClass)) {
					$(e.target).removeClass(addedClass);
				} else if ($(e.target).hasClass(targetClass)) { 
					$(e.target).addClass(addedClass);
				}
			});
		}
	    	
	    function DrawRect(field, rectClassName) {
		    var rect = $("<div class='" + rectClassName + "'></ div>").css("position", "absolute");
		    var startX;
		    var startY;
		    
		    this.field = field;
		    this.downHandler = function (){};
		    this.moveHandler = function (){};
		    this.upHandler = function (){};
		    this.setHandlers = function () {
			    $(field).mousedown(basicDownHandler);
		    }
		    this.addHandlers = function () {
			    $(field).mousedown({dr: this}, this.downHandler);
		    }
		    this.getRect = function () {
			    return rect;
		    }
		    
		    //ダウンハンドラー
		    function basicDownHandler(e){
			    if (e.target !== field) return;
			    startX = e.pageX;
			    startY = e.pageY;
			    rect.css({
					     left : startX,
					     top : startY,
					     width: 1,
					     height: 1
					     });
			    $(document.body).append(rect);
			    
			    $(document).mousemove(basicMoveHandler);
			    
			    $(document).mouseup(basicUpHandler);
			    
			    e.preventDefault();
		    }
		    
		    function basicMoveHandler(e){
			    if (!$(e.target).hasClass(rectClassName) && (!$.contains(field, e.target) && e.target !== field)) return;
			    var deltaX = e.pageX - startX;
			    var deltaY = e.pageY - startY;
			    if (deltaX < 0) {
				    rect.css("left", e.pageX);
				    deltaX = -deltaX;
			    }
			    if (deltaY < 0) {
				    rect.css("top", e.pageY);
				    deltaY = -deltaY;
			    }
			    rect.css({
				     width : deltaX,
				     height : deltaY
			    	    });
			    
			    e.preventDefault();
		    }
		    
		    function basicUpHandler(e){
			    $(document).unbind("mousemove");
			    $(document).unbind("mouseup");
		    }
		    
		    this.setHandlers();
	    	}
	});
	
	//インターフェイス初期化
	setInitMode()
}



/**====================================================================
 * util
 * ====================================================================
 */

//_____________________________________________________________________
//サンプルセット
//
function setSampleSounds(){
	
	setDropImage("00","00");
	setDropImage("01","11");
	setDropImage("02","20");
	
	setDropImage("10","00");
	setDropImage("11","11");
	setDropImage("12","21");
	
	setDropImage("20","00");
	setDropImage("21","12");
	setDropImage("22","21");
	
	setDropImage("30","01");
	setDropImage("31","10");
	setDropImage("32","22");

}

//_____________________________________________________________________
//swf参照
//
function swfTarget(str) {
    if (navigator.appName.indexOf("Microsoft") != -1) {
        return window[str];
    }else{
        return document[str];
    }
}