var EditNivooSlider = new Class({
	Extends : NivooSlider,


	slides_list : [],

	container_loader: null,
	children	: [],

	options: {
		startInd: 0,
		pic_text_field_name: 'img_text',
		clickEvent : 'sqBox',
		autoPlay: false,
		visible_image_id : 'EditNivooSlider'
	},
	ImageClicked: $empty,

	initialize: function(container, options)
	{
		//this.parent(container, options);
		this.container = $(container);
		this.containerSize = this.container.getSize();
		this.setOptions(options);
		if (this.options.clickEvent == 'sqBox') this.ImageClicked = this.show_sq_box;
		if (this.options.clickEvent == 'link') this.ImageClicked = this.go_to_img_link;
		if (this.options.clickEvent == 'nextPic') this.ImageClicked = this.go_to_next_img;
		/*this.initSlider();
		this.createSlices();
		if(this.options.autoPlay)
		{
			this.play();
		}*/
	},

	loadSlices: function(){
		this.container.addClass('nivoo-loader');
		if (this.options.jsonSlices != ''){
			var jsonRequest = new Request.JSON({ url: this.options.json_src+'&pic_width='+ (this.options.pic_w || this.containerSize.x) + '&pic_height='+ (this.options.pic_h || this.containerSize.y), onSuccess: function (json_obj, text){
				this.gallery_json = json_obj;
				for (var $i = 0; $i < json_obj.images.length; $i ++){
					var _$img_params = {'src': json_obj.images[$i].img_src.CTADA, 'title': json_obj.images[$i][this.options.pic_text_field_name].CTADA};
					if (json_obj.images[$i]['img_link']){
						_$img_params['href'] = json_obj.images[$i]['img_link'].CTADA;
						_$img_params['target'] = json_obj.images[$i]['img_link'].target;
					}
					var _$tmp_img = new EditImage({}, _$img_params);
					if ($i == this.options.startInd) _$tmp_img.addEvent('load', this.initSlider.bind(this));
					_$tmp_img.load();
					this.children.push(_$tmp_img.img);
					this.slides_list.push(_$tmp_img);
				}
				this.totalSlides = json_obj.images.length;
			}.bind(this)}).get();
		} else {
			throw ('Missing JSON file definition');
		}
	},
	/*first_image_loaded: function(){

	},*/

	initSlider: function()
	{
		this.currentImage = this.children[this.options.startInd];

		this.fireEvent('initSlider', [this.gallery_json, this]);
		this.container.removeClass('nivoo-loader');
		this.container.addClass('nivooSlider');

		this.containerSize = this.container.getSize();

		this.print_image = new Element('img', {'id' : this.options.visible_image_id, 'src': this.currentImage.get('src'), 'styles': {'width': (this.options.pic_w || this.containerSize.x) + 'px', 'height': (this.options.pic_h || this.containerSize.y) + 'px', 'display': 'none'}})
		this.print_image.inject(this.container);

		this.container_loader = new Element('div', {'styles': {'width': this.containerSize.x, 'height': this.containerSize.y}});
		this.container_loader.inject(this.container);

		if (this.options.onImageClicked != $empty) this.container.addClass('hand_hover');

		// Find our slider children
		//this.children = this.getImages();

		//this.totalSlides = this.children.length;

		//this.children.setStyle('display','none');


		// init LinkHolder
		this.createLinkHolder();

		// Set first background
		this.container.setStyle('background-image', 'url('+this.currentImage.get('src')+')');
		if(this.currentImage.get('href') != '')
		{
			this.linkHolder.setStyle('display', 'block').set('href', this.currentImage.get('href'));
		}
		else
		{
			this.linkHolder.setStyle('display', 'none');
		}
		this.container.addEvent('click', this.img_click.bind(this));

		this.createCaption();

		this.showCaption();

		// attach pauseOnHover
		if(this.options.pauseOnHover && this.options.autoPlay)
		{
			this.container.addEvents({
				'mouseenter': this.pause.bindWithEvent(this),
				'mouseleave': this.play.bindWithEvent(this)
			});
		}

		// create directional navigation
		if(this.options.directionNav && this.gallery_json.images.length > 1)
		{
			this.createDirectionNav();
		}
		if(this.options.autoPlay)
		{
			this.play();
		}
		this.createSlices();
	},

	img_click : function() {
		this.ImageClicked(this.currentSlide, this.currentImage, this.gallery_json);
		this.fireEvent('imageClicked', [this.currentSlide, this.currentImage, this.gallery_json, this]);
	},
	show_sq_box: function($slideNr, $img, $json){
		var pic_width = $json.images[$slideNr].big_img.width;
		var pic_height = $json.images[$slideNr].big_img.height;
		var pic_src = $json.images[$slideNr].big_img.src;
		var wraper = new Element('div', {id:'img_wraper', styles:{'width' : pic_width+'px', 'overflow':'hidden'}});
		var bilde = new Element('img', {'src': pic_src, 'styles': { 'width':pic_width+"px"}});
		//var text_dic = new Element('div', {html:$(img).get('bilde_text'), styles:{height:'20px', 'overflow':'hidden'}});
		bilde.inject(wraper);
		//text_dic.inject(wraper);
		SqueezeBox.fromParams({handler:'div', size:{x:pic_width+0,y:pic_height}, div_cont:wraper, divOptions:{styles:{overflow:'hidden'}}, onClose:function(){
			var bilde_f = bilde;
			var wraper_f = wraper;
			delete bilde_f;
			delete wraper_f;
		}});

	},
	go_to_next_img: function(){ // someone else could implement this one.
		if (this.currentSlide + 1 > this.slides_list.length - 1) this.slide(0);
		else this.slide(this.currentSlide + 1);
	},
	go_to_prev_img: function(){ // someone else could implement this one.
		if (this.currentSlide - 1 < 0) this.slide(this.slides_list.length - 1);
		else this.slide(this.currentSlide - 1);
	},
	go_to_img_link: function(){ // someone else could implement this one.

	},

	slide: function(slideNo)   // someone has to fix this function without so manyyyy if. AND then we can call tibeNivoo slider not som 3third part
	{
		if(this.running)
		{
			return;
		}
		if($defined(slideNo))
		{
			this.currentSlide = slideNo;
		}

		// Set currentImage
		this.currentImage = this.children[this.currentSlide];
		this.print_image.set('src', this.currentImage.get('src'));

		if(this.currentImage.get('href') != '')
		{
			this.linkHolder.setStyle('display', 'block').set('href', this.currentImage.get('href'));
		}
		else
		{
			this.linkHolder.setStyle('display', 'none');
		}

		// Process caption
		this.hideCaption();
		this.showCaption();

		var slices = this.getSlices();
		var timeBuff = 0;

		//Set new slice backgrounds
		var orientation = this.options.orientation;

		slices.each(function(slice, i){

			var position =  slice.retrieve('position');
			slice.setStyles({
				background: 'url('+this.currentImage.get('src')+') no-repeat -'+ position.left +'px '+ position.top*-1 +'px',
				opacity: 0
			});

			var property = orientation == 'horizontal' ? 'width' : 'height';

			slice.setStyle(property, 0);
		}, this);

		// fire onStart function
		this.start();

		// Run effects
		this.running = true;

		var effect = this.options.effect;
		if(effect == 'random')
		{
			effect = this.effects[orientation].getRandom();
		}

		// vertical effects
		if(['sliceDownRight', 'sliceDownLeft'].contains(effect))
		{
			if(effect == 'sliceDownLeft')
			{
				slices = slices.reverse();
			}

			slices.each(function(slice, i){
				slice.setStyle('top', 0);

				this.animate.delay(100 + timeBuff, this, [slice, 'height', this.containerSize.y]);

				timeBuff+= 50;
			}, this);
		}
		else if(['sliceUpRight', 'sliceUpLeft'].contains(effect))
		{
			if(effect == 'sliceUpLeft')
			{
				slices = slices.reverse();
			}

			slices.each(function(slice, i){
				var fx = slice.retrieve('fxInstance');

				slice.setStyle('bottom', 0);

				this.animate.delay(100 + timeBuff, this, [slice, 'height', this.containerSize.y]);

				timeBuff+= 50;
			}, this);
		}
		else if(['sliceUpDownRight', 'sliceUpDownLeft'].contains(effect))
		{
			if(effect == 'sliceUpDownLeft')
			{
				slices = slices.reverse();
			}

			slices.each(function(slice, i){
				if(i%2 == 0)
				{
					slice.setStyle('top', 0);
				}
				else
				{
					slice.setStyle('bottom', 0);
				}

				this.animate.delay(100 + timeBuff, this, [slice, 'height', this.containerSize.y]);

				timeBuff+= 50;
			}, this);
		}

		// horizontal effects
		else if(['sliceLeftUp', 'sliceLeftDown' , 'sliceRightDown', 'sliceRightUp'].contains(effect))
		{
			if(effect == 'sliceLeftUp' || effect == 'sliceRightUp')
			{
				slices = slices.reverse();
			}

			if(effect == 'sliceRightDown' || effect == 'sliceRightUp')
			{
				slices.setStyle('right', 0);
			}
			else
			{
				slices.setStyle('left', 0);
			}

			slices.each(function(slice, i){
				this.animate.delay(100 + timeBuff, this, [slice, 'width', this.containerSize.x]);

				timeBuff+= 50;
			}, this);
		}
		else if(['sliceLeftRightDown', 'sliceLeftRightUp'].contains(effect))
		{
			if(effect == 'sliceLeftRightUp')
			{
				slices = slices.reverse();
			}

			slices.each(function(slice, i){
				if(i%2 == 0)
				{
					slice.setStyle('left', 0);
				}
				else
				{
					slice.setStyle('right', 0);
				}

				this.animate.delay(100 + timeBuff, this, [slice, 'width', this.containerSize.x]);

				timeBuff+= 50;
			}, this);
		}

		// horizontal or vertical
		else if(effect == 'fold')
		{
			slices.each(function(slice, i){
				if(orientation == 'horizontal')
				{
					var property = 'height';
					var to = slice.getHeight();

					slice.setStyles({
						height: 0,
						width: this.containerSize.x
					});
				}
				else
				{
					var property = 'width';
					var to = slice.getWidth();

					slice.setStyles({
						height: this.containerSize.y,
						top: 0,
						width: 0
					});
				}

				this.animate.delay(100 + timeBuff, this, [slice, property, to]);
				timeBuff+= 50;
			}, this);
		}
		else  // if(effect == 'fade')
		{
			slices.each(function(slice, i){
				if(orientation == 'horizontal')
				{
					slice.setStyle('width', this.containerSize.x);
				}
				else
				{
					slice.setStyle('height', this.containerSize.y);
				}
				this.animate.delay(100, this, [slice]);
			}, this);
		}
	},
	setCaptionText: function(text){
		this.caption.set('html', text);
	}
});

/* dummy class for load pictures in background */
var EditImage = new Class({

	Implements: [Events, Options],

	options: {
	},

	cont_tag: null,
	img    : null,
	img_tag: {},
	image_loaded: false,

	initialize: function(options, $img_tag)
	{
		this.setOptions(options);
		$extend(this.img_tag, $img_tag);
	},
	load: function(){
		if (this.cont_tag == null){
			this.cont_tag = $('dummy-hidden-loding-cont');
			if (this.cont_tag == null){
				this.cont_tag = new Element('div', {
					'id'	: 'dummy-hidden-loding-cont',
					'styles': {
						'overflow': 'hidden',
						'width': '0px',
						'height':'0px',
						'visibility': 'hidden',
						'opacity': '0'
						}
				});
				$$('body').grab(this.cont_tag);
			}
		}
		this.img = new Element('img', this.img_tag);
		this.img.addEvent('load', this.imageLoaded.bind(this));
		this.img.inject(this.cont_tag);
	},
	imageLoaded: function(){
		this.image_loaded = true;
		this.fireEvent('load', [this.img, this]);
	}
});