// jQuery SiteEngine slideshow widget

$.slideWidget = function(slides, containerID, options) {
	
	this.slides = slides; // array of objects {'img' : '...', 'title' : '...', 'url' : '...'}
	
	this.container = document.getElementById(containerID);
	
	this.picContainer = document.getElementById(containerID + '_pic');
	
	this.prevElm = document.getElementById(containerID + '_prev');
	this.nextElm = document.getElementById(containerID + '_next');
	
	this.titleElm = document.getElementById(containerID + '_title');
	
	this.barElm = document.getElementById(containerID + '_bar');
	this.barSpeed = 12; // hardcoded for now ...
	this.barHeight = parseInt(this.barElm.offsetHeight, 10);
	// alert(this.barHeight);
	
	// options
	var defaults = {
		width: $(this.picContainer).css('width'),
		height: $(this.picContainer).css('height'),
		transition: 'scrollHorz',
		transition_speed: 500,
		continuous: 0,
		timeout: 5000,
		see_more_class: ''
	};
	this.options = $.extend({}, defaults, options || {});
	
	this.setImgArrays();
	
	this.image_titles = []; // wil contain the final image title + url markup for each image
	
}

$.slideWidget.prototype.setImgArrays = function() {
	
	this.images = [];    	// img sources array
	this.images_clone = []; // clone of img sources array - this will be used to add slides to cycle markup
	this.imageAttr = {}; 	// img_src => {title:..., url:...} object
	this.totalSlideCount = this.slides.length;
	
	for(var k=0; k < this.totalSlideCount; k++) {
		this.images.push(this.slides[k]['img']);
		this.images_clone.push(this.slides[k]['img']);
		this.imageAttr[this.slides[k]['img']] = {title: this.slides[k]['title'], url: this.slides[k]['url']};
	}
}

$.slideWidget.prototype.startSlideshow = function() {
	
	var $slideshow = $(this.picContainer);      
	
	var that = this;
	
	if(this.totalSlideCount > 1) {
		
		// append first image
		$slideshow.append('<img src="'+this.images.shift()+'" />');  
    	
		// still we have images ?
    	if( this.images.length > 0 ) {
    		// prepend the last
    		$slideshow.prepend('<img src="'+this.images.pop()+'" />'); 
		}
		
		// still we have images ?
    	if( this.images.length > 0 ) {
    		// append next image
    		$slideshow.append('<img src="'+this.images.shift()+'" />');	
    	}
    	
    	// alert($slideshow.get(0).innerHTML);
    	
		$slideshow.cycle({ 
	        fx: 			this.options.transition, 
	        startingSlide: 	1,  // start on the slide that was in the markup 
	        speed:    		this.options.transition_speed,
	        continuous: 	this.options.continuous,
	        timeout: 		this.options.timeout, 
	        prev:     		'#'+that.prevElm.id, 
	        next:     		'#'+that.nextElm.id,
	        delay:			200, 
	        before:   		function (curr, next, opts, fwd) {that.onBefore.call(that, curr, next, opts, fwd);}, 
	        after:    		function (curr, next, opts, fwd) {that.onAfter.call(that, curr, next, opts, fwd);} 
	    }); 
    
	} else {
		// just 1 image, no slideshow at all
		var img_src = this.images.shift();
		// image url ?
		if(this.imageAttr[img_src] && this.imageAttr[img_src]['url']) {
			$slideshow.append('<img src="'+img_src+'" onclick="location.href = \''+this.imageAttr[img_src]['url']+'\';" style="cursor:pointer;" title="See more" />');	
		} else {
			$slideshow.append('<img src="'+img_src+'" />');
		}
		// title + URL
		$(this.titleElm).html(that.getImageTitle(img_src));
		$(this.nextElm).css('opacity', '0').css('cursor','default');
		$(this.prevElm).css('opacity', '0').css('cursor','default'); 
//		$(this.nextElm).hide();$(this.prevElm).hide(); 
	}   
	
}

$.slideWidget.prototype.onBefore = function(curr, next, opts, fwd) {

	var that = this;
//	$(this.barElm).slideToggle(500, function(){that.slideUpBar(700);}); // its ok this
	this.doSlideDownUp(this.barElm.id, 500);
		
	if (!opts.addSlide) 
        return; 
         
    // have we added all our slides? 
    if (opts.slideCount == this.totalSlideCount) 
        return; 

    // shift or pop from our slide array  
    var nextSlideSrc = fwd ? this.images.shift() : this.images.pop(); 
    
    // add the next slide
    // alert('Before add slide: slideshow_pic HTML: ' + $(this.picContainer).html());
    opts.addSlide('<img src="'+nextSlideSrc+'" />', fwd == false);
    // alert('After add slide: slideshow_pic HTML: ' + $(this.picContainer).html());
}

$.slideWidget.prototype.getImageTitle = function(full_img_src) {
	for(var img_src in this.imageAttr) {
		if(full_img_src.indexOf(img_src) != -1) {
			// image found
			var img_title = '';
			var comma = '';
			if(this.imageAttr[img_src]['title']) {
				img_title += '<h2>'+this.imageAttr[img_src]['title']+'</h2>';
				comma = '&nbsp;';
			}
			if(this.imageAttr[img_src]['url']) {
				img_title += comma + '<a id="se_widget_see_more" href="'+this.imageAttr[img_src]['url']+'" class="'+this.options['see_more_class']+'">See more</a>';
			}
			return img_title;
		}
	}
}

$.slideWidget.prototype.onAfter = function(curr, next, opts, fwd) {
	var crt_img_src = next['src'];
	if( !this.image_titles[crt_img_src] ) {
		// compute and set now
		this.image_titles[crt_img_src] = this.getImageTitle(crt_img_src);
	}
	$(this.titleElm).html( this.image_titles[crt_img_src] );
	
	if($('#se_widget_see_more', this.titleElm).size() > 0) {
		$('img[src='+crt_img_src+']').css('cursor', 'pointer').attr('title', 'See more').click(function(){
			try {
				location.href = $('#se_widget_see_more', this.titleElm).attr('href');
			} catch(e) {}
		});
	} else {
		$('img[src='+crt_img_src+']').css('cursor', 'default').removeAttr('title').unbind('click');
	}
	
	// slide the bar back up
	// this.slideUpBar();
}

$.slideWidget.prototype.slideUpBar = function(timeout) {
	
	var that = this;
	
	if( $(this.barElm).is(':hidden') ) {
		setTimeout(function() { $(that.barElm).slideToggle(500);}, timeout);
		//setTimeout(function() { that.slideUp($(that.barElm), 850); }, timeout);
	} else {}

}

// sends commands to embedded cycle plugin (cmd = pause / resume / stop / destroy)
$.slideWidget.prototype.cycleCommand = function(cmd) {
	$(this.picContainer).cycle(cmd);
}

// custom slideUp
$.slideWidget.prototype.slideUp = function(target, speed, callBack) {
	var h = target.height();
	var cssHeight=target.css('height');
	target.animate( 
		{ height: '1px' }, speed, function() { 
		  target.hide();
		  target.height(h);
		  target.css('height', cssHeight);
		  if(callBack) callBack(); 
		} 
	);
}

// custom slideDown
$.slideWidget.prototype.slideDown = function(target, speed, callBack) {
	var h = target.height();
	var cssHeight = target.css('height');
	target.height('1px');
	target.css('height', '1px');
	target.show();
	target.animate({ height: h }, speed, function() {
		target.height(h);
		target.css('height', cssHeight);
		 if(callBack) callBack(); 
	});
}

$.slideWidget.prototype.doSlideDown = function(elem) {
	TINY.height.set(elem, 1, this.barSpeed/2, -1);
}

$.slideWidget.prototype.doSlideDownUp = function(elem, timeout) {
	var that = this;
	var e = typeof elem == 'object' ? elem : $tiny(elem);
	TINY.height.set(elem, 1, that.barSpeed/3, -1, function() { setTimeout(function(){ that.doSlideUp(elem); }, timeout)});
}

$.slideWidget.prototype.doSlideUp = function(elem) {
	var e = typeof elem == 'object' ? elem : $tiny(elem);
	var h=this.barHeight;
	TINY.height.set(e,h,this.barSpeed/2,0);
}