/*  
JAVASCRIPT IMAGE GALLERY W/ mootools
Description: A easy, non destructive javascript image gala.
Version: 1.1
Author: Devin Ross
Author URI: http://tutorialdog.com
Version: 1.2-by Beli
Skiptu unaprijedio Beli
Dodato ucitavanje videa i sredjeni neki bagovi.
*/

/*
Release notes:
	1.1 - Adds loading animation, and properly fades in images when fully loaded
	1.1.1 - Fixes displaying description, Fades out current image, Works with Mootools 1.2
	1.1.2 - 
*/

window.addEvent('domready', function() {
		
		
		// CHANGE THIS !!
		var slides = 2;		// NUMBER OF SLIDES IN SLIDESHOW, CHANGE ACCORDINGLY
		
		var pos = 0;
		var offset = 378;	// HOW MUCH TO SLIDE WITH EACH CLICK
		var currentslide = 1;	// CURRENT SLIDE IS THE FIRST SLIDE
		var inspector = $('fullimg');	// WHERE THE LARGE IMAGES WILL BE PLACE	
		var video= $('video1'); //mjesto gdje se smjesta video
		var fx = new Fx.Morph(inspector, {duration: 300, transition: Fx.Transitions.Sine.easeOut});
 		var fx2 = new Fx.Morph(inspector, {duration: 200, transition: Fx.Transitions.Sine.easeOut});

		
		/* THUMBNAIL IMAGE SCROLL */
		var imgscroll = new Fx.Scroll('wrapper', {
   			offset: {'x': 0, 'y': 0},
   			transition: Fx.Transitions.Cubic.easeOut	// HOW THE SCROLLER SCROLLS
		}).toLeft();

	
		/* EVENTS - WHEN AN ARROW IS CLICKED THE THUMBNAILS SCROLL */
		$('moveleft').addEvent('click', function(event) { event = new Event(event).stop();
			if(currentslide == 1) return;
			currentslide--;					// CURRENT SLIDE IS ONE LESS
			pos += -(offset);				// CHANGE SCROLL POSITION
			imgscroll.start(pos);			// SCROLL TO NEW POSITION
		});
		$('moveright').addEvent('click', function(event) { event = new Event(event).stop();
			var brojsl=$('moveright').getElement('H2');
			slides=brojsl.get('text')/4;
			if(currentslide >= slides) return;
			currentslide++;
			pos += offset;
			imgscroll.start(pos);
		});
		
		/* WHEN AN ITEM IS CLICKED, IT INSERTS THE IMAGE INTO THE FULL VIEW DIV */
		$$('.item').each(function(item){ 
			item.addEvent('click', function(e) { 
				e = new Event(e).stop();
				fx2.start({ 
					'opacity' : 0													
				}).chain(function(){
					
					inspector.empty();		// Empty Stage
					var loadimg = 'gal/images/ajax-loader.gif';	   // Reference to load gif
					var load = new Element('img', { 'src': loadimg, 'class': 'loading' }).inject(inspector); 
					fx2.start({ 'opacity' : 1 });
					
					var largeImage = new Element('img', { 'src': item.href }); // create large image
					
					var vid = item.getElement('H1');
					if(vid){
					//video.empty();
					var linkv=vid.get('text');

				var largeImage = new Swiff('http://www.youtube.com/v/'+linkv+'&autoplay=1&fs=1&color1=0x'+000+'&color2=0x'+000, {
					id: '0_BQbigpgsY',
					width: 406,
					height: 302,
					params: {allowscriptaccess: 'always', allowfullscreen: 'true'}
					});
				
//					var put = 'http://www.youtube.com/v/0_BQbigpgsY&hl=en&fs=1';
//					var sirina='406';
//					var visina='302';
//					var tip='application/x-shockwave-flash';
//					var dozvola='always';
//					var cijeli='true';
					//var largeImage = new Element('embed', { 'src': put, 'width': sirina, 'height': visina, 'type': tip, 'allowscriptaccess': dozvola, 'allowfullscreen': cijeli});
	//				var objekat = new Element('div', {'width': sirina, 'height': visina}); 

					//var largeImage = new Element('embed', { 'src': put, 'width': sirina, 'height': visina, 'type': tip, 'allowscriptaccess': dozvola, 'allowfullscreen': cijeli}).inject(objekat);


				
				
//var zaglavlje=document.createElement('embed');
//document.getElementById("video1").getElementsByTagName("embed").item(6).attributes="http://www.youtube.com/v/0_BQbigpgsY&hl=en&fs=1";
//document.getElementById('video1').removeChild('embed')
//document.getElementById('video1').appendChild(zaglavlje);
//largeVideo.inject(video);


					//var largeVideo = new Element('embed', { 'src': 'http://www.youtube.com/v/0_BQbigpgsY&hl=en&fs=1', 'width': 406, 'height': 302, 'type': 'application/x-shockwave-flash', 'allowscriptaccess': 'always', 'allowfullscreen': 'true', 'autoplay': 1});
					//var largeImage = new Element('embed', { 'src': 'http://www.youtube.com/v/0_BQbigpgsY&hl=en&fs=1'});

				//largeVideo.inject(video);
				//video=LargeVideo;
				//var largeImage = new Element('img', { 'src': 'http://farm1.static.flickr.com/27/36392248_964e721d6d.jpg'});


//var largeVideo = new Element('embed', { 'width': 406 });
//		var largeVideo = new Element('embed', { 'height': 302 });
//					var largeVideo = new Element('embed', { 'type': 'application/x-shockwave-flash' }).inject(video);
	//				var largeVideo = new Element('embed', { 'allowscriptaccess': 'always' }).inject(video);
		//			var largeVideo = new Element('embed', { 'allowfullscreen': 'true' }).inject(video);
					//largeVideo = new Element('embed', { 'src': item.href });
					//largeVideo = new Element('embed', { 'type': 'application/x-shockwave-flash' });
				    
					}
					
					/* When the large image is loaded, fade out, fade in with new image */
					//largeImage.onload = function(){  // While this line of code causes the images to load/transition in smoothly, it cause IE to stop working
						fx.start({ 
							'opacity' : 0													
						}).chain(function(){
							inspector.empty();	           				// empty stage
							var description = item.getElement('span');	// see if there is a description
							
							if(description)					   

							var des = new Element('p').set('text', description.get('text')).inject(inspector);
//							var des = new Element('p').set('text', slides).inject(inspector);
									
							largeImage.inject(inspector); // insert new image
							fx.start({'opacity': 1});	 // then bring opacity of elements back to visible				
						});
					//};
					
				});
			});
		});

		// INSERT THE INITAL IMAGE - LIKE ABOVE
		inspector.empty();
		var description = $('first').getElement('span');
//		if(description) var desc = new Element('p').setHTML(description.get('html')).inject(inspector);
		if(description) var desc = new Element('p').set('text', description.get('text')).inject(inspector);
		var largeImage = new Element('img', {'src': $('first').href}).inject(inspector);
	
});