<!--


FFFFFFFFFFFFFFFFFFFFFF                                                                                   tttt
F::::::::::::::::::::F                                                                                ttt:::t
F::::::::::::::::::::F                                                                                t:::::t
FF::::::FFFFFFFFF::::F                                                                                t:::::t
  F:::::F       FFFFFFrrrrr   rrrrrrrrr      ooooooooooo       eeeeeeeeeeee        ssssssssss   ttttttt:::::ttttttt
  F:::::F             r::::rrr:::::::::r   oo:::::::::::oo   ee::::::::::::ee    ss::::::::::s  t:::::::::::::::::t
  F::::::FFFFFFFFFF   r:::::::::::::::::r o:::::::::::::::o e::::::eeeee:::::eess:::::::::::::s t:::::::::::::::::t
  F:::::::::::::::F   rr::::::rrrrr::::::ro:::::ooooo:::::oe::::::e     e:::::es::::::ssss:::::stttttt:::::::tttttt
  F:::::::::::::::F    r:::::r     r:::::ro::::o     o::::oe:::::::eeeee::::::e s:::::s  ssssss       t:::::t
  F::::::FFFFFFFFFF    r:::::r     rrrrrrro::::o     o::::oe:::::::::::::::::e    s::::::s            t:::::t
  F:::::F              r:::::r            o::::o     o::::oe::::::eeeeeeeeeee        s::::::s         t:::::t
  F:::::F              r:::::r            o::::o     o::::oe:::::::e           ssssss   s:::::s       t:::::t    tttttt
FF:::::::FF            r:::::r            o:::::ooooo:::::oe::::::::e          s:::::ssss::::::s      t::::::tttt:::::t
F::::::::FF            r:::::r            o:::::::::::::::o e::::::::eeeeeeee  s::::::::::::::s       tt::::::::::::::t
F::::::::FF            r:::::r             oo:::::::::::oo   ee:::::::::::::e   s:::::::::::ss          tt:::::::::::tt
FFFFFFFFFFF            rrrrrrr               ooooooooooo       eeeeeeeeeeeeee    sssssssssss              ttttttttttt

  PPPPPPPPPPPPPPPPP                                         jjjj                                                  tttt
  P::::::::::::::::P                                       j::::j                                              ttt:::t
  P::::::PPPPPP:::::P                                       jjjj                                               t:::::t
  PP:::::P     P:::::P                                                                                         t:::::t
    P::::P     P:::::Prrrrr   rrrrrrrrr      ooooooooooo  jjjjjjj    eeeeeeeeeeee        ccccccccccccccccttttttt:::::ttttttt
    P::::P     P:::::Pr::::rrr:::::::::r   oo:::::::::::ooj:::::j  ee::::::::::::ee    cc:::::::::::::::ct:::::::::::::::::t
    P::::PPPPPP:::::P r:::::::::::::::::r o:::::::::::::::oj::::j e::::::eeeee:::::ee c:::::::::::::::::ct:::::::::::::::::t
    P:::::::::::::PP  rr::::::rrrrr::::::ro:::::ooooo:::::oj::::je::::::e     e:::::ec:::::::cccccc:::::ctttttt:::::::tttttt
    P::::PPPPPPPPP     r:::::r     r:::::ro::::o     o::::oj::::je:::::::eeeee::::::ec::::::c     ccccccc      t:::::t
    P::::P             r:::::r     rrrrrrro::::o     o::::oj::::je:::::::::::::::::e c:::::c                   t:::::t
    P::::P             r:::::r            o::::o     o::::oj::::je::::::eeeeeeeeeee  c:::::c                   t:::::t
    P::::P             r:::::r            o::::o     o::::oj::::je:::::::e           c::::::c     ccccccc      t:::::t    tttttt
  PP::::::PP           r:::::r            o:::::ooooo:::::oj::::je::::::::e          c:::::::cccccc:::::c      t::::::tttt:::::t
  P::::::::P           r:::::r            o:::::::::::::::oj::::j e::::::::eeeeeeee   c:::::::::::::::::c      tt::::::::::::::t
  P::::::::P           r:::::r             oo:::::::::::oo j::::j  ee:::::::::::::e    cc:::::::::::::::c        tt:::::::::::tt
  PPPPPPPPPP           rrrrrrr               ooooooooooo   j::::j    eeeeeeeeeeeeee      cccccccccccccccc          ttttttttttt
                                                           j::::j
                                                 jjjj      j::::j
                                                j::::jj   j:::::j
                                                j::::::jjj::::::j
                                                 jj::::::::::::j
                                                   jjj::::::jjj
                                                      jjjjjj

                                                                                                          forestproject.org
    ==========================================================================================================================
                                                                                           Designed & Developed by Cizoo&Co


 -->
<!DOCTYPE html>
<!--[if lt IE 7]>      <html class="no-js lt-ie9 lt-ie8 lt-ie7"> <![endif]-->
<!--[if IE 7]>         <html class="no-js lt-ie9 lt-ie8"> <![endif]-->
<!--[if IE 8]>         <html class="no-js lt-ie9"> <![endif]-->
<!--[if gt IE 8]><!--> <html class="no-js"> <!--<![endif]-->
  <head>
    <meta charset="utf-8">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent">
<meta name="viewport" content="target-densitydpi=device-dpi, width=1280, user-scalable=yes" />
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>木林森 | ForestProject 木林森計畫</title>
<meta name="description" content="「木林森計畫」起源於2005年，由藝術家徐冰為恢復肯亞森林綠帶而設置的一套自循環系統，綜合了藝術、教育、環境護育三位一體。本展是2013年「木林森計畫」來到臺灣，在此由大眾一起參與的成果展。">
<meta content="「木林森計畫」起源於2005年，由藝術家徐冰為恢復肯亞森林綠帶而設置的一套自循環系統，綜合了藝術、教育、環境護育三位一體。本展是2013年「木林森計畫」來到臺灣，在此由大眾一起參與的成果展。" property="og:description">
<meta content="" property="og:image">
<meta content="" property="og:title">

<link rel="icon" type="image/x-icon" href="img/favicon.png" />
<!-- <meta name="viewport" content="width=device-width, initial-scale=1"> -->

<!-- Place favicon.ico and apple-touch-icon.png in the root directory -->

<link rel="stylesheet" href="css/main.css">
  </head>
  <body class="works">
    <!--[if lt IE 7]>
        <p class="browsehappy">You are using an <strong>outdated</strong> browser. Please <a href="http://browsehappy.com/">upgrade your browser</a> to improve your experience.</p>
    <![endif]-->

    <aside class="top-header">
  <div class="container">
    <ul id="user-links" class="right">
      <li><a href="login.php"><span class="user-link-span">登入 / 註冊</span></a></li>
      <li class="divider"></li>
      <li>
        <a href="favorite.php" class="my-fav">
          <span class="user-link-span">我的追蹤清單<div class="fav-status"><span>0</span></div></span>
        </a>
      </li>
    </ul>
  </div>
</aside>

    <div class="pusher-wrapper">
      <header role="banner"></header>

      <nav id="site-nav">
  <div class="container">
    <h1 class="left">
      <a href="index.php" class="nav-logo logo-02">木林森計畫 Forest Project</a>
    </h1>
    <ul class="nav right">
      <!-- NOTE: add active class in current page -->
      <li id="home_menu" class="site-nav-item">
        <a href="index.php">首頁</a>
        <span></span>
      </li>
      <li id="videos_menu" class="site-nav-item">
        <a href="video.php">影音專區</a>
        <span></span>
      </li>
      <li id="about-mlx_menu" class="site-nav-item">
        <a href="about.php">關於木林森</a>
        <span></span>
      </li>
      <li id="class_menu" class="site-nav-item">
        <a href="class.php">木林森講堂</a>
        <span></span>
      </li>
      <!-- <li id="events_menu" class="site-nav-item">
        <a href="">活動進展</a>
        <span></span>
      </li> -->
      <li id="yours_menu" class="site-nav-item">
        <a href="works.php">你的木林森</a>
        <span></span>
      </li>
      <!-- <li id="support_menu" class="site-nav-item">
        <a href="">支持我們</a>
        <span></span>
      </li> -->
      <li id="contact_menu" class="site-nav-item">
        <a href="contact.php">聯絡我們</a>
        <span></span>
      </li>
    </ul>
  </div>
</nav>

      <main class="body-content" role="main">
        <div class="container">
          <h1 class="heading-06">你的木林森</h1>

          <div class="works-info clearfix">
            <div class="works-info-title left">
              <h2 class="works-title">學生作品<span>Student's work</span></h2>
            </div>
            <div class="works-info-description right">
              <p>「木林森計畫：台灣」期待您透過認購孩童畫作，加入此國際性藝術計畫，支持藝術、教育與環境護育的行動，讓台灣綠意永存！購藏畫作您將成為2014年3~5月歷史博物館展出作品的收藏者，認購所得將挹注與珍古德協會共同設立的植樹基地「木林森-綠拇指園地」。</p>
            </div>
          </div>

          <div class="works-actions clearfix">
            <div class="works-actions-item select-country">
              <h3 class="select-country-title">請選擇學生國家<span>SELECT COUNTRY</span><div class="icon-down right"></div></h3>
              <ul class="select-country-list">
                <li class="select-country-list-item" data-country="taiwan">
                  <div>臺灣<span class="works-actions-item-close right">&#10006;</span></div>
                </li>
                <li class="select-country-list-item" data-country="china">
                  <div>中國大陸<span class="works-actions-item-close right">&#10006;</span></div>
                </li>
                <li class="select-country-list-item" data-country="kenya">
                  <div>肯亞<span class="works-actions-item-close right">&#10006;</span></div>
                </li>
              </ul>
            </div>

            <div class="works-actions-item select-range">
              <h3 class="select-range-title">請選擇瀏覽範圍<span>SELECT RANGE</span><div class="icon-down right"></div></h3>
              <ul class="select-range-list">
                <!-- <li class="select-range-list-item" data-range="all">
                  <div>全部畫作<span class="works-actions-item-close right">&#10006;</span></div>
                </li> -->
                <li class="select-range-list-item" data-range="not-sold">
                  <div>未賣出畫作<span class="works-actions-item-close right">&#10006;</span></div>
                </li>
                <li class="select-range-list-item" data-range="sold">
                  <div>已賣出畫作<span class="works-actions-item-close right">&#10006;</span></div>
                </li>
              </ul>
            </div>

            <div class="works-actions-item works-search">
              <form accept-charset="UTF-8" id="search-form" action="code/search.php" method="get">
                <div class="works-search-input-wrap">
                  <input placeholder="輸入畫作編號/學生姓名/學校" type="text" name="" class="works-search-input" x-webkit-speech="x-webkit-speech" lang="zh-tw">
                </div>
                <input class="works-search-submit" type="submit">
                <span class="works-search-icon-wrapper">
                  <span class="icon-search"></span>
                </span>
              </form>
            </div>
          </div>

          <!-- NOTE:
              data-uuid: 0d7f8ad0-75ef-0131-a474-442c0327645e
              data-sold-state: sold || not-sold
           -->
          <ul class="works-list clearfix">
          </ul>
        </div>
      </main>

      <div class="pusher"></div>
    </div>

    <footer role="contentinfo">
  <div class="container">
    &copy; 2014 <strong>Forestproject</strong> All Rights Reserved. Designed by <strong>Cizoo&amp;Co</strong>.
  </div>
</footer>

    <script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script>window.jQuery || document.write('<script src="js/vendor/jquery-1.10.2.min.js"><\/script>')</script>
<script src="js/vendor/jquery.tmpl.js"></script>
<script src="js/vendor/jquery.path.js"></script>
<script src="js/vendor/jstorage.js"></script>
<script src="js/vendor/lodash.min.js"></script>
<script src="js/vendor/xForm.js"></script>

<script src="js/bingo.js"></script>
<script src="js/masthead.js"></script>
<script src="js/squirrel.js"></script>
    <!-- Google Analytics: change UA-XXXXX-X to be your site's ID. -->
<script>
  (function(b,o,i,l,e,r){b.GoogleAnalyticsObject=l;b[l]||(b[l]=
  function(){(b[l].q=b[l].q||[]).push(arguments)});b[l].l=+new Date;
  e=o.createElement(i);r=o.getElementsByTagName(i)[0];
  e.src='//www.google-analytics.com/analytics.js';
  r.parentNode.insertBefore(e,r)}(window,document,'script','ga'));
  ga('create','UA-45122021-3');ga('send','pageview');
</script>

    <script>
	var gWorkPage=0,gName=0;
    $(function() {
      var $window   = $(window)
        , $document = $(document)
        , $body     = $('body')
        , favStatusPos;

      squirrel.init();
	  $('#site-nav #yours_menu').addClass('active');

      var filter = {
        country: [],
        range: []
      };

      var countryQuery = ''
        ,   rangeQuery = ''
        ,    nameQuery = '';

      $('.select-country-list-item').bind('click', function () {
        var $this   = $(this)
          , data    = $this.data()
          , country = data.country;
        $this.toggleClass('selected');
        if (_.contains(filter.country, country)) {
          _.pull(filter.country, country);
        } else {
          filter.country.push(country);
        }
        clearSearchInput();
        $this.trigger('filterChanged');
      });

      $('.select-range-list-item').bind('click', function () {
        var $this   = $(this)
          , data    = $this.data()
          , range = data.range;
        $this.toggleClass('selected');
        if (_.contains(filter.range, range)) {
          _.pull(filter.range, range)
        } else {
          filter.range.push(range);
        }
        clearSearchInput();
        $this.trigger('filterChanged');
      });

      $('#search-form').submit(function (event) {
        event.preventDefault();
        if ($('.works-search-input').val() === '') {
          return;
        }
		gName=1;
        nameQuery = $('.works-search-input').val();
        $(this).trigger('filterChanged');
        clearAllSelectedFilter();
      });
		
		$('.works-search-input').bind('input', function () {

        var inputVal = $(this).val();

        if (inputVal === '' && gName) {
          nameQuery = inputVal;
		  gWorkPage=0;
		  gName=0;
          getMoreWorks();
        };

      });
		
      $(document).on('filterChanged', function () {

        if (filter.country.length) {
          countryQuery = filter.country.join(',');
        } else {
          countryQuery = '';		  
        }

        if (filter.range.length) {
          rangeQuery = filter.range.join(',');
		} else {
          rangeQuery = '';
        }

        clearStream();
		gWorkPage=0;
        getMoreWorks();
      });

      $('.select-range-title').bind('click', function (event) {
        event.preventDefault();
        $('.select-range-title').toggleClass('open');
        $('.select-range-list').slideToggle();
      });

      $('.select-country-title').bind('click', function (event) {
        event.preventDefault();
        $('.select-country-title').toggleClass('open');
        $('.select-country-list').slideToggle();
      });

      getFavStatusPos();
      $window.resize(function () {
        getFavStatusPos();
      });
      bindEvents();

      var busy = false;
      $window.scroll(function() {
        if ($window.scrollTop() + $window.height() > $document.height() - 100) {
          if (busy) { return; };
          busy = true;
          getMoreWorks();
        }
      });

      function clearStream() {
        $('.works-list').children().remove();
      }

      function clearAllSelectedFilter() {
        $('.select-country-list-item, .select-range-list-item').each(function (index, elem) {
          var $elem = $(elem);
          if ($(elem).hasClass('selected')) {
            $elem.removeClass('selected');
          }
        });
      }

      function clearSearchInput() {
        nameQuery = '';
        $('.works-search-input').val('')
      }

      function getMoreWorks() {

        var baseUrl = 'jc/more-works.php'
          , url;

        url = baseUrl + '?page='+gWorkPage+'&country=' + countryQuery + '&range=' + rangeQuery;

        if (nameQuery.length !== 0) {
          url = baseUrl + '?page='+gWorkPage+'&name=' + nameQuery;
        }

        $.ajax({
          url: url
        })
        .done(function (data) {
          $('.works-list').append(data);
          bindEvents();
          squirrel.addFavedClass();
          squirrel.bindEventsOnCargoTarget();
          busy = false;
		  gWorkPage++;
        });
      }

      function getFavStatusPos() {
        favStatusPos = $('.fav-status')[0].getBoundingClientRect();
      }

      function bindEvents() {
        $('.sold').bind('click', function (event) {
          event.preventDefault();
        });

        $('.sold.not-yet > .works-item-image-block').bind('click', function (event) {
          event.preventDefault();
          var $this = $(this);
          $this.parent().toggleClass('faved');
        });

        // open works-view.php in new window.
        $('.go-to-works-view').bind('click', function (event) {
          window.open($(this).attr('href'));
        });

        // icon-eye wink effects.
        $('.icon-eye').on('mouseover', function () {
          var $this = $(this);

          // dirty!! lol
          setTimeout(function () {
            $this.toggleClass('open');
            setTimeout(function () {
              $this.toggleClass('open');
              setTimeout(function () {
                $this.toggleClass('open');
                setTimeout(function () {
                  $this.toggleClass('open');
                }, 300);
              }, 300);
            }, 300);
          }, 300);
        });

        $('.sold.not-yet > .works-item-image-block')
          .bind('click', function (event) {
            var $this = $(this)
              , addedFavorite = !$this.parent().hasClass('faved');
            if (addedFavorite) { return };

            var posX = event.clientX
              , posY = event.clientY;

            var bezierParams = {
              start: {
                x: posX,
                y: posY,
                angle: -45
              },
              end: {
                x: favStatusPos.left,
                y: favStatusPos.top,
                angle: -15,
                length: 0.15
              }
            };

            var cssParams = {
              'position': 'fixed',
              'z-index': 1001
            };

            var $obj = $('<div class="star"></div>');
            $obj
              .css(cssParams)
              .prependTo($body)
              .animate({
                path: new $.path.bezier(bezierParams)
              }, 2200);
              setTimeout(function() {
                $obj.remove();
              }, 2200);
          });
      }
	  getMoreWorks();
    });
    </script>
  </body>
</html>