///<reference path="mootools.v1.11.js" />
var subMenu = new Class({
    initialize: function(){
		this.rootElt = $("sbmh");
		this.currentElt = this.currentLink = this.curimage = this.preloadImageOcc = false;
		this.populateMenu();
        this.currentView = 0;
        
    },
    populateMenu: function(){
        var imageToDisplay;
        this.rootElt.getElementsBySelector("li").each(function(el,i) {
            $extend($(el), this.createLibrary(el));
            if(i == 0) imageToDisplay = el;
            var linkElt = el.getElement("a");
            this.setInactive(el);
            if($chk(linkElt)){
                linkElt.href = "javascript:void(0)";
                linkElt.addEvent('click', this.menuclicked.pass(el,this));
                linkElt.addEvent('click',this.showSerie.pass(el,this));
            }
        },this);
        this.menuclicked(imageToDisplay);
        this.showSerie(imageToDisplay);
    },
    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, "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]);
    },
    showSerie : function (elt) {
        if(this.currentElt != elt) {
            this.currentView = 0;
            this.currentElt = elt;
            this.currentLink = false;
            //if(this.currentElt.library.length > 1){
                $("ctrlPH").setStyle("visibility","visible");
                this.createNumbers(this.currentElt);
            //} else {$("ctrlPH").setStyle("visibility","hidden");
              //  this.currentElt.numbers = [];this.getPos(0);
            //}
        }
     },
    createNumbers : function(curElt) {
        $("ctrlPH").empty();
        curElt.numbers = [];
        var it = 0;
        new Element("a").setText("Previous Image ").injectInside($("ctrlPH")).addEvent('click',this.getPrevPic.bind(this));
        while(it < curElt.library.length) {
               var aelt = new Element("a").setText((it+1)+" ");
               aelt.addEvent("mousedown", this.getView.pass([it,aelt],this)).injectInside($("ctrlPH"));
               if(it == 0) this.getView(0, aelt)
               curElt.numbers.push(aelt);
               it++;
         }
        new Element("a").setText(" Next image").injectInside($("ctrlPH")).addEvent('click',this.getNextPic.pass(false,this));
     },
     getView : function(num,aelt) {
        if($chk(this.currentElt) && $chk(this.currentElt.library[num])){
            this.showImage(this.currentElt.library[num]);
            if($chk(this.currentLink)) this.currentLink.removeClass("active");
            if($chk(aelt)){aelt.addClass("active"); this.currentLink = aelt;}
            this.currentView = num;
        }
     },
     getPos : function(num) {
        if($chk(this.currentElt) && $chk(this.currentElt.library[num])){
            var aelt = this.currentElt.numbers[num];
            this.showImage(this.currentElt.library[num]);
            if($chk(this.currentLink)) this.currentLink.removeClass("active");
            if($chk(aelt)){aelt.addClass("active"); this.currentLink = aelt;}
            this.currentView = num;
            return true;    
        } else return false;
     },
     getNextPic : function(inte) {
        if(this.getPos(this.currentView +1)) return;
        else if($type(inte) == 'boolean') this.getPos(0);
        else this.getNext(this.currentElt);
     },
     getPrevPic : function() {
        if(this.currentView -1 >=0) this.getPos(this.currentView -1);
     },
     showImage : function(imageObj) {
        if(this.curimage) this.curimage.setStyle("display","none");
        (function (imageObj) {
        if(!$chk(imageObj.image)) imageObj.image = new Asset.image(imageObj.src).addEvent('click',this.getNextPic.pass(false,this)).addClass("imgHolder");
        else imageObj.image.setStyle("display","block");
        imageObj.image.injectInside($("imagesPH")); 
        this.curimage = imageObj.image;
        this.curimage.setStyle("height","400px");
        if(window.ie6) this.curimage.setStyle("width","auto");
        if(this.currentElt.library.length <= 1) this.curimage.setStyle("cursor","default");
        }).delay(100,this,imageObj);
        $("legendPH").innerHTML = imageObj.legend;
     },
    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.showSerie(this.update(curElt.getNext()));
        else this.showSerie(this.update(curElt.getParent().getFirst()));
        //this.showSerie(this.update(curElt.getFirst()));
    },
    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]);}
    },
    preloadImage : function(imageObj) {
        this.preloadImageOcc = new Asset.image(src,{"style" : {"display" : "none"}}).addClass("mainImage");
    }
});
subMenu.implement(new Events);
var centeredImage = new Class({
    initialize: function(arrImg){
        
        this.movingContent = new Element("div", {styles :{"position" : "absolute", "white-space" : "nowrap"}}).injectInside($("animholder"));
        this.movingContent2 = new Element("div", {styles :{"position" : "absolute", "white-space" : "nowrap"}}).injectInside($("animholder"));
        this.totalWidth = 0;
        arrImg.each(function (el) {
            var imgocc = new Asset.image( el.src,{ "style" : {"border-right" : "20px solid white"}}).injectInside(this.movingContent);
            var imgocc2 = new Asset.image( el.src,{ "style" : {"border-right" : "20px solid white"}}).injectInside(this.movingContent2);
            imgocc.setStyle("border-right","5px solid white");
            imgocc2.setStyle("border-right","5px solid white");
            this.totalWidth = this.totalWidth + el.width
        },this);
        
        this.firstElt = this.movingContent;
		window.addEvent("load", function () {
		    this.marginChange = new Fx.Style(this.movingContent, 'left', {duration:this.totalWidth*15, transition:Fx.Transitions.linear});
		    this.marginChange2 = new Fx.Style(this.movingContent2, 'left', {duration:this.totalWidth*15, transition:Fx.Transitions.linear});
		    this.marginChange2.addEvent("onComplete", this.reinit.bind(this))
		    this.reinit();
		    }.bind(this))
		if (window.ie) window.fireEvent("load");
    },
    reinit: function() {
          if(this.firstElt != this.movingContent2) {
            this.movingContent2.setStyle("left",this.totalWidth);
            this.marginChange.start(0, -1*this.totalWidth);
            this.marginChange2.start(0);
            
            this.firstElt = this.movingContent2;
          } else {
              this.movingContent.setStyle("left",this.totalWidth);
              this.marginChange2.start(0, -this.totalWidth);
              this.marginChange.start(0);
              this.firstElt = this.movingContent;
          }
    }
});