///<reference path="mootools.v1.11.js" />

var subMenu = new Class({
    initialize: function(){
		this.submenuimages = [];
		this.rootElt = $("sbmh");
		$extend(this, { "rootElt": this.rootElt});
		this.effect = new Fx.Style(this.rootElt, 'opacity', {duration:1000});
		this.effectfast = new Fx.Style(this.rootElt, 'opacity', {duration:100});
		this.populateMenu();
    },
    populateMenu: function(){
        this.rootElt.getElementsBySelector("li").each(function(el) {
            var optionsElt = el.getElement("span.options");
            $extend($(el), this.createOptions(optionsElt));
            $extend($(el), this.createLibrary(optionsElt));
            if($chk(el.rolledImage)) this.submenuimages.push(el.rolledImage);
            var linkElt = el.getElement("a");
            this.setInactive(el);
            if($chk(linkElt)){
                linkElt.href = "#";
                linkElt.addEvent('click', this.menuclicked.pass(el,this));
                linkElt.addEvent('mouseenter', this.menuOver.pass(el,this));
                linkElt.addEvent('mouseleave', this.menuLeave.pass(el,this));
                if($(el).label != ""){
                    linkElt.addEvent('click', this.contentObject.getcontent.pass(el,this.contentObject));
                    linkElt.href = "#lbl" + $(el).label;
                }
            }
        },this);
    },
    createOptions : function (elt) {
        var label, rolledImage, rolledImageWidth;
        label = rolledImage = "";
        rolledImageWidth = 0;
        if($chk($E("span.label",elt))) label = $E("span.label",elt).innerHTML;
        if($chk($E("span.rolledImageWidth",elt))) rolledImageWidth = $E("span.rolledImageWidth",elt).innerHTML;
        if($chk($E("span.rolledImage",elt))) {
            rolledImage = new Element("div").setStyles({width : rolledImageWidth.toInt(), margin : 0, padding : 0,"background-color" : "#444444"});
            rolledImage.innerHTML = "<img src='assets/blank.gif' style='width:100%;height:100%' />";
            rolledImage.image = new Asset.image($E("span.rolledImage",elt).innerHTML,{
                onload : function(parentrolled){
                    parentrolled.empty(); (function(){this.image.injectInside(this)}).delay(10,parentrolled)
                    }.pass(rolledImage)
                });
            }
        var optobj = {"label" : label, "rolledImage" : rolledImage, "rolledImageWidth" : rolledImageWidth}
        return optobj;
    },
    createLibrary : function (elt) {
        var libraryElt = [];
        if($chk($E("span.library",elt))) $E("span.library",elt).getElementsBySelector("span.image").each(function(curelt) { libraryElt.push({ "src" : $E("span.src",curelt).innerHTML,"width" : $E("span.width",curelt).innerHTML, "legend" : $E("span.legend",curelt).innerHTML}); },this);
        return {"library" : libraryElt}
    },
    menuclicked: function(elt){
        elt.addClass("visited");
        this.update(elt);
        this.fireEvent('onPageChange');
        this.fireEvent('onMenuClicked', [elt,0]);
        this.hidesub(true);
    },
    menuOver:function(elt){
        this.fireEvent('over', elt);
    },
    menuLeave:function(elt){
        this.fireEvent('out', elt);
    },
    update: function(elt) {
        if(elt != this.currentElement && !elt.hasClass('active')) {
            if($chk(this.currentElement)) this.setInactive(this.currentElement);
            elt = $(elt);
            this.currentElement = elt;
            this.setActive(elt);
        }
        return elt;
    },
    setActive: function(elt) {
        elt.addClass('active');
    },
    setInactive: function(elt) {
        elt.removeClass('active');
    },
    getNext : function(curElt){
        if(curElt.getNext()) this.fireEvent("onMenuClicked",[this.update(curElt.getNext()),0]);
        else this.fireEvent("onMenuClicked",[this.update(curElt.getParent().getFirst()),0]);
        this.showsub().chain(function () {this.hidesub.delay(3000,this)}.bind(this));
    },
    getPrevious : function(curElt){
        if(curElt.getPrevious()) this.fireEvent("onMenuClicked",[this.update(curElt.getPrevious()),curElt.getPrevious().library.length - 1]);
        else {this.fireEvent("onMenuClicked",[this.update(curElt.getParent().getLast()),curElt.getParent().getLast().library.length - 1]);}
        this.showsub().chain(function () {this.hidesub.delay(3000,this)}.bind(this));
    },
    showsub : function(fast) {
        this.effect.stop();
        this.effectfast.stop();
        if(fast) return this.effectfast.start(0.99);
        else return this.effect.start(0.99);
        
    },
    hidesub : function(fast) {
        this.effect.stop();
        this.effectfast.stop();
        if(fast) return this.effectfast.start(0);
        else return this.effect.start(0);
    }
});
subMenu.implement(new Events);
var centeredImage = new Class({
    initialize: function(submenuObject,options){
        this.setOptions({
            startupPreview : false,
            startupPreviewWidth : false
		}, options);
		this.mainContent = $("mainContent");
		this.mainpanel = $("imageContainer");
		this.mainpanel.empty();
		$("numbers").empty();
		this.numberspanel = new Element("div").setStyle("display","none").injectInside($("numbers"));
		
		this.leftLink = new Element("a").addClass("leftnumbersLink").injectInside(this.numberspanel);
		this.LefArr = new Element("a").addClass("AL").injectInside(this.leftLink).addEvent("click", this.getPrevious.bind(this));
		this.leftnumber = new Element("span").addClass("number").addEvents({"click" : this.getPrevious.bind(this),
		    "mouseover" : function () {this.LefArr.addClass("ALactive");}.bind(this),
		    "mouseout" : function () {this.LefArr.removeClass("ALactive");}.bind(this)}).injectInside(this.leftLink);
		
		new Element("span").addClass("slash").injectInside(this.numberspanel);
		
		this.rightLink = new Element("a").addClass("rightnumbersLink").injectInside(this.numberspanel);
		this.rightnumber = new Element("span").addClass("number").injectInside(this.rightLink);
		this.RigArr = new Element("a").addClass("AR").injectInside(this.rightLink).addEvent("click", this.getNext.bind(this));
		this.rightnumber.addEvents({"click" : this.getNext.bind(this),
		    "mouseover" : function () {this.RigArr.addClass("ARactive");}.bind(this),
		    "mouseout" : function () {this.RigArr.removeClass("ARactive");}.bind(this)})
		
		
		this.mainImagePreview = new Element("div").setStyles({margin : 0, padding : 0}).injectInside(this.mainpanel);
		this.mainImage = new Element("div").setStyles({margin : 0, padding : 0}).injectInside(this.mainpanel).addEvent("click",this.getNext.bind(this));
		this.subMenuObject = submenuObject;
		this.subMenuObject.addEvent("over",this.showRolledImage.bind(this));
		this.subMenuObject.addEvent("out",this.hideRolledImage.bind(this));
		this.subMenuObject.addEvent("onMenuClicked",this.showSerie.bind(this));
		
		this.loadingDiv = new Element('div',{'id' : 'loadingIcon', 'class' : 'contentpage'}).injectInside(this.mainpanel);
		this.hideLoading();
		this.currentElt = [];
		this.currentImage = 0;
		var rolledImage;
		if(this.options.startupPreview) {
		    rolledImage = new Element("div").setStyles({ margin : 0, padding : 0,"background-color" : "#444444"});
            rolledImage.innerHTML = "<img src='assets/blank.gif' style='width:100%;height:100%' />";
            rolledImage.image = new Asset.image(this.options.startupPreview, { onload : function(parentrolled){
                    parentrolled.empty();(function(){this.image.injectInside(this)}).delay(10,parentrolled)
                    }.pass(rolledImage)
                    });
            this.subMenuObject.submenuimages.include(rolledImage);
        }
		this.populate();
		if(this.options.startupPreview) this.showRolledImage({"rolledImage" : rolledImage,"rolledImageWidth" : this.options.startupPreviewWidth});
    },
    populate : function (){
        this.subMenuObject.submenuimages.each(function(elt){elt.setStyle("display","none").injectInside(this.mainImagePreview);},this);
    },
    showRolledImage : function (elt){
        if(elt.rolledImage) {if(this.preview && this.preview != elt.rolledImage) this.preview.setStyle("display","none");elt.rolledImage.setStyle("display","block");this.mainContent.setStyle("width",(elt.rolledImageWidth.toInt()+18*2)+"px");this.hideImage(); this.preview = elt.rolledImage;this.showPreview();}
    },
    showSerie : function (elt,num) {        
        if(elt.library) {this.currentElt = elt.library; this.currentMenu = elt; this.updateNumbers();this.currentImage = num;this.getImage(this.currentElt[num].src,this.currentElt[num].legend,this.currentElt[num].width)}
    },
    hideRolledImage : function (evt){
        if($chk(this.curimage)){
            this.hidePreview();
            this.showImage();
            if(!this.firstsubclicked){
                $("textBottom").setStyle("visibility","visible");$("legendText").setStyle("visibility","visible");
                $("textLeft").addEvent("mouseenter",function () {this.subMenuObject.showsub()}.bind(this));
                $("textLeft").addEvent("mouseleave",function () {this.subMenuObject.hidesub()}.bind(this));
                this.firstsubclicked = true;
            }
        }
    },
    showImage : function (){
        this.mainImage.setStyle('display','block');
        if($chk(this.curimage)) this.mainContent.setStyle("width",(this.curimage.getStyle("width").toInt()+18*2)+"px");
        
    },
    hideImage : function () {
        this.mainImage.setStyle('display','none');
    },
    showPreview : function (){
        this.mainImagePreview.setStyle('display','block');
    },
    hidePreview : function (){
        this.mainImagePreview.setStyle('display','none');
    },
    showLoading : function (){
        this.loadingDiv.setStyle('display','block');
    },
    hideLoading : function (){
        this.loadingDiv.setStyle('display','none');
    },
    getImage : function (src,legend,width) {
        this.hidePreview();
        this.showImage();
        if($chk(this.curimage)) this.curimage.setStyle("display", "none");
        if($chk(this.curimage) && !window.gecko) this.curimage.remove();
        $("legendText").innerHTML = legend;
        this.mainContent.setStyle("width",(width.toInt()+18*2)+"px");
        this.mainImage.setStyle("width",(width.toInt())+"px");
        if($chk(this.preloadImageOcc) && (this.preloadImageOcc.getProperty("src") == src)) {this.curimage = this.preloadImageOcc.injectInside(this.mainImage).setStyles({width : width.toInt(), height : 500}); this.preloadImageOcc = null;}
        else this.curimage = new Element("img").addClass("mainImage").setProperty("src",src).setStyles({"display":"none",width : width.toInt(), height : 500}).injectInside(this.mainImage);
        this.curimage.setStyle("display","block");
        this.updateNumbers();
        
    },
    preloadImage : function(src) {
        this.preloadImageOcc = new Asset.image(src,{"style" : {"display" : "none"}}).addClass("mainImage");
    },
    getNext : function() {
		if(this.currentImage+1 <this.currentElt.length){
		    this.currentImage+=1;
		    var curImageElt = this.currentElt[this.currentImage];
		    this.getImage(curImageElt.src, curImageElt.legend,curImageElt.width);
		} else this.subMenuObject.getNext(this.currentMenu);
		if(this.currentImage+1 <this.currentElt.length) this.preloadImage(this.currentElt[this.currentImage+1].src)
    },
    getPrevious : function() {
        if(this.currentImage > 0){
            this.currentImage-=1;
		    var curImageElt = this.currentElt[this.currentImage];
		    this.getImage(curImageElt.src, curImageElt.legend,curImageElt.width);
		} else this.subMenuObject.getPrevious(this.currentMenu);
    },
    updateNumbers : function(){
        this.leftnumber.setStyle("background-position","left -" + this.currentImage*15 +"px");
        this.rightnumber.setStyle("background-position","left -" + (this.currentElt.length-1)*15 +"px");
        this.numberspanel.setStyle("display","block");
    }
});
centeredImage.implement(new Events);
centeredImage.implement(new Options);