
<?php

require_once('Transformer.php');

class ImageLoop extends Transformer {
  
  private $xpath;

  public function transform() {
    $xmlDoc  = new DOMDocument();
    
    if (!$xmlDoc->loadXML($this->xmlContents)) {
      throw new Exception("Unable to DOMify XML (XML looks like: ".$this->xmlContents.')');
    }
    $this->xpath   = new DOMXPath($xmlDoc);
        
    // start HTML
    header('Content-type: text/html; charset=UTF-8');
    ?>
    <html>
    <head>
    <script type="text/javascript" src="/prototype.js"></script>
    
    <SCRIPT type="text/javascript">
    // CREDITS:
    // Image Scroller 2.03 with double-fade effect
    // By Peter Gehrig
    // Copyright (c) 2003 Peter Gehrig. All rights reserved.
    // Permission given to use the script provided that this notice remains as is.
    // Additional scripts can be found at http://www.24fun.com
    // info@24fun.com
    // 9/6/2002
    
    // IMPORTANT:
    // If you add this script to a script-library or script-archive
    // you have to add a highly visible link to
    // http://www.24fun.com on the webpage
    // where this script will be featured
    
    // URLs of slides
    
    <?php
    // extract all the things that were images with src attributes
    $images = array();
    $imageNodes = $this->xpath->query('//*[@originalElement="img"]');
    for ($i=0; $i<$imageNodes ->length; $i++) {
      $imageNode = $imageNodes->item($i);
      $images[]  = $imageNode->getAttribute('src');
    }
    if (sizeof($images))
      echo 'var slideurl=new Array("'.join('","', $images).'");';
    else
      echo 'var slideurl=new Array();';
    ?>
    
    // comments displayed below the slides
    //var slidecomment=new Array("Mary","Jane","Rita","Tina")
    
    // links for each slide
    //var slidelink=new Array("http://www.yahoo.com","http://www.google.com","http://www.altavista.com","http://www.24fun.com")
    
    // targets of the links. Allowed values: "_parent", "_top", "_blank", "_self"
    var slidetarget=new Array("_blank","_blank","_blank","_blank")
    
    // the width of the slideshow (pixels)
    <?php $scrollerWidth = (!empty($this->extraArgs['scrollerWidth'])) ? $this->extraArgs['scrollerWidth'] : '160';?>
    var scrollerwidth=<?php echo $scrollerWidth;?>;
    
    // the height of the slideshow (pixels)
    <?php $scrollerHeight = (!empty($this->extraArgs['scrollerHeight'])) ? $this->extraArgs['scrollerHeight'] : '100';?>
    var scrollerheight=<?php echo $scrollerHeight;?>;
    
    // width of the transparent zones (pixels)
    var translayerszone=40
    
    // font-attributes for the comments
    var slidefont="Arial"
    var slidefontcolor="blue"
    var slidefontsize="2"
    
    // background-color of webpage 
    var pagebgcolor="#FFFFFF"
    
    // do not edit below this line
    var translayerswidth=1
    var translayersmax=Math.floor(translayerszone/translayerswidth)
    var translayersleftpos=0
    var translayersopacity=100
    var translayersfactor=100/translayersmax
    var translayerswidthall=translayersmax*translayerswidth
    var allpicturewidth
    var distancepictopic=0
    var scrollerleft=0
    var scrollertop=0
    var pause=20
    var step=2
    var newstep=step
    var clipleft,clipright,cliptop,clipbottom
    var i_picture=0
    var timer
    var picturecontent=""
    var ns4=document.layers?1:0
    var ns6=document.getElementById&&!document.all?1:0 
    var ie=document.all?1:0
    var browserinfos=navigator.userAgent 
    var opera=browserinfos.match(/Opera/)  
    
    var preloadedimages=new Array()
    for (i=0;i<slideurl.length;i++){
        preloadedimages[i]=new Image()
        preloadedimages[i].src=slideurl[i]
    }
    
    function init() {
      if (ie) {
            allpicturewidth=document.all.picturediv.offsetWidth
            document.all.picturediv.style.posTop=scrollertop
            document.all.picturediv.style.posLeft=scrollerleft+scrollerwidth
            clipleft=0
            clipright=0
            cliptop=0
            clipbottom=scrollerheight
            document.all.picturediv.style.clip ="rect("+cliptop+" "+clipright+" "+clipbottom+" "+clipleft+")"
            document.all.picturediv.style.visibility="visible"
            scrollpicture()
            
        }
        if (ns6) {
            allpicturewidth=document.getElementById('emptypicturediv').offsetWidth
            document.getElementById('picturediv').style.top=scrollertop
            document.getElementById('picturediv').style.left=scrollerleft+scrollerwidth
            clipleft=0
            clipright=0
            cliptop=0
            clipbottom=scrollerheight
            document.getElementById('picturediv').style.clip ="rect("+cliptop+" "+clipright+" "+clipbottom+" "+clipleft+")"
            document.getElementById('picturediv').style.visibility="visible"
            scrollpicture()  
        }
        if (ns4) {
            allpicturewidth=document.roof.document.picturediv.document.width
            document.roof.document.picturediv.top=scrollertop
            document.roof.document.picturediv.left=scrollerleft+scrollerwidth
            document.roof.document.picturediv.clip.left=0
            document.roof.document.picturediv.clip.right=0
            document.roof.document.picturediv.clip.top=0
            document.roof.document.picturediv.clip.bottom=scrollerheight
            document.roof.document.picturediv.visibility="visible"
            scrollpicture()
        }
    }
    
    function scrollpicture() {
        if (ie) {
            if (document.all.picturediv.style.posLeft>=scrollerleft-allpicturewidth) {
                document.all.picturediv.style.posLeft-=step
                clipright+=step
                if (clipright>scrollerwidth) {
                    clipleft+=step
                }
                document.all.picturediv.style.clip ="rect("+cliptop+" "+clipright+" "+clipbottom+" "+clipleft+")"        
                var timer=setTimeout("scrollpicture()",pause)
            }
            else {
                resetposition()
            }
        }
        if (ns6) {
            if (parseInt(document.getElementById('picturediv').style.left)>=scrollerleft-allpicturewidth) {
        document.getElementById('picturediv').style.left=parseInt(document.getElementById('picturediv').style.left)-step
                clipright+=step
                if (clipright>scrollerwidth) {
                    clipleft+=step
                }
                document.getElementById('picturediv').style.clip ="rect("+cliptop+" "+clipright+" "+clipbottom+" "+clipleft+")"        
                var timer=setTimeout("scrollpicture()",pause)
            }
            else {
                resetposition()
            }
        }
       if (ns4) {
            if (document.roof.document.picturediv.left>=scrollerleft-allpicturewidth) {
                document.roof.document.picturediv.left-=step
                document.roof.document.picturediv.clip.right+=step
                if (document.roof.document.picturediv.clip.right>scrollerwidth) {
                    document.roof.document.picturediv.clip.left+=step
                }
                var timer=setTimeout("scrollpicture()",pause)
            }
            else {
                resetposition()
            }
        }
    }
    
    function onmsover() {
        step=0
    }
    function onmsout() {
        step=newstep
    }
    
    function resetposition() {
        if (ie) {
            document.all.picturediv.style.posLeft=scrollerleft+scrollerwidth
            clipleft=0
            clipright=0
            document.all.picturediv.style.clip ="rect("+cliptop+" "+clipright+" "+clipbottom+" "+clipleft+")"
            scrollpicture()
        }
        if (ns6) {
            allpicturewidth=document.getElementById('emptypicturediv').offsetWidth
            document.getElementById('picturediv').style.left=scrollerleft+scrollerwidth
            clipleft=0
            clipright=0
            document.getElementById('picturediv').style.clip ="rect("+cliptop+" "+clipright+" "+clipbottom+" "+clipleft+")"
            scrollpicture()
        }
        if (ns4) {
            document.roof.document.picturediv.left=scrollerleft+scrollerwidth
            document.roof.document.picturediv.clip.left=0
            document.roof.document.picturediv.clip.right=0
            scrollpicture()
        }
    }
    
    picturecontent=""
    picturecontent+="<table cellpadding=2 cellspacing=0>"
    picturecontent+="<tr>"
    for (i=0;i<=slideurl.length-1;i++) {
        picturecontent+="<td>"
        //picturecontent+="<a href=\""+slidelink[i]+"\" target=\""+slidetarget[i]+"\" onMouseOver=\"javascript:onmsover()\" onMouseOut=\"javascript:onmsout()\">"
        picturecontent+="<img src=\""+slideurl[i]+"\" border=0>";
        //picturecontent+="</a>"
        picturecontent+="</td>"
    }
    picturecontent+="</tr>"
    picturecontent+="<tr>"
    for (i=0;i<=slideurl.length-1;i++) {
        picturecontent+="<td>"
        picturecontent+="<font face=\""+slidefont+"\" color=\""+slidefontcolor+"\" size="+slidefontsize+">"
        //picturecontent+=slidecomment[i]
        picturecontent+="</font>"
        picturecontent+="</td>"
    }
    picturecontent+="</tr>"
    picturecontent+="</tr></table>"
    
    if (ie || ns6) {
        document.write('<div style="position:relative;width:'+scrollerwidth+'px;height:'+scrollerheight+'px;overflow:hidden">')
        document.write('<div id="picturediv" style="position:absolute;top:0px;left:0px;height:'+scrollerheight+'px;visibility:hidden">'+picturecontent+'</div>')
        if (ie && !opera) {
            for (i=0;i<=translayersmax;i++) {
            document.write('<span ID="trans'+i+'" style="position:absolute;top:0px;left:'+translayersleftpos+'px;width:'+translayerswidth+'px;height:'+scrollerheight+'px;background-color:'+pagebgcolor+';filter:alpha(opacity='+translayersopacity+');overflow:hidden"> </span>')
            translayersleftpos+=translayerswidth
            translayersopacity-=translayersfactor
            }
            translayersleftpos=scrollerwidth-translayersleftpos
            for (ii=0;ii<=translayersmax;ii++) {
            document.write('<span ID="trans'+ii+'" style="position:absolute;top:0px;left:'+translayersleftpos+'px;width:'+translayerswidth+'px;height:'+scrollerheight+'px;background-color:'+pagebgcolor+';filter:alpha(opacity='+translayersopacity+');overflow:hidden"> </span>')
            translayersleftpos+=translayerswidth
            translayersopacity+=translayersfactor
            }
        }
        if (ns6 && !opera) {
            for (i=0;i<=translayersmax-1;i++) {
            document.write('<span ID="transleft'+i+'" style="position:absolute;top:0px;left:'+translayersleftpos+'px;width:'+translayerswidth+'px;height:'+scrollerheight+'px;background-color:'+pagebgcolor+';-moz-opacity:'+translayersopacity/100+';overflow:hidden"> </span>')
            translayersleftpos+=translayerswidth
            translayersopacity-=translayersfactor
            if (translayersopacity<0) {translayersopacity=0.001}
            }
            translayersleftpos=scrollerwidth-translayersleftpos
            translayersopacity=0.001
            for (i=0;i<=translayersmax-1;i++) {
            document.write('<span ID="transright'+i+'" style="position:absolute;top:0px;left:'+translayersleftpos+'px;width:'+translayerswidth+'px;height:'+scrollerheight+'px;background-color:'+pagebgcolor+';-moz-opacity:'+translayersopacity/100+';"> </span>')
            translayersleftpos+=translayerswidth
            translayersopacity+=translayersfactor
            }
        }
        document.write('</div>')
        document.write('<div id="emptypicturediv" style="position:absolute;top:0px;left:0px;height:'+scrollerheight+'px;visibility:hidden">'+picturecontent+'</div>')
    
        window.onload=init
    }
    
    if (ns4) {
        document.write('<ilayer name="roof" width='+scrollerwidth+' height='+scrollerheight+'>')
        document.write('<layer name="picturediv" width='+scrollerwidth+' height='+scrollerheight+' visibility=hide>'+picturecontent+'</layer>')
        document.write('</ilayer>')
        window.onload=init
    }
    
    
    
    </script>
    </head>
    <body> 
    
    <?php
    
    // if there is no "noInfo" argument passed, then print iframe info
    if (empty($this->extraArgs['noInfo'])) {
      if (!sizeof($images))
        echo '<p>There are no images in the Dapp output :(</p>';
      ?>
      <p>
        To include this image loop on your own website, paste the following HTML code into your page or blog:
      </p>
      <code>
        &lt;iframe src="http://<?php echo $_SERVER['SERVER_NAME'].$_SERVER['REQUEST_URI'];?>&extraArg_noInfo=true" 
        width="<?php echo $scrollerWidth+20;?>" height="<?php echo $scrollerHeight+20;?>"&gt;&lt;/iframe&gt;
      </code>
      <?php
    }
    
    // end HTML
    echo '</body>';
    echo '</html>';
  }
  
  public static function getDetails() {
    $details =
      array('description' => 'Takes any images from the Dapp output and creates '.
                             'a loop out of them in HTML.');
                             
    $details['args']['scrollerWidth'] = array('type'     => USER_FREEFORM,
                                              'required' => false,
                                              'display'  => 'Width of Scroller',
                                              'valid'    => '^[0-9]+$');

    $details['args']['scrollerHeight'] = array('type'     => USER_FREEFORM,
                                              'required' => false,
                                              'display'  => 'Height of Scroller',
                                              'valid'    => '^[0-9]+$');

    return $details;
  }

}

?>