fsubal/gist:8069158

## gistfile1.php
<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <link rel="stylesheet" type="text/css" href="http://yui.yahooapis.com/3.14.1/build/cssreset/cssreset-min.css">
        <link rel="stylesheet" href="css/smoothness/jquery-ui-1.10.3.custom.css">
        <link rel="stylesheet" href="css/style.css">
        <script src="js/jquery-1.9.1.js"></script>
        <script src="js/jquery-ui-1.10.3.custom.min.js"></script>
        <title>TwitKJ - Rhizomizing your tweets!</title>
    </head>
    <body>
        <div id="container">
        <div id="timeline">

        <form id="postarea">
        <p><textarea rows="2" cols="30" onfocus="eraseTA(this)" onblur="recoverTA(this)" onkeyup="ShowLength(value)">Tweet here...</textarea></p>
        <p><button id="tweet_button">ツイート</button></p>
        <p id="counter">0</p>
        </form>
        <div class="tweet">
          <?php echo '<img src="icon.png" class="icon">';?>
        <h3>
          <span class="username">TEST</span>‏
	      <span class="userid">@twkj1</span>
	      <span class="posttime_ago">1時間</span>
	    </h3>
	    <p>
	      <span class="content">あああああああああああああああああああ <span class="url"><a href="">http://bit.ly/</a></span> <span class="hashtag"><a href="">#aaaaa</a></span></span>
	    </p>
	  </div>

    <div class="tweet">
    <?php echo '<img src="icon.png" class="icon">';?>
    <h3>
<span class="username">TEST</span>‏
    <span class="userid">@twkj1</span>
    <span class="posttime_ago">1時間</span>
    </h3>
    <p>
    <span class="content">あああああああああああああ <span class="url"><a href="phpinfo.php">http://bit.ly/</a></span> <span class="hashtag"><a href="">#aaaaa</a></span></span>
    </p>
    </div>


    <div class="tweet">
    <?php echo '<img src="icon.png" class="icon">';?>
    <h3>
    <span class="username">TEST</span>‏
    <span class="userid">@twkj1</span>
    <span class="posttime_ago">1時間</span>
    </h3>
    <p>
    <span class="content">ああああああああああああああああああああああああああああ</span>
    </p>
    </div>

        </div><!-- /timeline -->

        <div id="desk">
        <form id="operator">
        <button>group</button>
        </form>
        <div id="paper"></div>
        <div id="stock"><h2>STOCK</h2></div>
        </div><!-- /desk -->
        </div><!-- /container -->

    <script>

    function ShowLength( str ) {
        var counter = document.getElementById("counter");
        counter.innerHTML = str.length;
        if(str.length > 140){
            counter.style.color="#990000";
        }else{
            counter.style.color="#3a3a3a";
        }
    }

    function eraseTA(obj){
        if(obj.value == obj.defaultValue) obj.value = "";
    }

    function recoverTA(obj){
    if(obj.value == "") obj.value = "Tweet here...";
    document.getElementById("counter").innerHTML = "0" ;
    }

    $(function(){
      $('button').button();
      });

    $(function(){
      $('.tweet').draggable({
                            cursor: "move",
                            opacity: 0.75,
                            cancel: ".url",
                            cancel: ".hashtag",
                            helper: "clone",
                            revert: "invalid"
                            });

      $('#paper').droppable({
                            accept: ".tweet",
                            tolerance: "pointer",
                            drop: function(event, ui){
                            ui.draggable.appendTo(this);
                            contraction(ui.draggable);
                            }
                            });

      $('#timeline').droppable({
                            accept: ".tweet",
                            tolerance: "pointer",
                            drop: function(event, ui){
                            ui.draggable.appendTo(this);
                            expantion(ui.draggable);
                            }
                            });

      /*$('.tweet_on_desk').draggable({
                            cursor: "move",
                            opacity: 0.75,
                            cancel: ".url",
                            cancel: ".hashtag",
                            helper: "clone",
                            revert: "valid"
                              });*/

      $('#stock').droppable({
                            accept: ".tweet",
                            tolerance: "pointer",
                            drop: function(event, ui){
                            ui.draggable.appendTo(this);
                            contraction(ui.draggable);
                            }
                            });

      function contraction($item){
      $item.find("img.icon")
        .css("display","none")
      .end()
      $item.find(".username")
        .css("display","none")
      .end()
      $item.find(".userid")
        .css("display","none")
      .end()
      $item.find(".posttime_ago")
        .css("display","none")
      .end()
      $item
        .css("border-radius","0px")
        .css("border","1px solid #666666")
        .css("width","180px")
        .css("font-size","12px")
        .css("padding-top","0px")
        .css("padding-bottom","0px")
        .css("min-height","1px")
      .end()
      $item.find("p")
        .css("margin","3px")
      .end()
      }

      function expantion($item){
        $item.find("img.icon")
            .css("display","inline")
        .end()
        $item.find(".username")
            .css("display","inline")
        .end()
        $item.find(".userid")
            .css("display","inline")
        .end()
        $item.find(".posttime_ago")
            .css("display","inline")
        .end()
        $item
            .css("border-radius","6px")
            .css("border","")
            .css("width","300px")
            .css("font-size","14px")
            .css("padding-top","6px")
            .css("padding-bottom","6px")
            .css("min-height","60px")
        .end()
        $item.find("p")
            .css("margin","6px")
        .end()
      }
      });
    </script>
    </body>
</html>
	<!DOCTYPE html>
	<html>
	<head>
	<meta charset="UTF-8">
	<link rel="stylesheet" type="text/css" href="http://yui.yahooapis.com/3.14.1/build/cssreset/cssreset-min.css">
	<link rel="stylesheet" href="css/smoothness/jquery-ui-1.10.3.custom.css">
	<link rel="stylesheet" href="css/style.css">
	<script src="js/jquery-1.9.1.js"></script>
	<script src="js/jquery-ui-1.10.3.custom.min.js"></script>
	<title>TwitKJ - Rhizomizing your tweets!</title>
	</head>
	<body>
	<div id="container">
	<div id="timeline">

	<form id="postarea">
	<p><textarea rows="2" cols="30" onfocus="eraseTA(this)" onblur="recoverTA(this)" onkeyup="ShowLength(value)">Tweet here...</textarea></p>
	<p><button id="tweet_button">ツイート</button></p>
	<p id="counter">0</p>
	</form>
	<div class="tweet">
	<?php echo '<img src="icon.png" class="icon">';?>
	<h3>
	<span class="username">TEST</span>‏
	<span class="userid">@twkj1</span>
	<span class="posttime_ago">1時間</span>
	</h3>
	<p>
	<span class="content">あああああああああああああああああああ <span class="url"><a href="">http://bit.ly/</a></span> <span class="hashtag"><a href="">#aaaaa</a></span></span>
	</p>
	</div>

	<div class="tweet">
	<?php echo '<img src="icon.png" class="icon">';?>
	<h3>
	<span class="username">TEST</span>‏
	<span class="userid">@twkj1</span>
	<span class="posttime_ago">1時間</span>
	</h3>
	<p>
	<span class="content">あああああああああああああ <span class="url"><a href="phpinfo.php">http://bit.ly/</a></span> <span class="hashtag"><a href="">#aaaaa</a></span></span>
	</p>
	</div>


	<div class="tweet">
	<?php echo '<img src="icon.png" class="icon">';?>
	<h3>
	<span class="username">TEST</span>‏
	<span class="userid">@twkj1</span>
	<span class="posttime_ago">1時間</span>
	</h3>
	<p>
	<span class="content">ああああああああああああああああああああああああああああ</span>
	</p>
	</div>

	</div><!-- /timeline -->

	<div id="desk">
	<form id="operator">
	<button>group</button>
	</form>
	<div id="paper"></div>
	<div id="stock"><h2>STOCK</h2></div>
	</div><!-- /desk -->
	</div><!-- /container -->

	<script>

	function ShowLength( str ) {
	var counter = document.getElementById("counter");
	counter.innerHTML = str.length;
	if(str.length > 140){
	counter.style.color="#990000";
	}else{
	counter.style.color="#3a3a3a";
	}
	}

	function eraseTA(obj){
	if(obj.value == obj.defaultValue) obj.value = "";
	}

	function recoverTA(obj){
	if(obj.value == "") obj.value = "Tweet here...";
	document.getElementById("counter").innerHTML = "0" ;
	}

	$(function(){
	$('button').button();
	});

	$(function(){
	$('.tweet').draggable({
	cursor: "move",
	opacity: 0.75,
	cancel: ".url",
	cancel: ".hashtag",
	helper: "clone",
	revert: "invalid"
	});

	$('#paper').droppable({
	accept: ".tweet",
	tolerance: "pointer",
	drop: function(event, ui){
	ui.draggable.appendTo(this);
	contraction(ui.draggable);
	}
	});

	$('#timeline').droppable({
	accept: ".tweet",
	tolerance: "pointer",
	drop: function(event, ui){
	ui.draggable.appendTo(this);
	expantion(ui.draggable);
	}
	});

	/*$('.tweet_on_desk').draggable({
	cursor: "move",
	opacity: 0.75,
	cancel: ".url",
	cancel: ".hashtag",
	helper: "clone",
	revert: "valid"
	});*/

	$('#stock').droppable({
	accept: ".tweet",
	tolerance: "pointer",
	drop: function(event, ui){
	ui.draggable.appendTo(this);
	contraction(ui.draggable);
	}
	});

	function contraction($item){
	$item.find("img.icon")
	.css("display","none")
	.end()
	$item.find(".username")
	.css("display","none")
	.end()
	$item.find(".userid")
	.css("display","none")
	.end()
	$item.find(".posttime_ago")
	.css("display","none")
	.end()
	$item
	.css("border-radius","0px")
	.css("border","1px solid #666666")
	.css("width","180px")
	.css("font-size","12px")
	.css("padding-top","0px")
	.css("padding-bottom","0px")
	.css("min-height","1px")
	.end()
	$item.find("p")
	.css("margin","3px")
	.end()
	}

	function expantion($item){
	$item.find("img.icon")
	.css("display","inline")
	.end()
	$item.find(".username")
	.css("display","inline")
	.end()
	$item.find(".userid")
	.css("display","inline")
	.end()
	$item.find(".posttime_ago")
	.css("display","inline")
	.end()
	$item
	.css("border-radius","6px")
	.css("border","")
	.css("width","300px")
	.css("font-size","14px")
	.css("padding-top","6px")
	.css("padding-bottom","6px")
	.css("min-height","60px")
	.end()
	$item.find("p")
	.css("margin","6px")
	.end()
	}
	});
	</script>
	</body>
	</html>