// JavaScript Document
$(document).ready(function(){
	//取得twitter訊息
	getTweets('newsbox');
	//getFlickr('imgbox');
	//網頁load完會執行一次
	//五個屬性各別是：外面div的id名稱、包在裡面的標籤類型
	//延遲毫秒數、速度、高度
	slideLine('newsbox','div',2000,10,20);
	//slideImage('imgbox','li',2000,10,210);
});

//取得Twitter訊息
function getTweets(box)
{
	var tweetbox = $('#' + box);
	$.getJSON("http://twitter.com/statuses/user_timeline/muzenart.json?callback=?",
        function(json){
          $.each(json, function(i,tweet){
		  	var index_end = tweet.text.indexOf(']');
		  	var date_text = (index_end >= 0 ) ? tweet.text.substring(1, index_end) : 'NEWS';
			var tweet_text = tweet.text.substring(index_end+1);
			
			tweetbox.append('<div class="newsLine"><table><tr><td class="newsDate">' + date_text + '</td><td class="newsDesc">' + tweet_text + '</td></tr></table></div>');
          });
        });
}

function jsonFlickrFeed(json)
{
	var flickrbox = $('#imgbox ul');
	$.each(json.items, function(i,image){
		flickrbox.append('<li><img src="'+image.media.m+'" alt="'+image.title+'"/></li>');
    });
    
    slideImage('imgbox','li',2000,10,210);
}

function slideLine(box,stf,delay,speed,h)
{
	//取得id
	var slideBox = $('#' + box);
	//預設值 delay:幾毫秒滾動一次(1000毫秒=1秒)
	//       speed:數字越小越快，h:高度
	var delay = delay||1000, speed = speed||20, h = h||20;
	var tid = null, pause = false;
	//setInterval跟setTimeout的用法可以咕狗研究一下~
	var s = function(){tid=setInterval(slide, speed);}
	//主要動作的地方
	var slide = function()
	{
		//當滑鼠移到上面的時候就會暫停
		if(pause) return;
		//滾動條往下滾動 數字越大會越快但是看起來越不連貫，所以這邊用1
		slideBox.scrollTop(slideBox.scrollTop() + 1);
		//滾動到一個高度(h)的時候就停止
		if(slideBox.scrollTop()%h == 0)
		{
			//跟setInterval搭配使用的
			clearInterval(tid);
			//將剛剛滾動上去的前一項加回到整列的最後一項
			var obj = slideBox.find(stf + ':eq(0)');
			obj.remove();
			obj.appendTo(slideBox);
			//再重設滾動條到最上面
			slideBox.scrollTop(0);
			//延遲多久再執行一次
			setTimeout(s, delay);
		}
	}
	//滑鼠移上去會暫停 移走會繼續動
	slideBox.mouseover(function(){pause=true;});
	slideBox.mouseout(function(){pause=false;});
	//起始的地方，沒有這個就不會動囉
	setTimeout(s, delay);
}

function slideImage(box,stf,delay,speed,w)
{
	//取得id
	var slideBox = $('#' + box);
	var imgBox = slideBox.find('ul');
	//預設值 delay:幾毫秒滾動一次(1000毫秒=1秒)
	//       speed:數字越小越快，h:高度
	var delay = delay||1000, speed = speed||20, h = h||20;
	var tid = null, pause = false;
	//setInterval跟setTimeout的用法可以咕狗研究一下~
	var s = function(){tid=setInterval(slide, speed);}
	//主要動作的地方
	var slide = function()
	{
		//當滑鼠移到上面的時候就會暫停
		if(pause) return;
		//滾動條往下滾動 數字越大會越快但是看起來越不連貫，所以這邊用1
		slideBox.scrollLeft(slideBox.scrollLeft() + 2);
		//滾動到一個高度(h)的時候就停止
		if(slideBox.scrollLeft()%w == 0)
		{
			//跟setInterval搭配使用的
			clearInterval(tid);
			//將剛剛滾動上去的前一項加回到整列的最後一項
			var obj = imgBox.find(stf + ':eq(0)');
			obj.remove();
			obj.appendTo(imgBox);
			//再重設滾動條到最上面
			slideBox.scrollLeft(0);
			//延遲多久再執行一次
			setTimeout(s, delay);
		}
	}
	//滑鼠移上去會暫停 移走會繼續動
	slideBox.mouseover(function(){pause=true;});
	slideBox.mouseout(function(){pause=false;});
	//起始的地方，沒有這個就不會動囉
	setTimeout(s, delay);
}

jsonFlickrFeed({"title":"Content from Muzen News","items":[{"title":"餐點DIY-我會包餛飩","media":{"m":"http://farm5.static.flickr.com/4065/4492597910_793d1a6a90_m.jpg"}},{"title":"開染布坊囉!","media":{"m":"http://farm5.static.flickr.com/4068/4492591534_023061f901_m.jpg"}},{"title":"聖誕雪花飄","media":{"m":"http://farm5.static.flickr.com/4007/4492588556_3975939071_m.jpg"}},{"title":"牆壁創意塗鴉-恐龍","media":{"m":"http://farm5.static.flickr.com/4025/4492583876_09e6479e8c_m.jpg"}},{"title":"歡樂聖誕節","media":{"m":"http://farm3.static.flickr.com/2780/4492580232_0f54932b6f_m.jpg"}},{"title":"校園昆蟲真可愛","media":{"m":"http://farm5.static.flickr.com/4045/4492571410_38c3bae3da_m.jpg"}},{"title":"恐龍大戰","media":{"m":"http://farm3.static.flickr.com/2696/4492566280_c58bbaf401_m.jpg"}},{"title":"好大的氣球傘麵包","media":{"m":"http://farm5.static.flickr.com/4070/4492563246_007a7c102e_m.jpg"}},{"title":"協力車真好玩","media":{"m":"http://farm5.static.flickr.com/4005/4492560070_df6f7ff396_m.jpg"}},{"title":"五股準園生態區-葉子收集拓印","media":{"m":"http://farm5.static.flickr.com/4061/4492552462_a0eb54db75_m.jpg"}},{"title":"大溪花海農場-彩虹花田真美麗","media":{"m":"http://farm5.static.flickr.com/4020/4492548872_68d1eb421b_m.jpg"}},{"title":"98聖誕節-可愛的貓咪秀","media":{"m":"http://farm5.static.flickr.com/4020/4492544358_55abcf17a6_m.jpg"}},{"title":"觀察日蝕景象","media":{"m":"http://farm3.static.flickr.com/2728/4491955927_e7f01680f5_m.jpg"}},{"title":"親親大樹","media":{"m":"http://farm5.static.flickr.com/4041/4491952589_7b0cd81aed_m.jpg"}},{"title":"自己動手做偶戲","media":{"m":"http://farm5.static.flickr.com/4032/4491950399_c965e568e4_m.jpg"}},{"title":"白木屋-體驗蛋糕製作的樂趣","media":{"m":"http://farm3.static.flickr.com/2734/4491945977_99a4a7908e_m.jpg"}},{"title":"歡迎來到株羅記公園","media":{"m":"http://farm5.static.flickr.com/4025/4491942531_3acdf6ffe2_m.jpg"}},{"title":"我的鱷魚創作","media":{"m":"http://farm3.static.flickr.com/2760/4491936457_3bbd89b323_m.jpg"}},{"title":"天文館-觀察星象","media":{"m":"http://farm5.static.flickr.com/4040/4491934559_c6e1589fe3_m.jpg"}},{"title":"天文館-行星奧秘","media":{"m":"http://farm5.static.flickr.com/4021/4491929991_2e648c0c09_m.jpg"}}]});