// -------------------------------------------------------------------
// Image Thumbnail Viewer II- By Dynamic Drive, available at: http://www.dynamicdrive.com
// Last updated: Feb 5th, 2007
// -------------------------------------------------------------------

var thumbnailviewer2 = {
    enableTitle: true, //Should "title" attribute of link be used as description?
    enableTransition: true, //Enable fading transition in IE?
    hideimgmouseout: false, //Hide enlarged image when mouse moves out of anchor link? (if enlarged image is hyperlinked, always set to false!)
    imageHeight: 100,  // loaded image height
    imageHeight2: 100, // loaded image height (portrait)
    activeLink: null,

    /////////////No need to edit beyond here/////////////////////////

    iefilterstring: 'progid:DXImageTransform.Microsoft.GradientWipe(GradientSize=1.0 Duration=0.7)', //IE specific multimedia filter string
    //iefiltercapable: document.compatMode && window.createPopup? true : false, //Detect browser support for IE filters
    preloadedimages: [], //array to preload enlarged images (ones set to display "onmouseover"
    targetlinks: [], //array to hold participating links (those with rel="enlargeimage:initType")
    alreadyrunflag: false, //flag to indicate whether init() function has been run already come window.onload
    captions: $H(),
    currentIndex: 0,
    pagerId: '',

    loadimage: function(linkobj) {
        this.currentIndex = linkobj.psgIndex; //Fetch index
        var imagepath = linkobj.getAttribute("href"); //Get URL to enlarged image
        var showcontainer = document.getElementById(linkobj.getAttribute("rev").split("::")[0]); //Reference container on page to show enlarged image in
        var dest = linkobj.getAttribute("rev").split("::")[1]; //Get URL enlarged image should be linked to, if any
        var description = (thumbnailviewer2.enableTitle && linkobj.getAttribute("title")) ? 
                linkobj.getAttribute("title") : ""; //Get title attr

        var captInfo = this.getCaption(imagepath);
        var useHeight = this.imageHeight;
        if (captInfo[0] == '2') useHeight = this.imageHeight2; 

        var imageHTML = '<img src="'+imagepath+'" height="'+useHeight+'" style="border-width: 0" />'; //Construct HTML for enlarged image
        if (typeof dest != "undefined") //Hyperlink the enlarged image?
            imageHTML = '<a href="'+dest+'">' + imageHTML + '</a>';
        if (description!="") //Use title attr of the link as description?
            imageHTML += '<br />' + description;
        //if (this.iefiltercapable) { //Is this an IE browser that supports filters?
        //    showcontainer.style.filter = this.iefilterstring;
        //    showcontainer.filters[0].Apply();
        //}

        this.showCaption(captInfo);

        showcontainer.innerHTML = imageHTML;
        this.featureImage = showcontainer.getElementsByTagName("img")[0]; //Reference enlarged image itself
        this.featureImage.onload = function() { //When enlarged image has completely loaded
            //if (thumbnailviewer2.iefiltercapable) //Is this an IE browser that supports filters?
            //    showcontainer.filters[0].Play();
        };
        this.featureImage.onerror = function(){ //If an error has occurred while loading the image to show
            //if (thumbnailviewer2.iefiltercapable) //Is this an IE browser that supports filters?
            //    showcontainer.filters[0].Stop();
        };
        
        if (this.activeLink)
          this.activeLink.className = this.activeLink.className.replace(/\bactive\b/g,'')
        linkobj.className = linkobj.className.replace(/\bactive\b/g,'') + ' active';
        this.activeLink = linkobj;

        this.showPager(this.currentIndex,this.targetlinks.length);    
    },
    
    showPager: function(ind,cnt) {
        if (this.pagerId) {
          if (cnt > 9) {
	          $(this.pagerId).innerHTML = "<div class=\"ind2\">" + (ind+1) + "</div>"
	          			+ "<div class=\"sep\">|</div>" 
	          			+ "<div class=\"from2\">" + cnt + "</div>";
          }else{
	          $(this.pagerId).innerHTML = "<div class=\"ind1\">" + (ind+1) + "</div>"
	          			+ "<div class=\"sep\">|</div>" 
	          			+ "<div class=\"from1\">" + cnt + "</div>";
          }
        }
    },

    getCaption: function(imagepath) {
        var caption = this.captions[imagepath.substr(imagepath.lastIndexOf('/')+1)];
        var captPos = '';
        if (caption.search(/\w:/) == 0) {
            captPos = caption.charAt(0);
            caption = caption.substring(2);
        }
        return new Array(captPos,caption);
    },

    showCaption: function(captInfo) {
        var caption = captInfo[1];
        var captPos = captInfo[0];
        if (captPos) captPos = "-" + captPos;
        $('psgCaptionLoadArea').innerHTML = '';
        $('psgCaptionLoadArea-1').innerHTML = '';
        $('psgCaptionLoadArea-2').innerHTML = '';
        $('psgCaptionLoadArea'+captPos).innerHTML = caption ? caption : '&nbsp;';
    },

    hideimage: function(linkobj){
        var showcontainer = document.getElementById(linkobj.getAttribute("rev").split("::")[0]); //Reference container on page to show enlarged image in
        showcontainer.innerHTML = "";
        $('psgCaptionLoadArea').innerHTML = '';
        $('psgCaptionLoadArea-1').innerHTML = '';
        $('psgCaptionLoadArea-2').innerHTML = '';
        if (this.pagerId) {
          $(this.pagerId).innerHTML = '';
        }
    },

    cleanup: function(){ //Clean up routine on page unload
        if (this.featureImage) {
            this.featureImage.onload = null; 
            this.featureImage.onerror = null; 
            this.featureImage = null;
        }
        this.showcontainer = null;
        for (var i=0; i < this.targetlinks.length; i++) {
            this.targetlinks[i].onclick = null;
            this.targetlinks[i].onmouseover = null;
            this.targetlinks[i].onmouseout = null;
        }
    },

    addEvent: function(target, functionref, tasktype) { //assign a function to execute to an event handler (ie: onunload)
        var tasktype = (window.addEventListener) ? tasktype : "on"+tasktype;
        if (target.addEventListener)
            target.addEventListener(tasktype, functionref, false);
        else if (target.attachEvent)
            target.attachEvent(tasktype, functionref);
    },

	 // use "caption" or "1:caption" for a landscape image, "2:caption" for a portrait image
    registerCaption: function(target, caption) {
    		this.captions[target] = caption;
    },

    loadFirstImage: function() {
    	if(thumbnailviewer2.targetlinks && thumbnailviewer2.targetlinks[0]) {
    		thumbnailviewer2.loadimage(thumbnailviewer2.targetlinks[0]);
    	}else{
    		window.setTimeout(thumbnailviewer2.loadFirstImage,300);
    	}
    },	 

    setPagerId: function(id) {
      this.pagerId = id;
    },

    showPreviousImage: function() {
    	var i = this.currentIndex - 1;
    	if (i < 0) i = this.targetlinks.length - 1;
    	this.loadimage(this.targetlinks[i]);
    },

    showNextImage: function() {
    	var i = this.currentIndex + 1;
    	if (i >= this.targetlinks.length) i = 0;
    	this.loadimage(this.targetlinks[i]);
    },

    init: function() { //Initialize thumbnail viewer script
        //this.iefiltercapable = (this.iefiltercapable && this.enableTransition); //True or false: IE filters supported and is enabled by user
        var pagelinks = document.getElementsByTagName("a");
        var ind=-1;
        for (var i=0; i < pagelinks.length; i++) { //BEGIN FOR LOOP
            if (pagelinks[i].getAttribute("rel") && /enlargeimage:/i.test(pagelinks[i].getAttribute("rel"))) { //Begin if statement: Test for rel="enlargeimage"
                ind++;
                var initType = pagelinks[i].getAttribute("rel").split("::")[1]; //Get display type of enlarged image ("click" or "mouseover")
                if (initType == "mouseover") { //If type is "mouseover", preload the enlarged image for quicker display
                    this.preloadedimages[ind] = new Image();
                    this.preloadedimages[ind].src = pagelinks[i].href;
                    pagelinks[i]["onclick"] = function() { //Cancel default click action
                        return false;
                    }
                }
                pagelinks[i].psgIndex = ind; //Add new index property to element
                pagelinks[i]["on"+initType] = function() { //Load enlarged image based on the specified display type (event)
                    thumbnailviewer2.loadimage(this); //Load image
                    return false;
                }
                if (this.hideimgmouseout) {
                    pagelinks[i]["onmouseout"] = function() {
                        thumbnailviewer2.hideimage(this);
                    }
                }
                this.targetlinks[ind] = pagelinks[i]; //store reference to target link
            } //end if statement
        } //END FOR LOOP
    } //END init() function
}