﻿

function createMethodReference(obj, methodName) {
    return function() { obj[methodName](); }
};

PhotoPlayerObj = function(ppdiv, autoplay, delay, data) {
    this.div = document.getElementById(ppdiv); //keep a reference to the player div
    //    this.data = data; //reference to
    //    this.thumbs = new Array(); //array to hold image thumb objects
    this.playerobj = this; //reference itself for IE (which sucks);

    this.direction = 1; //forward=1 or reverse=-1
    this.state = autoplay; // 0 = stop, 1 = forward
    this.timer = 0; // holds pointer to timer 
    if (delay == 0) {
        this.delay = 6000; // time between image flips
    } else {
        this.delay = delay * 1000;
    }
    this.index = -1; //current image being displayed
    this.fadeeffect = createMethodReference(this, 'fader');
    this.fadepercent = 0; // tracks how far it has faded
    this.fadestate = 0; //fading in or out
    this.intransition = 0; //check to see if its already in transition before starting a new one
    this.paused = false; //check if the player is paused by mouse over (not play pause)
    this.nodes = new Array();
    this.maxadrefresh = 0;
    this.adrefreshcount = 0;
   
    //    if (this.scanfornodes(this.div) == false) { //check if the viewer is supplied
    //        alert("No viewer has been defined");
    //        return;
    //    }

    //    //check for special nodes
    //    if (this.nodes['PP-Play']) {
    //        this.nodes['PP-Play'].onclick = this.playClick;
    //        this.nodes['PP-Play'].onmouseover = this.mouseOver;
    //        this.nodes['PP-Play'].onmouseout = this.mouseOut;
    //    }
    //    if (this.nodes['PP-Prev']) {
    //        this.nodes['PP-Prev'].onclick = this.prevClick;
    //        this.nodes['PP-Prev'].onmouseover = this.mouseOver;
    //        this.nodes['PP-Prev'].onmouseout = this.mouseOut;
    //    }
    //    if (this.nodes['PP-Next']) {
    //        this.nodes['PP-Next'].onclick = this.nextClick;
    //        this.nodes['PP-Next'].onmouseover = this.mouseOver;
    //        this.nodes['PP-Next'].onmouseout = this.mouseOut;
    //    }

    this.reset(data);
    //    if (this.nodes['PP-Thumbs'] && this.data.length > 1) {
    //        var thumbobj;
    //        //spit out a thumbnail for each image in the lineup
    //        for (var i = 0; i < this.data.length; i++) {
    //            thumbobj = document.createElement('div');
    //            thumbobj.index = i;
    //            thumbobj.className = "imgthumb";
    //            thumbobj.onmouseover = this.mouseOver;
    //            thumbobj.onmouseout = this.mouseOut;
    //            thumbobj.onclick = this.thumbClick;
    //            thumbobj.playerobj = this;

    //            //if nothing is specified for the thumbnail then use the index
    //            if (this.data[i]['Thumbnail']) {
    //                //they can set an image and/or text (or any other properties?)
    //                this.setDivData(thumbobj, this.data[i]['Thumbnail']);
    //            } else {
    //                thumbobj.innerHTML = i + 1;
    //            }
    //            this.thumbs[this.thumbs.length] = thumbobj;
    //            this.nodes['PP-Thumbs'].appendChild(thumbobj);
    //        }
    //        this.nodes['PP-Thumbs'].style.display = "block"; //ie sucks, wont draw unless you do this

    //        //get width of second item in the thumbnail list (assume border, padding and margin go all around)
    //        var thumbwidth = parseInt(this.cascadedstyle(this.nodes['PP-Thumbs'].childNodes[1], 'width', 'width'));
    //        var margin = parseInt(this.cascadedstyle(this.nodes['PP-Thumbs'].childNodes[1], 'margin', 'margin-left'));
    //        if (isNaN(margin)) { margin = 0; }
    //        var padding = parseInt(this.cascadedstyle(this.nodes['PP-Thumbs'].childNodes[1], 'padding', 'padding-left'));
    //        if (isNaN(padding)) { padding = 0; }
    //        var border = parseInt(this.cascadedstyle(this.nodes['PP-Thumbs'].childNodes[1], 'borderWidth', 'borderLeftWidth'));
    //        if (isNaN(border)) { border = 0; }
    //        this.thumbnailSize = thumbwidth + margin * 2 + padding * 2 + border * 2;
    //        this.thumbholderSize = parseInt(this.cascadedstyle(this.nodes['PP-ThumbHolder'], 'width', 'width')); //display container for thumbnails
    //        this.nodes['PP-Thumbs'].style.width = this.thumbnailSize * this.data.length + 2 + "px"; // IE needs extra pixels or it wraps
    //        this.thumbsSize = this.thumbnailSize * this.data.length; //container that holds all thumbnails
    //        this.thumbspots = Math.floor(this.thumbholderSize / this.thumbnailSize); //number of thumbnails we can show in given space
    //    }

    //do initial setup of player using first item
    //    this.switchto(0);
    //    if (this.state && this.data.length > 1) { //start timer for next image switch if the state is 1 and there are more than 1 images
    //        this.addClass(this.playerobj.nodes['PP-Play'], "PP-Pause");
    //        this.removeClass(this.playerobj.nodes['PP-Play'], "PP-Play");
    //        this.timer = setTimeout(createMethodReference(this, 'run'), this.delay);
    //    }
}

PhotoPlayerObj.prototype.reset = function(data) {
    clearTimeout(this.playerobj.timer);
    clearTimeout(this.transitiontimer);
    this.data = data;
    this.thumbs = new Array(); //array to hold image thumb objects
    this.adrefreshcount = 0;

    if (this.scanfornodes(this.div) == false) { //check if the viewer is supplied
        alert("No viewer has been defined");
        return;
    }

    //check for special nodes
    if (this.nodes['PP-Play']) {
        this.nodes['PP-Play'].onclick = this.playClick;
        this.nodes['PP-Play'].onmouseover = this.mouseOver;
        this.nodes['PP-Play'].onmouseout = this.mouseOut;
    }
    if (this.nodes['PP-Prev']) {
        this.nodes['PP-Prev'].onclick = this.prevClick;
        this.nodes['PP-Prev'].onmouseover = this.mouseOver;
        this.nodes['PP-Prev'].onmouseout = this.mouseOut;
    }
    if (this.nodes['PP-Next']) {
        this.nodes['PP-Next'].onclick = this.nextClick;
        this.nodes['PP-Next'].onmouseover = this.mouseOver;
        this.nodes['PP-Next'].onmouseout = this.mouseOut;
    }

    // remove all thumbnails
    while (this.nodes['PP-Thumbs'].hasChildNodes()) {
        this.nodes['PP-Thumbs'].removeChild(this.nodes['PP-Thumbs'].firstChild);
    }

    if (this.nodes['PP-Thumbs'] && this.data.length > 1) {
        var thumbobj;
        //spit out a thumbnail for each image in the lineup
        for (var i = 0; i < this.data.length; i++) {
            thumbobj = document.createElement('div');
            thumbobj.index = i;
            thumbobj.className = "imgthumb";
            thumbobj.onmouseover = this.mouseOver;
            thumbobj.onmouseout = this.mouseOut;
            thumbobj.onclick = this.thumbClick;
            thumbobj.playerobj = this;

            //if nothing is specified for the thumbnail then use the index
            if (this.data[i]['Thumbnail']) {
                //they can set an image and/or text (or any other properties?)
                this.setDivData(thumbobj, this.data[i]['Thumbnail']);
            } else {
                thumbobj.innerHTML = i + 1;
            }
            this.thumbs[this.thumbs.length] = thumbobj;
            this.nodes['PP-Thumbs'].appendChild(thumbobj);
        }
        this.nodes['PP-Thumbs'].style.display = "block"; //ie sucks, wont draw unless you do this

        //get width of second item in the thumbnail list (assume border, padding and margin go all around)
        var thumbwidth = parseInt(this.cascadedstyle(this.nodes['PP-Thumbs'].childNodes[1], 'width', 'width'));
        var margin = parseInt(this.cascadedstyle(this.nodes['PP-Thumbs'].childNodes[1], 'margin', 'margin-left'));
        if (isNaN(margin)) { margin = 0; }
        var padding = parseInt(this.cascadedstyle(this.nodes['PP-Thumbs'].childNodes[1], 'padding', 'padding-left'));
        if (isNaN(padding)) { padding = 0; }
        var border = parseInt(this.cascadedstyle(this.nodes['PP-Thumbs'].childNodes[1], 'borderWidth', 'borderLeftWidth'));
        if (isNaN(border)) { border = 0; }
        this.thumbnailSize = thumbwidth + margin * 2 + padding * 2 + border * 2;
        this.thumbholderSize = parseInt(this.cascadedstyle(this.nodes['PP-ThumbHolder'], 'width', 'width')); //display container for thumbnails
        this.nodes['PP-Thumbs'].style.width = this.thumbnailSize * this.data.length + 2 + "px"; // IE needs extra pixels or it wraps
        this.thumbsSize = this.thumbnailSize * this.data.length; //container that holds all thumbnails
        this.thumbspots = Math.floor(this.thumbholderSize / this.thumbnailSize); //number of thumbnails we can show in given space

        this.maxadrefresh = this.thumbs.length;

        
    }

    this.switchto(0);
    if (this.state && this.data.length > 1) { //start timer for next image switch if the state is 1 and there are more than 1 images
        this.addClass(this.playerobj.nodes['PP-Play'], "PP-Pause");
        this.removeClass(this.playerobj.nodes['PP-Play'], "PP-Play");
        clearTimeout(this.timer);
        this.timer = setTimeout(createMethodReference(this, 'run'), this.delay);
    }

}

//scan the html for anything that has a classname starting with PP- return true if anything was found
PhotoPlayerObj.prototype.scanfornodes = function(node) {
    var found = false;
    var cname;

    for (var i = 0; i < node.childNodes.length; i++) {
        this.scanfornodes(node.childNodes[i]);
        if (node.childNodes[i].className && node.childNodes[i].className.indexOf("PP-") == 0) {
            
            //check if this node should be hidden when there is only one picture
            if (node.childNodes[i].className.indexOf("hideifsingle") != -1 && this.data.length < 2) {
                node.childNodes[i].style.display = "none";
            } else {
                node.childNodes[i].style.display = ""; //reset style (display controls) if more than 1 picture
                cname = node.childNodes[i].className.split(" ");
                this.nodes[cname[0]] = node.childNodes[i];
                this.nodes[cname[0]].playerobj = this; //make sure they have a reference back to the playerobj
                found = true;
            }
        }
    }
    return found;
}

//switch to item at X (position in index)
PhotoPlayerObj.prototype.switchto = function(position) {
    if (position < 0) { position = 0; }
    if (position >= this.data.length) { position = this.data.length - 1; }

    for (node in this.nodes) {
        var key = node.substring(3); //skip the PP- to get key
        if (this.data[position][key]) { //check if the key exists in the data provided
            this.setDivData(this.nodes[node], this.data[position][key]);
            //alert(this.data[position][key].display + ' position: ' + position + '   key : ' + key);
        }
    }
    if (this.thumbs[position]) {
        this.thumbs[position].className = 'imgthumbon';
    }
    this.index = position;

    //set slidebar position  
    if (this.nodes['PP-ThumbHolder'] != null && this.nodes['PP-Thumbs'] != null) {
        var pos = Math.floor(this.index / this.thumbspots);

        var offset = (this.thumbholderSize + 1) * pos;
        reg_num = /\d+/;
        if (reg_num.exec(offset)) {
            if (offset + this.thumbholderSize > this.thumbsSize) {
                offset = (this.thumbholderSize) * (pos - 1) + (this.thumbsSize % (this.thumbholderSize + 1 ));
               
            }
            this.nodes['PP-Thumbs'].style.left = -offset + "px";
        }
    }
}


//pull style sheet properties
PhotoPlayerObj.prototype.cascadedstyle = function(el, cssproperty, csspropertyNS) {
    if (el.currentStyle) {
        return el.currentStyle[cssproperty];
    } else if (window.getComputedStyle) {
        var elstyle = window.getComputedStyle(el, "");
        if (elstyle[csspropertyNS]) {
            return elstyle[csspropertyNS];
        }
        return elstyle.getPropertyValue(csspropertyNS);
    }
}

//set div with given data
PhotoPlayerObj.prototype.setDivData = function(node, data) {
    if (data.display != null) { //if display was specified set innerHTML to that
        node.innerHTML = this.xmldecode(data.display);
    }
    if (data.onclick != null) { //if onclick was specified set it
        if (typeof (data.onclick) == "function") {
            node.onclick = data.onclick;
        } else {
            node.onclick = function() { eval(data.onclick) };
        }
    }
    if (data.onload != null) { //if onload was specified run it
        if (typeof (data.onload) == "function") {
            data.onload();
        } else {
            eval(data.onload);
        }
    }
    if (data.onmouseover != null) { //if onmouseover was specified set it
        if (typeof (data.onmouseover) == "function") {
            node.onmouseover = data.onmouseover;
        } else {
            node.onmouseover = function() { eval(data.onmouseover) };
        }
    } else {
        node.onmouseover = this.mouseOver;
    }
    if (data.onmouseout != null) { //if onmouseout was specified set it
        if (typeof (data.onmouseout) == "function") {
            node.onmouseout = data.onmouseout;
        } else {
            node.onmouseout = function() { eval(data.onmouseout) };
        }
    } else {
        node.onmouseout = this.mouseOut;
    }
    if (data.background != null) { //if background was specified set it
        node.style.backgroundImage = "url(" + data.background + ")";
    }
}

PhotoPlayerObj.prototype.mouseOver = function() {
    this.playerobj.addClass(this, "PP-mouseover");
}

PhotoPlayerObj.prototype.mouseOut = function() {
    this.playerobj.removeClass(this, "PP-mouseover");
}

PhotoPlayerObj.prototype.thumbClick = function() {
    if (this.playerobj.index == this.index) {
        return; //already on this image
    }
    if (this.playerobj.index != -1) {
        this.playerobj.thumbs[this.playerobj.index].className = 'imgthumb';
    }
    this.playerobj.direction = 1;
    this.playerobj.state = 0;
    this.playerobj.removeClass(this.playerobj.nodes['PP-Play'], "PP-Pause");
    this.playerobj.addClass(this.playerobj.nodes['PP-Play'], "PP-Play");
    this.playerobj.index = this.index - 1;
    clearTimeout(this.playerobj.timer);
    this.playerobj.startTransition();
}

PhotoPlayerObj.prototype.nextClick = function() {
    this.playerobj.direction = 1;
    this.playerobj.state = 0;
    clearTimeout(this.playerobj.timer);
    this.playerobj.startTransition();
}

PhotoPlayerObj.prototype.prevClick = function() {
    this.playerobj.direction = -1;
    this.playerobj.state = 0;
    clearTimeout(this.playerobj.timer);
    this.playerobj.startTransition();
}

PhotoPlayerObj.prototype.playClick = function() {
    if (this.playerobj.state) {
        clearTimeout(this.playerobj.timer);
        this.playerobj.state = 0;
        this.playerobj.removeClass(this, "PP-Pause");
        this.playerobj.addClass(this, "PP-Play");
    } else {
        this.playerobj.direction = 1;
        this.playerobj.state = 1;
        this.playerobj.removeClass(this, "PP-Play");
        this.playerobj.addClass(this, "PP-Pause");
        clearTimeout(this.playerobj.timer);
        this.playerobj.timer = setTimeout(createMethodReference(this.playerobj, 'run'), this.delay);
    }
}

//used for mouse over to stop timer so image doesnt change (if playing)
PhotoPlayerObj.prototype.pauseClick = function() {
    clearTimeout(this.playerobj.timer);
    this.playerobj.paused = true;
}

//used for mouse over to start timer so image doesnt change (if playing)
PhotoPlayerObj.prototype.resumeClick = function() {
    if (this.playerobj.state) {
        clearTimeout(this.timer);
        this.timer = setTimeout(createMethodReference(this, 'run'), this.delay);
    }
    this.playerobj.paused = false;
}

PhotoPlayerObj.prototype.run = function() {
    this.startTransition();
}

PhotoPlayerObj.prototype.startTransition = function() {
    if (this.paused) { return; } // if paused then dont do anything

    //check if we are already in transition
    clearTimeout(this.transitiontimer);
    if (this.intransition) {
        clearTimeout(this.transitiontimer);
        this.transitiontimer = setTimeout(createMethodReference(this, 'startTransition'), 100);
        return;
    }
    this.intransition = 1;

    if (this.index != -1 && this.thumbs[this.index]) {
        this.thumbs[this.index].className = 'imgthumb';
    }
    this.index = this.index + this.direction;
    if (this.index >= this.data.length) {
        this.index = 0;
    }
    if (this.index < 0) {
        this.index = this.data.length - 1;
    }
    //set the new one to on
    if (this.index != -1 && this.thumbs[this.index]) {
        this.thumbs[this.index].className = 'imgthumbon';
    }

    if (!this.nodes['PP-Display']) { //if its not defined then dont bother with the fader
        this.endTransition();
        return;
    }

    // create the transition div and add it to the page
    var transitiondiv = document.createElement('div');
    transitiondiv.className = "PP-Display";
    transitiondiv.playerobj = this;
    transitiondiv.zIndex = 20;  //display div is set to zindex of 10 so this is below
    this.setDivData(transitiondiv, this.data[this.index]['Display']); //fill in the data
    this.setOpacity(transitiondiv, 0); //make sure it starts off see through
    this.nodes['PP-Transition'] = transitiondiv; //insert it into the node list
    this.nodes['PP-Display'].parentNode.insertBefore(transitiondiv, this.nodes['PP-Display']); //insert it into the page
    this.switchto(this.index); //set all other fields in the display
    this.fade(0);

    //alert('refreshcount: ' + this.adrefreshcount + '   maxrefresh: ' + this.maxadrefresh)


    
    var pageType = "";
    var pageURL = document.location.href;
    if (pageURL.indexOf('/photozone') >= 0) { pageType = 'photozone'; }
    else if (pageURL.indexOf('/article/') >= 0) { pageType = 'article'; }


    if ((typeof getNewAd == 'function' && enableRefresh) && (pageType == 'photozone' || pageType == 'article')) { // refresh ads on photozone page.
        if (this.adrefreshcount < this.maxadrefresh) {

            getNewAd(this.maxadrefresh);
            this.adrefreshcount++;
          
        }
    }
}

PhotoPlayerObj.prototype.endTransition = function() {
    this.intransition = 0; //transition is finished, let start transition run again
    if (this.state) { //start timer for next image switch
        clearTimeout(this.timer);
        this.timer = setTimeout(createMethodReference(this, 'run'), this.delay);
    }
    if (this.nodes['PP-Display']) {
        this.nodes['PP-Display'].parentNode.removeChild(this.nodes['PP-Display']); //remove the current display div from the page
        delete this.nodes['PP-Display']; //remove it from the list
        //this.switchto(this.index); //set all other fields in the display
        this.nodes['PP-Display'] = this.nodes['PP-Transition']; //point display  to transition div
        this.nodes['PP-Display'].zIndex = 10; //set zindex on display
        delete this.nodes['PP-Transition']; //clear transition div
    }
}

PhotoPlayerObj.prototype.show = function(node) {
    this.nodes[node].style.display = 'block';
}

PhotoPlayerObj.prototype.hide = function(node) {
    this.nodes[node].style.display = 'none';
}

PhotoPlayerObj.prototype.fade = function(state) {
    this.fadepercent = (state) ? 0 : 100;
    this.fadestate = state;
    //  this.fader();
    this.interval = setInterval(this.fadeeffect, 100);
}

PhotoPlayerObj.prototype.fader = function() {
    if (this.fadepercent <= 0) {
        clearInterval(this.interval); //stop the next tick from happening
        this.endTransition();
        return;
    } else {
        this.fadepercent -= 10;
    }

    this.setOpacity(this.nodes['PP-Transition'], 100 - this.fadepercent);
    this.setOpacity(this.nodes['PP-Display'], this.fadepercent);
}

PhotoPlayerObj.prototype.setOpacity = function(node, percent) {
    if (typeof (node) == "string") {
        node = this.nodes[node]; // if they passed a name then find the node
    }
    node.style.opacity = percent / 100;
    node.style.MozOpacity = percent / 100;
    node.style.KhtmlOpacity = percent / 100;
    node.style.filter = "alpha(opacity=" + percent + ")";
}

PhotoPlayerObj.prototype.xmldecode = function(xmldata) {
    xmldata = xmldata.replace(/&quot;/g, "\"");
    xmldata = xmldata.replace(/&lt;/g, "<");
    xmldata = xmldata.replace(/&gt;/g, ">");
    xmldata = xmldata.replace(/&amp;/g, "&");

    return xmldata;
}

PhotoPlayerObj.prototype.removeClass = function(el, className) {
    if (typeof (el) == "string") {
        el = this.nodes[el]; // if they passed a name then find the node
    }
    if (!(el && el.className)) {
        return;
    }
    var cls = el.className.split(" ");
    var ar = new Array();
    var found = false;
    for (var i = cls.length; i > 0; ) {
        if (cls[--i] != className) {
            ar[ar.length] = cls[i];
        } else {
            found = true;
        }
    }
    el.className = ar.join(" ");
    return found;
}

PhotoPlayerObj.prototype.addClass = function(el, className) {
    if (typeof (el) == "string") {
        el = this.nodes[el]; // if they passed a name then find the node
    }
    if (!(el && el.className)) {
        return;
    }
    this.removeClass(el, className);
    el.className += " " + className;
}

PhotoPlayerObj.prototype.mouseLeaves = function(element, evt) {
    if (!evt) { evt = window.event; }
    if (typeof evt.toElement != 'undefined' && typeof element.contains != 'undefined') {
        return !element.contains(evt.toElement);
    }
    else if (typeof evt.relatedTarget != 'undefined' && evt.relatedTarget) {
        return !this.contains(element, evt.relatedTarget);
    }
}

PhotoPlayerObj.prototype.contains = function(container, containee) {
    while (containee) {
        if (container == containee) {
            return true;
        }
        containee = containee.parentNode;
    }
    return false;
}


