﻿<extension>
  <title>Image Motion Gallery</title>
  <description></description>
  <namespace>gallery</namespace>
  <function>
    <param name="imgList"  type="list">img names</param>
    <name>image</name>
    <return>
      <html xmlns:eval="http://mindtouch.com/2007/dekiscript">
        <head>
          <link rel="stylesheet" type="text/css" href="http://www.topsan.org/@api/deki/files/6868/=gallerystyle.css" />

          <!-- Do not edit IE conditional style below -->
          <!--[if gte IE 5.5]>
          <style type="text/css">
          #motioncontainer {
            width:expression(Math.min(this.offsetWidth, maxwidth)+'px');
          }
          </style>
          <![endif]-->
          <!-- End Conditional Style -->
          <script type="text/javascript">
            //<![CDATA[
           //1) Set width of the "neutral" area in the center of the gallery.
          var restarea=6;
           //2) Set top scroll speed in pixels. Script auto creates a range from 0 to top speed.
          var maxspeed=7;
           //3) Set to maximum width for gallery - must be less than the actual length of the image train.
          var maxwidth=1000;
           //4) Set to 1 for left start, 0 for right, 2 for center.
          var startpos=0;
           //5) Set message to show at end of gallery. Enter "" to disable message.
          var endofgallerymsg='<span style="font-size: 11px;">End of Gallery</span>';

          function enlargeimage(path, optWidth, optHeight){ //function to enlarge image. Change as desired.
          var actualWidth=typeof optWidth!="undefined" ? optWidth : "600px" //set 600px to default width
          var actualHeight=typeof optHeight!="undefined" ? optHeight : "500px" //set 500px to  default height
          var winattributes="width="+actualWidth+",height="+actualHeight+",resizable=yes"
          window.open(path,"", winattributes)
          }

          ////NO NEED TO EDIT BELOW THIS LINE////////////

          var iedom=document.all||document.getElementById, scrollspeed=0, movestate='', actualwidth='', cross_scroll, ns_scroll, statusdiv, loadedyes=0, lefttime, righttime;

          function ietruebody(){
          return (document.compatMode && document.compatMode!="BackCompat")? document.documentElement : document.body;
          }

          function creatediv(){
          statusdiv=document.createElement("div")
          statusdiv.setAttribute("id","statusdiv")
          document.body.appendChild(statusdiv)
          statusdiv=document.getElementById("statusdiv")
          statusdiv.innerHTML=endofgallerymsg
          }

          function positiondiv(){
          var mainobjoffset=getposOffset(crossmain, "left"),
          menuheight=parseInt(crossmain.offsetHeight),
          mainobjoffsetH=getposOffset(crossmain, "top");
          statusdiv.style.left=mainobjoffset+(menuwidth/2)-(statusdiv.offsetWidth/2)+"px";
          statusdiv.style.top=menuheight+mainobjoffsetH+"px";
          }

          function showhidediv(what){
          if (endofgallerymsg!="") {
          positiondiv();
          statusdiv.style.visibility=what;
          }
          }

          function getposOffset(what, offsettype){
          var totaloffset=(offsettype=="left")? what.offsetLeft: what.offsetTop;
          var parentEl=what.offsetParent;
          while (parentEl!=null){
          totaloffset=(offsettype=="left")? totaloffset+parentEl.offsetLeft : totaloffset+parentEl.offsetTop;
          parentEl=parentEl.offsetParent;
          }
          return totaloffset;
          }


          function moveleft(){
          
          
          if (loadedyes){
          scrollleftimg=document.getElementById("scrollleft")
          scrollleftimg.style.opacity = .3;
          
          scrollrightimg=document.getElementById("scrollright")
          scrollrightimg.style.opacity = 1;
          movestate="left";
          if (iedom&&parseInt(cross_scroll.style.left)>(menuwidth-actualwidth)){
          cross_scroll.style.left=parseInt(cross_scroll.style.left)-scrollspeed+"px";
          showhidediv("hidden");
          }
          else
          showhidediv("visible");
          }
          lefttime=setTimeout("moveleft()",10);
          }

          function moveright(){
          
          if (loadedyes){
          scrollleftimg=document.getElementById("scrollleft")
          scrollleftimg.style.opacity = 1;
          scrollleftimg.style.display = "block";
          scrollrightimg=document.getElementById("scrollright")
          scrollrightimg.style.opacity = .3;
          
          movestate="right";
          if (iedom&&parseInt(cross_scroll.style.left)<0){
          cross_scroll.style.left=parseInt(cross_scroll.style.left)+scrollspeed+"px";
          showhidediv("hidden");
          }
          else
          showhidediv("visible");
          }
          righttime=setTimeout("moveright()",10);
          }

          function motionengine(e){
          var mainobjoffset=getposOffset(crossmain, "left"),
          dsocx=(window.pageXOffset)? pageXOffset: ietruebody().scrollLeft,
          dsocy=(window.pageYOffset)? pageYOffset : ietruebody().scrollTop,
          curposy=window.event? event.clientX : e.clientX? e.clientX: "";
          curposy-=mainobjoffset-dsocx;
          var leftbound=(menuwidth-restarea)/2;
          var rightbound=(menuwidth+restarea)/2;
          if (curposy>rightbound){
          scrollspeed=(curposy-rightbound)/((menuwidth-restarea)/2) * maxspeed;
          clearTimeout(righttime);
          if (movestate!="left") moveleft();
          }
          else if (curposy<leftbound){
          scrollspeed=(leftbound-curposy)/((menuwidth-restarea)/2) * maxspeed;
          clearTimeout(lefttime);
          if (movestate!="right") moveright();
          }
          else {
          scrollspeed=0;
          
          }
          }

          function contains_ns6(a, b) {
          if (b!==null)
          while (b.parentNode)
          if ((b = b.parentNode) == a)
          return true;
          return false;
          }

          function stopmotion(e){
          if (!window.opera||(window.opera&&e.relatedTarget!==null))
          if ((window.event&&!crossmain.contains(event.toElement)) || (e && e.currentTarget && e.currentTarget!= e.relatedTarget && !contains_ns6(e.currentTarget, e.relatedTarget))){
          clearTimeout(lefttime);
          clearTimeout(righttime);
          movestate="";
          
          }
          }

          function fillup(){
          if (iedom){
          crossmain=document.getElementById? document.getElementById("motioncontainer") : document.all.motioncontainer;
          if(typeof crossmain.style.maxWidth!=='undefined')
          crossmain.style.maxWidth=maxwidth+'px';
          menuwidth=crossmain.offsetWidth;
          cross_scroll=document.getElementById? document.getElementById("motiongallery") : document.all.motiongallery;
          actualwidth=document.getElementById? document.getElementById("trueContainer").offsetWidth : document.all['trueContainer'].offsetWidth;
          if (startpos)
          cross_scroll.style.left=(menuwidth-actualwidth)/startpos+'px';
          crossmain.onmousemove=function(e){
          motionengine(e);
          }

          crossmain.onmouseout=function(e){
          stopmotion(e);
          showhidediv("hidden");
          scrollleftimg=document.getElementById("scrollleft")
          scrollleftimg.style.opacity = .3;
          scrollrightimg=document.getElementById("scrollright")
          scrollrightimg.style.opacity = .3;
          }
          }
          loadedyes=1
          if (endofgallerymsg!=""){
          
          creatediv();
          positiondiv();
          }
          if (document.body.filters)
          onresize()
          }
          window.onload=fillup;

          onresize=function(){
          scrollleftimg=document.getElementById("scrollleft")
          scrollleftimg.style.opacity = .3;
          scrollrightimg=document.getElementById("scrollright")
          scrollrightimg.style.opacity = .3;
          
          if (typeof motioncontainer!=='undefined'&&motioncontainer.filters){
          motioncontainer.style.width="0";
          motioncontainer.style.width="";
          motioncontainer.style.width=Math.min(motioncontainer.offsetWidth, maxwidth)+'px';
          }
          menuwidth=crossmain.offsetWidth;
          cross_scroll.style.left=startpos? (menuwidth-actualwidth)/startpos+'px' : 0;
          }
           // ]]>
          </script>
          
          </head>
        <body>
        <div id="motioncontainer" style="position:relative;overflow:hidden;">

            <img id="scrollleft" alt="left" title="Scroll Left" src="http://www.topsan.org/@api/deki/files/6979/=playleft.JPG?size=thumb" style="display:none;opacity:0.3;filter:alpha(opacity=40)" border="0" />
          
          <div id="motiongallery" style="position:absolute;left:0;top:0;white-space: nowrap;">
            <nobr id="trueContainer">
              <eval:foreach var="imgname" in="args.imgList">
                <a href="#">
                  <eval:expr>imgname</eval:expr>
                  <img eval:src="'http://files.topsan.org/images/'..imgname..'.png'" height="120" width="100" border="1" />
                </a>
              </eval:foreach>
            </nobr>
          </div>
          <img id="scrollright" alt="right" title="Scroll Right" src="http://www.topsan.org/@api/deki/files/7011/=play.jpg?size=thumb" style="opacity:0.3;filter:alpha(opacity=40)" border="0" />

        </div>

      </body>
    </html>
  </return>
</function>
</extension>

