/* package start */
////////////////////////////////////////////////////////////////////////// Property
var json;
var lists;
var tabs;
var btns;
var tweensPanel = new Array();
var tweensOpacity = new Array();
var tweensPos = new Array();
var tweensInfo;
var size;
////////////////////////////////////////////////////////////////////////// Setting
////////////////////////////////////////////////////////////////////////// Constructor
window.addEvent('domready', function() {
    initView()
    //initBehavior()
	if($('w-content')){
		initJSON()
	}
})
function initView(){
	$('aside').addClass('hide')
	$('aside').setStyle('border-bottom-style','none')
	tweensInfo = new Fx.Morph($('aside'), {duration: 600, transition: Fx.Transitions.Quart.easeOut});
}

function initJSON(){	
    var req = new Request.JSON({
      url: 'conn/data.json',
      async: false,
      encoding: 'utf-8',
	  onRequest: function(){
		  //$('w-content').empty()
		 // $('w-content').set('text','Loading...')
	  },
      onComplete: function(respJson) {
		 json = respJson
		 set_case()
      },
      onFailure: function() { 
      }
    }).post();
}

function initBehavior(){
	$('w-content').setStyle('display','block')
	lists = $('w-content').getElements('li')
	tabs = $('w-tab').getElements('li')
    btns = $('w-tab').getElements('img')
	init_case_tab()
	init_case_paenl()
}


////////////////////////////////////////////////////////////////////////// Methods
function toggleInfo(){
	if(!size){
		$('aside').setStyle('display','block')
		size = $('aside').getSize()
		$('aside').setStyle('height',0)
	}
	$('aside').setStyle('visibility','visible')
	if($('aside').hasClass('hide')){
		$('aside').removeClass('hide')
		$('aside').addClass('show')
		tweensInfo.pause()
		tweensInfo.start({
			'height':size.y
		})
		$('aside').setStyle('border-bottom-style','solid')
		$('b_info').setProperty('src','images/b_info_over.gif')
	}else{
		$('aside').removeClass('show')
		$('aside').addClass('hide')
		tweensInfo.pause()
		tweensInfo.start({
			'height':0
		})
		$('aside').setStyle('border-bottom-style','none')
		$('b_info').setProperty('src','images/b_info_out.gif')
	}
}

////////////////////////////////////////////////////////////////////////// Function
function set_case(){
	tweensLoading = new Fx.Morph($('loading'), {duration: 600, transition: Fx.Transitions.Quart.easeOut});
	tweensLoading.pause()
	tweensLoading.start({
			'height':0
	})
	  for(var i=0;i<json.projects.length;i++){
		  var clone = $('case-model').clone()
		  //Title
		   var h1 = clone.getElements('h1')
		   h1.set('text',json.projects[i].title)
		  //Field
		  var span = clone.getElements('span')
		  span.addClass(json.projects[i].field)
		  //Text-Color
		  var div = clone.getElements('div')[0]
		  if(json.projects[i].textColor=='white'){
			  div.addClass('c-white')
		  }else{
			  div.addClass('c-black')
		  }
		  //Thumb
		   var thumbb = clone.getElements('img')[1];
		   thumbb.setProperty('width',220);
		   thumbb.setProperty('height',200);
		   thumbb.setProperty('src',json.projects[i].thumb);
		   //Comment
			var comment = clone.getElements('p')[0]
			comment.set('text',json.projects[i].comment)
			//task
			var task = clone.getElements('p')[1]
			task.set('html','<span class="txt-label">Task: </span>'+json.projects[i].task)
		  //Color
		  clone.setStyle('background-color',json.projects[i].color)
		   //Url
		   var aaa = clone.getElements('a')[0];
		   if(json.projects[i].target=='_blank'){
			  aaa.setProperty('href',json.projects[i].url);
			  aaa.setProperty('target',json.projects[i].target);
		   }else{
			   aaa.setProperty('href','/detail/?id='+json.projects[i].id);
		   }
		  
		  clone.inject('case-model','before')
	  }
	  $('case-model').dispose()
	  initBehavior()
}
/////////////// tab
function init_case_tab(){
	for(var i=0;i<btns.length;i++){
      btns[i].addEvent('click', function(event){
        onTabClick(event)
      })
	}
}
function onTabClick(e){
    var n = e.target.id.slice(1)
	for(var i=0;i<tabs.length;i++){
		tabs[i].removeClass('t-over')
		tabs[i].removeClass('t-out')
    	if(i==n){
			tabs[i].addClass('t-over')
		}else{
			tabs[i].addClass('t-out')
		}
	}
	getNewArray(btns[n].title)
}

function init_case_paenl(){
	var p = Math.ceil(lists.length/4)
	if(p<1){
		p=1;
	}
	
	for(var i=0;i<lists.length;i++){
		//initView
		lists[i].setStyle('margin-left',0)
		lists[i].setStyle('margin-top',375 * p)
		lists[i].setStyle('float','none')
		lists[i].setStyle('position','absolute')
		//Objects
		var wrap = lists[i].getElements('div')[0].getElements('div')[0];
		var btn = lists[i].getElements('img')[0];
		btn.id="m"+i
		btn.setStyle('display','block')
		//Tweens
		var picTween = new Fx.Morph(wrap, {duration: 600, link: 'ignore' , transition: Fx.Transitions.Quart.easeOut});
		tweensPanel.push(picTween)
		var alphaTween = new Fx.Morph(lists[i], {duration:500, transition: Fx.Transitions.Quart.easeOut});
		tweensOpacity.push(alphaTween)
		var posTween = new Fx.Morph(lists[i], {duration: 750, transition: Fx.Transitions.Quart.easeOut});
		tweensPos.push(posTween)
		//initBehavior
		btn.addEvent('mouseover',  function(event){
			var panel = event.target.getParent().getParent().getParent()
			var title = panel.getElements('h1')
			var n = event.target.id.slice(1)
			//title.setStyle('text-decoration','underline')
			tweensPanel[n].pause()
			tweensPanel[n].start({
  				 'margin-top': -200,
				 'height': 530
			});
		});
		btn.addEvent('mouseout',  function(event){
			var panel = event.target.getParent().getParent().getParent()
			var title = panel.getElements('h1')
			//title.setStyle('text-decoration','none')
			var n = event.target.id.slice(1)
			tweensPanel[n].pause()
			tweensPanel[n].start({
  		 		 'margin-top':0,
				 'height': 330
			});
		});
	 }
	//
	for(var i=0;i<tabs.length;i++){
		tabs[i].removeClass('t-over')
		tabs[i].removeClass('t-out')
    	if(i==0){
			tabs[i].addClass('t-over')
		}else{
			tabs[i].addClass('t-out')
		}
	}
	getNewArray(btns[0].title)
	//
}
function getNewArray(catalog){
	var newArray = new Array();
	for(var i=0;i<lists.length;i++){
		tweensOpacity[i].pause();
		if(catalog!='latest'){
			var cata = lists[i].getElements('span')[0];
			if(cata.hasClass(catalog)){
				newArray.push(lists[i])
				tweensOpacity[i].start({
					 'opacity':1
				});
			}else{
				tweensOpacity[i].start({
					 'opacity':0
				});
			}
		}else{
			newArray.push(lists[i])
			tweensOpacity[i].start({
					 'opacity':1
			});
		}
	}
	paenlPosition(newArray)
}
function paenlPosition(posArray){
	var p = Math.ceil(posArray.length/4)
	if(p<1){
		p=1;
	}
	$('w-content').setStyle( 'height',375 * p)
	
	for(var i=0;i<lists.length;i++){
	tweensPos[i].start({
  		  'margin-left':0, 
  		  'margin-top': 375 * p
		});
	}
	for(var i=0;i<posArray.length;i++){
		var btn = posArray[i].getElements('img')[0];
		var n = btn.id.slice(1)
		tweensPos[n].pause();
		tweensPos[n].start({
  		  'margin-left':233 * (i%4), 
  		  'margin-top': 375 * (Math.floor(i/4))  
		});
	}
	
}
/* package end */