/* $Id$
 *
 * (c) James Aylett 2007
 */

var flickbookr = {
    images : new Array(),
    loop: 0,
    fade: 0,
    idx : 0,
    completed : 0,
    had_error : 0,
    first: 1,
    debug: 0, /* enable logging console */
    offline: 0, /* if running offline, modifies system to avoid any Flickr calls; forces demo mode */
    running: 0,
    ic_hold: 1000, /* before fade out, after fade in, hold for this long */
    ic_fade_steps: 20, /* then fade out over this many steps */
    ic_fade_pause: 50, /* lasting this long each */
    ic_opacity: 0, /* image container opacity */
    ic_target: 100, /* where we're going with the image container opacity */

    inter_frame_hold : 50, /* between frames, hold for this long */
    inter_frame_fade_steps: 5, /* then fade out over this many steps */
    inter_frame_fade_pause: 10, /* lasting this long each */
    image_opacity: 0, /* for inter-frame fades (opacity of my_img1) */

    current_image: 1, /* which image are we currently showing (0 or 1) */

    set_frame_rate: function(fps) {
	var t = 1000 / fps;
	if (this.fade) {
	    t -= this.inter_frame_fade_steps*this.inter_frame_fade_pause;
	}
	if (t<25) {
	    t = 25;
	}
	this.inter_frame_hold = t;
    },

    log: function(text, level) {
	if (typeof(level)=="undefined") {
		level = 1;
	}
	if (level > this.debug) {
	    return;
	}
	var ele = document.getElementById('debug');
	ele.style.display = 'block';
	var d = new Date();
	ele.innerHTML = d.getUTCHours() + ":" + d.getUTCMinutes() + ":" + d.getUTCSeconds() + "  " + text + "<br />" + ele.innerHTML;
	ele.focus();
    },

    inter_frame_fade: function() {
	if (this.image_opacity == 100*this.current_image) {
	    if (this.current_image==1) {
	            var ele = document.getElementById('my_img0');
	            ele.style.opacity = 0;
            }
	    this.log("proceeding to next in " + this.inter_frame_hold);
	    var _this = this;
	    setTimeout(function() { _this.next() }, this.inter_frame_hold);
	} else {
	    var ele = document.getElementById('my_img1');
	    if (this.current_image==0) {
		this.image_opacity -= (100 / this.inter_frame_fade_steps);
		if (this.image_opacity < 0) {
		    this.image_opacity = 0;
		}
		this.log("easing from 1 to 0 (1 at " + this.image_opacity + ")", 2);
	    } else {
		this.image_opacity += (100 / this.inter_frame_fade_steps);
		if (this.image_opacity > 100) {
		    this.image_opacity = 100;
		}
		this.log("easing from 0 to 1 (1 at " + this.image_opacity + ")", 2);
	    }
	    ele.style.opacity = this.image_opacity / 100;
	    ele.focus();
	    var _this = this;
	    setTimeout(function() { _this.inter_frame_fade() }, this.inter_frame_fade_pause);	    
	}
    },
    next : function() {
	this.log("next(); this.running = " + this.running);
	if (!this.running) {
	    this.done();
	    return;
	}
	var _this = this;
	if (this.idx < this.images.length) {
	    if (this.fade) {
		this.current_image = 1 - this.current_image;
		var ele_next = document.getElementById('my_img' + this.current_image);
		ele_next.src = this.images[this.idx].src;
		ele_next.focus();
    	        if (this.current_image==0) {
    	            var ele = document.getElementById('my_img0');
    	            ele.style.opacity = 1;
                }

		this.log("moving to " + this.idx + " in slot " + this.current_image);
		this.idx++;

		if (this.first==1) {
		    /* instead of fading into the first frame (which won't
		       work, because there's no masking image in my_img1
		       to fade out from), we have to fade in the image
		       container itself */
		    this.first=0;
		    setTimeout(function() { _this.ic_fade() }, this.ic_fade_pause);
		} else {		
		    setTimeout(function() { _this.inter_frame_fade() }, this.inter_frame_fade_pause);
		}
	    } else {
		var ele = document.getElementById('my_img0');
		ele.src = this.images[this.idx].src;
		ele.focus();
		this.log("moving to " + this.idx);
		this.idx++;
		setTimeout(function() { _this.next() }, this.inter_frame_hold);
	    }
	} else {
	    if (this.loop) {
		this.idx = 0;
		if (this.fade) {
		    setTimeout(function() { _this.inter_frame_fade() }, this.inter_frame_fade_pause);
		} else {
		    setTimeout(function() { _this.next() }, this.inter_frame_hold);
		}
	    } else {
		this.done();
	    }
	}
    },
    ic_fade: function() {
	if (this.ic_target==100 || !this.running) {
	    var ele = document.getElementById('imgcontainer');
	    var _this = this;
	    if (this.ic_opacity != this.ic_target) {
		if (this.ic_opacity < this.ic_target) {
		    this.ic_opacity += (100 / this.ic_fade_steps);
		    this.log("easing in, now at " + this.ic_opacity, 2);
		} else {
		    this.ic_opacity -= (100 / this.ic_fade_steps);
		    this.log("easing out, now at " + this.ic_opacity, 2);
		}
		ele.style.opacity = this.ic_opacity / 100;
		setTimeout(function() { _this.ic_fade() }, this.ic_fade_pause);
	    } else {
		if (this.ic_target==100) {
		    setTimeout(function() { _this.next() }, this.ic_hold);
		} else {
		    ele.style.display = 'none';
		    this.ic_opacity = 100;
		    ele.style.opacity = 1.0;
		    ele = document.getElementById('my_img1');
		    ele.style.opacity = 0.0;
		    this.image_opacity = 0;
		}
	    }
	}
    },
    done: function() {
	var ele = document.getElementById('stop');
	ele.style.display = 'none';
	var ele = document.getElementById('thanks');
	ele.style.display = '';
	this.running = 0;
	this.ic_target = 0;
	this.ic_opacity = 100;
	var _this = this;
	setTimeout(function() { _this.ic_fade() }, this.ic_hold);
    },
    go: function() {
	// wait 1/10th second for a dying fade to finish
	this.first = 1;
	this.running = 1;
	var _this = this;
	setTimeout(function() { _this.real_go() }, 100);
    },
    real_go: function() {
	this.first = 1;
	this.running = 1;
	this.idx = 0;
	this.current_image = 1;
	this.image_opacity = 0;
	this.ic_opacity = 100;

	ele = document.getElementById('my_img1');
	ele.style.opacity = 0.0;

	ele = document.getElementById('gobutton');
	ele.style.display = 'none';
	ele = document.getElementById('thanks'); // for replays
	ele.style.display = 'none';
	if (this.loop) {
	    ele = document.getElementById('stop'); // to stop the loop
	    ele.style.display = '';
	}
	ele = document.getElementById('imgcontainer');
	ele.style.display = '';
	if (this.fade) {
	    ele.style.opacity = 0.0;
	    this.ic_opacity = 0;
	    this.ic_target = 100;
	}
	var _this = this;
	setTimeout(function() { _this.next() }, 0);
    },
    check: function() {
	if (this.had_error==0) {
	    this.completed+=1;
	    var ele = document.getElementById('percentage');
	    var pct = 100 * this.completed;
	    while ((pct % this.images.length)!=0) {
		pct--;
	    }
	    pct = pct / this.images.length;
	    ele.firstChild.data = pct;
	    this.log("Loaded " + pct + "% (" + this.completed + ")")
	    if (this.completed==this.images.length) {
		ele = document.getElementById('pending');
		ele.style.display = 'none';
		ele = document.getElementById('gobutton');
		ele.style.display = '';
	    }
	}
    },
    error: function() {
	var ele = document.getElementById('pending');
	ele.style.display = 'none';
	ele = document.getElementById('error');
	ele.style.display = '';
	this.had_error = 1;
    },
    equalise_columns: function() {
	var max = 0;
	var ele;
	var i;
	for (i=0; i<arguments.length; ++i) {
	    ele = document.getElementById(arguments[i]);
	    if (ele.offsetHeight > max) {
		max = ele.offsetHeight;
	    }
	}
	for (i=0; i<arguments.length; ++i) {
	    ele = document.getElementById(arguments[i]);
	    ele.style.minHeight = max + "px";
	}
    },
    show_photoset_autocomplete: function() {
        this.log("photoset loaded", 2);
        var ele = document.getElementById('photoset-loading');
        ele.style.display = 'none';
	ele = document.getElementById('photoset-label');
	ele.style.display = '';
	ele = document.getElementById('photoset-name');
	ele.style.display = '';
	ele = document.getElementById('photoset-name-container');
	ele.style.display = '';
    },
    update_photoset_autocomplete: function() {
	// wait 0.5 seconds after end of activity
	this._load_photoset_autocomplete_count++;
	var _this = this;
	setTimeout(function() {_this.do_load_photoset_autocomplete() }, 500);
	//this.setTimeout(this.do_load_photoset_autocomplete, 500);
    },
    setTimeout: function(fn, tim) {
	var _this = this;
	setTimeout(function() { _this[fn](); }, tim);
    },
    _load_photoset_autocomplete_count: 0,
    load_photoset_autocomplete: function() {
	this._load_photoset_autocomplete_count=1;
	this.do_load_photoset_autocomplete();
    },
    do_load_photoset_autocomplete: function() {
	this._load_photoset_autocomplete_count--;
	if (this._load_photoset_autocomplete_count > 0) {
	    this.log("deferring because the user is still typing");
	    return;
	}
	var ele = document.getElementById('user');
	if (ele.value!='') {
	    this.hide_photoset_autocomplete();
    	    this.log("starting photoset load", 1);
    	    var append = "";
    	    if (this.offline) {
    	        append = "&offline=1";
            }
	    YAHOO.util.Connect.asyncRequest('GET', 'get_photosets.phtml?user=' + ele.value + append, this.load_photoset_autocomplete_cb);
            ele = document.getElementById('photoset-loading');
            ele.style.display = '';
	}
    },
    load_photoset_autocomplete_cb: {
	success: function(o) {
	    if (o.status==200) {
		flickbookr.log("okay, NOW load...");
		try {
                        flickbookr.photoSetNameList = eval(o.responseText);
                        flickbookr.log(o.responseText);
                        flickbookr.photoSetDataSource.data = flickbookr.photoSetNameList;
                        flickbookr.photoSetDataSource.flushCache();
                        flickbookr.show_photoset_autocomplete();
                } catch (e) {
                        flickbookr.log("couldn't pass photoset list");
                        flickbookr.log(o.responseText);
                        flickbookr.hide_photoset_autocomplete();
                }
	    } else {
		flickbookr.hide_photoset_autocomplete();
	    }
	},
	failure: function(o) {
	    flickbookr.log("load photosets failed");
	    flickbookr.hide_photoset_autocomplete();
        }
    },
    hide_photoset_autocomplete: function() {
	this.hide_and_clear_photoset_autocomplete();
    },
    hide_and_clear_photoset_autocomplete: function() {
	var ele = document.getElementById('photoset-label');
	ele.style.display = 'none';
	ele = document.getElementById('photoset-name');
	ele.value = "";
	ele.style.display = 'none';
	ele = document.getElementById('photoset-name-container');
	ele.style.display = 'none';
	ele = document.getElementById('photoset');
	ele.value = "";
        ele = document.getElementById('photoset-loading');
        ele.style.display = 'none';
     },
    init_homepage: function() {
	this.photoSetNameList = [];
	this.photoSetDataSource = new YAHOO.widget.DS_JSArray(this.photoSetNameList);
	var autoComp = new YAHOO.widget.AutoComplete('photoset-name', 'photoset-name-container', this.photoSetDataSource);
	autoComp.animVert = true;
	autoComp.animHoriz = false;
	autoComp.forceSelection = true;

	// hook up an itemSelectEvent event on the AC object
	var ise_fn = function(eventName, event) {
	    var ele = document.getElementById('photoset');
	    ele.value = event[2][1];
	};
	autoComp.itemSelectEvent.subscribe(ise_fn);
	// hook up an unmatchedItemSelectEvent on the AC object
	var uise_fn = function(eventName, event) {
	    var ele = document.getElementById('photoset');
	    ele.value = "";
	};
	autoComp.unmatchedItemSelectEvent.subscribe(uise_fn);

	// hook up a changed event (or similar) on the username field
	// so that we can populate this.photoSetDataList...
	// FIXME: uses keyup at the moment... ``change'' doesn't work
	// properly, however currently not catching autocomplete
	ele = document.getElementById('user');
	var ce_fn = function(event) {
	    var ele = document.getElementById('user');
	    if (ele.value=='') {
		this.hide_and_clear_photoset_autocomplete();
	    } else {
		// do remote connection to figure out what's going on...
		this.update_photoset_autocomplete();
	    }
	}
	YAHOO.util.Event.addListener(ele, "keyup", ce_fn, this, true);
	if (ele.value!='') {
	    this.load_photoset_autocomplete();
	}

	this.groupDataSource = new YAHOO.widget.DS_XHR("get_groups.phtml", ["groups.group", "name", "nsid"]);
	this.groupDataSource.responseType = YAHOO.widget.DS_XHR.TYPE_JSON;
	if (this.offline) {
	    this.groupDataSource.scriptQueryAppend = "offline=1";
        }
	var autoComp2 = new YAHOO.widget.AutoComplete('group-name', 'group-name-container', this.groupDataSource);
	autoComp2.animVert = true;
	autoComp2.animHoriz = false;
	autoComp2.forceSelection = true;
	autoComp2.dataRequestEvent.subscribe(function(eventName, event) {
                ele = document.getElementById('group-loading');
                ele.style.display = '';	        
        });
        var hide_group_loading = function(eventName, event) {
                ele = document.getElementById('group-loading');
                ele.style.display = 'none';
        };
        autoComp2.dataReturnEvent.subscribe(function() { hide_group_loading(); flickbookr.log("data return!"); });
        autoComp2.dataErrorEvent.subscribe(function() { hide_group_loading(); flickbookr.log("data error!"); });

	// hook up an itemSelectEvent event on the AC object
	var ise_fn2 = function(eventName, event) {
	    var ele = document.getElementById('group');
	    ele.value = event[2][1];
	};
	autoComp2.itemSelectEvent.subscribe(ise_fn2);
	// hook up an unmatchedItemSelectEvent on the AC object
	var uise_fn2 = function(eventName, event) {
	    var ele = document.getElementById('group');
	    ele.value = "";
	};
	autoComp2.unmatchedItemSelectEvent.subscribe(uise_fn2);

	ele = document.getElementById('group-name');
	ele.style.display = '';
	ele = document.getElementById('group-label');
	ele.style.display = '';

	ele = document.getElementById('demo');
	var _this = this;
	var c_fn = function(event, target) {
	    var ele;
	    if (target.checked) {
		ele = document.getElementById('user');
		ele.disabled = true; 
		ele = document.getElementById('tags');
		ele.disabled = true;
		ele = document.getElementById('group-name');
		ele.disabled = true;
		_this.hide_and_clear_photoset_autocomplete();
	    } else {
		ele = document.getElementById('user');
		ele.disabled = false;
		if (ele.value!="") {
		    _this.do_load_photoset_autocomplete();
		}
		ele = document.getElementById('tags');
		ele.disabled = false;
		ele = document.getElementById('group-name');
		ele.disabled = false;
	    }
	};
	YAHOO.util.Event.addListener(ele, "change", c_fn, ele);

	ele = document.getElementById('options');
	var ele2 = document.createElement('input');
	ele2.type = 'hidden';
	ele2.name = 'skip-second-stage';
	ele2.value = '1';
	ele.appendChild(ele2);

	if (navigator.appVersion.indexOf("MSIE")!=-1 && navigator.userAgent.indexOf("Windows")!=-1) {
	    this.disable_fades();
	}

	ele = document.getElementById('pdf');
	if (ele) {
                var c_fn2 = function(event, target) {
                        var ele;
                        if (target.checked) {
                                ele = document.getElementById('loop');
                                ele.disabled = true; 
                                ele = document.getElementById('fade');
                                ele.disabled = true;
                                ele = document.getElementById('speed');
                                ele.disabled = true;
                        } else {
                                ele = document.getElementById('loop');
                                ele.disabled = false; 
                                ele = document.getElementById('fade');
                                ele.disabled = false;
                                ele = document.getElementById('speed');
                                ele.disabled = false;
                        }
                };
                YAHOO.util.Event.addListener(ele, "change", c_fn2, ele);
        }
	
	if (this.offline) {
            ele = document.getElementById('demo');
            ele.checked = true;
            ele.readonly = true;
        }    
    },
    disable_fades: function() {
	ele = document.getElementById('fade');
	ele.selected = false;
	ele = document.getElementById('fade-container');
	ele.style.display = 'none';
    }
}