var rem;
var image_stack = [];
var image_stack_index=0;
var pagi;
var histo;
var pos = 0;
var offset = 110;												 // HOW MUCH TO SLIDE WITH EACH CLICK
var currentslide = 1;
var imgscroll;
var slides;	
function updateImage(e) {
	var evt = new Event(e);
	evt.stop();
	var tar = new Element(evt.target);
	var partar = tar.getParent();
	var img = document.getElements('#pic1 img')[0];
	var fx = new Fx.Tween(img, {property:'opacity'});
	fx.start(1,0)
	.chain(
		function () {
			var ele = partar.getProperty('rel').split('|');
			img.set('src',ele[0]).set('height',ele[2]).set('width',ele[1]); //.setStyle(style,val+'px').setStyle(other,0+'px')								
			$('pic1').set('rel', "{'link','"+ele[0]+"'}")
			if(rem) {
				rem.link = ele[0];
			}
			//assign caption
			img.getParent().set('title',partar.get('title'));
			$('title1').set('html',partar.get('title'));
			//assign prev and next button
			//var rel2 = JSON.decode(partar.get('rel2'));
			$('prev_btn').set('rel', tar.get('prev'));
			$('next_btn').set('rel', tar.get('next'));
			
			img.setPosition({relativeTo: img.getParent(), position: 'center',ignoreMargins:'true'});
			this.start(0,1);
		}
	);
	
	
	var fx2 = new Fx.Morph(img, {duration: 200, transition: Fx.Transitions.Sine.easeOut});

}	

window.addEvent("domready", function() {
	if ($type(document.getElements('div#image_list .scrollKnob')[0])) {
		new MooScroller('list', document.getElements('div#image_list .scrollKnob')[0], {
			scrollLinks: {
				forward: document.getElements('#downlist')[0],
				back: document.getElements('#uplist')[0]
			}
		});
	}
	if ($type(document.getElements('div#image_list2 .scrollKnob')[0])) {
		/*new MooScroller('list', document.getElements('div#image_list2 .scrollKnob')[0], {
			wheel: false,
			mode: 'horizontal',
			width: 450,
			scrollLinks: {
				forward: document.getElements('#downlist')[0],
				back: document.getElements('#uplist')[0]
			}
		});
		*/
		slides = $('list').get('rel');	
		imgscroll = new Fx.Scroll('list', {
   			offset: {'x': 0, 'y': 0},
   			link: 'ignore',
   			transition: Fx.Transitions.Cubic.easeOut  				// HOW THE SCROLLER SCROLLS
		}).toLeft();
		
		$('uplist').addEvent('click', function(event) { event = new Event(event).stop();
			/*if(currentslide == 1) return;
			currentslide--;																	// CURRENT SLIDE IS ONE LESS
			*/
			//console.log('---------------------------');
			//console.log('UPLIST => offset: '+offset+', pos: '+pos+', slides: '+slides);
			pos += -(offset);															   // CHANGE SCROLL POSITION
			if(pos < 0) {
				
				//console.log('UPLIST => offset: '+offset+', pos: '+pos+', slides: '+slides);
				pos = 0;															   // CHANGE SCROLL POSITION
				//console.log('UPLIST => offset: '+offset+', pos: '+pos+', slides: '+slides);
				return
			}
			//alert('up '+pos);
			imgscroll.start(pos,0);														  // SCROLL TO NEW POSITION
		});
		$('downlist').addEvent('click', function(event) { event = new Event(event).stop();
			/*if(currentslide >= slides) return;
			currentslide++;
			*/
			//console.log('---------------------------');
			//console.log('DOWNLIST => offset: '+offset+', pos: '+pos+', slides: '+slides);
//			alert('down');
			pos += offset;
			if(pos >= (slides*(offset)-280)) {
				
				//console.log('DOWNLIST => offset: '+offset+', pos: '+pos+', slides: '+slides);
				pos += -(offset);															   // CHANGE SCROLL POSITION
				//console.log('DOWNLIST => offset: '+offset+', pos: '+pos+', slides: '+slides);
				
				return
			}
			//alert('down '+pos);
			imgscroll.start(pos,0);
		});
	}
	
	if ($type($('poster_list_content'))) {
		 new iCarousel("poster_list_content", {
	         idPrevious: "poster_list_previous",
	         idNext: "poster_list_next",
	         idToggle: "undefined",
	         item: {
	             klass: "poster_list_item",
	             size: 114
	         },
	         animation: {
	             duration: 1000,
	             amount: 1,
				 type: 'scroll'
	         }
	     });
	}
	if($type($('album_menu'))) {
		var mySlide = new Fx.Slide('album_menu', {
			onStart:function() {
				if(!mySlide.open) {
					$('cnt_album_menu').setStyle('z-index',100);
				}
			},
			onComplete:function() {
				if(!mySlide.open) {
					$('cnt_album_menu').setStyle('z-index',1);
				}
			}
		});
		mySlide.hide();
		$('album_menu').setStyle('display','block');
		$('album_button').addEvent('click', function(e){
			e = new Event(e);
			e.stop();
			mySlide.cancel();
			mySlide.toggle();

		});
	}
	
	if($type($$('.list_item'))) {
		$each($$('.list_item a'), function (el) {
			var rel2 = JSON.decode(el.get('rel2'));
			el.getElements('img')[0].set('prev',  rel2.prev);
			el.getElements('img')[0].set('next',  rel2.next);
			image_stack.push(el.getElements('img')[0]);
			el.setProperty('href','javascript:void(0)');
			el.addEvent('click',updateImage.bindWithEvent());
		});
	}
	if($type($$('.remooz')[0])) {
	  $each($$('#pic1'),function(element) {
	  		//center the image
	  		element.getElements('img')[0].setPosition({relativeTo: element, position: 'center',ignoreMargins:'true'});
	  		
	        // Constructor, takes the element and options as arguments
	        rem = new ReMooz(element, {
				'origin': 'img',
				'shadow': 'onOpenEnd', // fx is faster because shadow appears after resize animation
				'cutOut': false, // don't hide the original
				'parse': 'rel',
				'opacityResize': 0.4, // opaque resize
				'dragging': false, // disable dragging
				'centered': true, // resize to center of the screen, not relative to the source element
				'isopen':false,
				'temporary': true
			});
			$('mag_glass').addEvent('click', function () {
				if(rem.options.isopen) {
					rem.close.delay(1, rem);
					rem.options.isopen = false;
				}
				else {
					rem.open.delay(1, rem);
					rem.options.isopen = true;
				}
			});
	    });
	}
	if($type($('prev_btn'))) {
		$('prev_btn').addEvent('click', function (e) {
			var tar = new Event(e).target;
			updateImage(new Event({'type':'click', 'target':image_stack[tar.get('rel')]}));
			//pagi.by(-1);
		});
	}
	if($type($('next_btn'))) {
		$('next_btn').addEvent('click', function (e) {
			var tar = new Event(e).target;
			updateImage(new Event({'type':'click', 'target':image_stack[tar.get('rel')]}));
			//pagi.by(1);
		});
	}
	linkComments();
/*	if($type($('history'))) {
		HistoryManager.initialize();
	
		//pagi = new PaginationClass();
		var historyKey = this.page + '-image';
		histo = HistoryManager.register(
			historyKey,
			[0], // default, page 0
			function(values) {
				updateImage(new Event({'type':'click', 'target':image_stack[values[0]]}));
			},
			function(values) {
				return 'page-image(' + values[0] + ')';
			},
			/page-image\((\d+)\)/ // the regexp to match "page-index(0)"
		);		
		HistoryManager.start();
	}
	*/
});

function linkComments() {
	if($type($$('.pagediv a'))) {
		$$('.pagediv a').each(
			function(el) {
				el.addEvent('click',function(e) {
					var evt = new Event(e).stop();
					new Request({
						method:'get',
						url:$(evt.target).href,
						onComplete:function(txt) {
							$('comments').set('html',txt);
							linkComments();
						}
					}).send();						
				});
			});
	}		
}