// Simple Marquee (25-October-2010)
// by Vic Phillips http://www.vicsjavascripts.org.uk/

// A simple lightweight Marquee / Carousel to scroll a DIV content within a parent DIV.
// The scroll is continious with no gaps between the scroll content.
// The scroll may be 'Vertical' or 'Horizontal' and there may be as many applications on a page as required.
// The script is light weight with a functioam code size of just 1.42K.

//****** Application Notes

// **** The HTML and CSS Code.
//
// The scroll content must be nested in a DIV element.
// This scroll content DIV may be nested within a parent DIV or if images
// defined in the 'ContentArray' option of the script initialisation.
// This parent DIV must be assigned a unique ID name
// and CSS style position of 'relative' or 'absolute' and width and height
// defined by CSS class rule or inline style.
// The scroll content DIV may have its width and or height specified
// by a CSS class rule or inline style.
// The  parent DIV is assigned a style overflow of 'hidden'
// and the scroll content DIV style a position of 'absolute' by the script.
// e.g.
//  <div id="tst2" class="marquee" onmouseover="M2.Speed=0" onmouseout="M2.Speed=2">
//   <div style="width: 98%;">
//    <h4>Your scroller contents 1</h4>
//    <h4>Your scroller contents 2</h4>
//    <h4>Your scroller contents 3</h4>
//    <h4>Your scroller contents 4</h4>
//    <h4>Your scroller contents 5</h4>
//   </div>
//  </div>
//

// **** Initialising the Script.
//
// The script is initialised by assigning a new instance of the script to a global variable.
// Script options are passed as an object to function 'zxcMarquee' by the initisation call after the page has loaded.
// e.g.
//  var M1=new zxcMarquee({
//   ID:'tst1',       // the unique ID name of the parent DIV.                            (string)
//   Mode:'Vertical', //(optional) the mode of execution, Horizontal' or 'Vertical'.      (string, default = 'Vertical')
//   ContentArray:[         //(optional) an array defining image srcs, hrefs and titles.        (array, default = the scroll div content)
//    field 0 = the file path and name of the image.   (string)
//    field 1 = (optional) the link href of the image. (string)
//    field 1 = (optional) the image title.            (string)
//    ['http://www.vicsjavascripts.org.uk/StdImages/Cartoon2.gif'],
//    ['http://www.vicsjavascripts.org.uk/StdImages/Cartoon3.gif'],
//    ['http://www.vicsjavascripts.org.uk/StdImages/Cartoon4.gif']
//   ],
//   Speed:2,         //(optional) the speed of execution, 1 = slow, 10 = fast, 0 = stop. (digits, default = -1)
//   DelayStart:2000  //(optional) the auto start in milli seconds.                       (digits, default = 10)
// });
//

// **** Controlling the Scoll.
//
// The scroll is controlled by changing the scroll speed by inline event calls.
// Changing the speed to 0 will stop the scroll,
// a speed greater than 0 will scroll clockwise,
// a speed less than than 0 will scroll anticlockwise.
// e.g
//  <div id="tst1" class="marqueecontainer" onmouseover="M1.Speed=0" onmouseout="M1.Speed=2">
// where M1 is the global variable which has been assigned the script instance.
//

// ****** Functional Code(1.42K) - NO NEED to Change

function zxcMarquee(o){
 this.mde=typeof(o.Mode)=='string'&&o.Mode.charAt(0)=='H'?'left':'top';
 var p=document.getElementById(o.ID),oop=this,os=this.mde=='top'?'Height':'Width',dly=typeof(o.DelayStart)=='number'?o.DelayStart:10,pos=0,div;
 p.style.overflow='hidden';
 this.divs=[p.getElementsByTagName('DIV')[0]];
 var ary=o.ContentArray||[];
 for (var a,img,z0=0;z0<ary.length;z0++){
  a=document.createElement('A');
  img=document.createElement('IMG');
  img.src=ary[z0][0];
  if (ary[z0][1]){
   a.href=ary[z0][1];
  }
  if (ary[z0][2]){
   img.title=ary[z0][2];
  }
  a.appendChild(img);
  this.divs[0].appendChild(a);
 }
 this.divs[0].style.position='absolute';
 this.sz=this.divs[0]['offset'+os];
 this.divs[0].style[this.mde]=-this.sz+'px';
 while (pos<p['offset'+os]+this.sz){
  div=this.divs[0].cloneNode(true);
  p.appendChild(div);
  div.style[this.mde]=(pos)+'px';
  this.divs.push(div);
  pos+=this.sz;
 }
 this.nu=this.divs.length;
 this.Speed=typeof(o.Speed)=='number'?o.Speed:-1;
 setTimeout(function(){ oop.scroll(); },dly);
}

zxcMarquee.prototype.scroll=function(){
 for (var oop=this,pos,z0=0;z0<this.nu;z0++){
  pos=parseInt(this.divs[z0].style[this.mde]);
  if ((this.Speed<0&&pos<-this.sz)||(this.Speed>0&&pos>this.sz*(this.nu-2))){
   pos+=this.sz*this.nu*(this.Speed<0?1:-1);
  }
  this.divs[z0].style[this.mde]=pos+this.Speed+'px';
 }
 setTimeout(function(){ oop.scroll(); },50);
}

var M1,M2,M3;

function Init(){

M1=new zxcMarquee({
 ID:'mycrawlwer1',      // the unique ID name of the parent DIV.                            (string)
 Mode:'V',       //(optional) the mode of execution, Horizontal' or 'Vertical'.      (string, default = 'Vertical')
 Speed:-2,        //(optional) the speed of execution, 1 = slow, 10 = fast, 0 = stop. (digits, default = -1)
 DelayStart:2000 //(optional) the auto start in milli seconds.                       (digits, default = 10)
});

 ContentArray:[         //(optional) an array defining image srcs, hrefs and titles.        (array, default = the scroll div content)
//    field 0 = the file path and name of the image.   (string)
//    field 1 = (optional) the link href of the image. (string)
//    field 1 = (optional) the image title.            (string)
  ['http://www.vicsjavascripts.org.uk/StdImages/Cartoon2.gif'],
  ['http://www.vicsjavascripts.org.uk/StdImages/Cartoon3.gif'],
  ['http://www.vicsjavascripts.org.uk/StdImages/Cartoon4.gif']
 ],

M3=new zxcMarquee({
 ID:'tst3',
 Speed:-2
});

}

if (window.addEventListener){
 window.addEventListener('load',Init, false);
}
else if (window.attachEvent){
 window.attachEvent('onload',Init);
}