var gStartMonthMenuTimeOutId;
var gChooseMenuTimeOutId;

// extentions for scriptaculous dragdrop.js
Object.extend(Class, {
    superrise: function(obj, names){
        names.each( function(n){ obj['super_' + n] = obj[n] } )
        return obj;
    }
});

// Draggable that allows substitution of draggable element
var SubsDraggable = Class.create();
SubsDraggable.prototype = Object.extend({}, Draggable.prototype);
Class.superrise(SubsDraggable.prototype, ['initialize', 'initDrag', 'finishDrag'])
Object.extend( SubsDraggable.prototype , {
    initialize: function(event) {
    this.super_initialize.apply(this, arguments);
        if( typeof(this.options.dragelement) == 'undefined' ) this.options.dragelement = false;
    },
    initDrag: function(event) {
    this.dragging = true;
    if( this.options.dragelement ){
            this._originalElement = this.element;
            this.element = this.options.dragelement(this.element);
            Position.absolutize(this.element);
            Position.clone(this._originalElement, this.element);
        }
    this.super_initDrag(event);
    },

    finishDrag: function(event, success) {
    this.dragging = false;
    this.super_finishDrag(event, success);
        if( this.options.dragelement ){
            Element.remove(this.element);
            this.element = this._originalElement;
            this._originalElement = null;
        }
    }
});

/////////////////////////////////
// EXAMPLE
// gets element that should be dragged instead of original element
// returned element should be added to DOM tree, and will be deleted by dragdrop library
function getDragElement(element){
    var el = element.cloneNode(true);
    el.id = '';
//     $('center3Col').appendChild(el);
    document.body.appendChild(el);
    //or document.body.appendChild(el), but I used some div in tree to keep element CSS classes work
//     if( MANY ){
//         el.innerHTML = "[" + MANY_N + " elements]";
//     }
    return el;
}

saveColor = function() {
    var color = $('colorSelector').value;
//     if (color.length != 6) {
//         color = 'D3005F';
//     }
    var url = '/visualprints/ajax/save-color/color/' + color;
    new Ajax.Request(url, {method: 'get'});
//     $('colorBox').setStyle({backgroundColor: '#' + color});
}

Event.observe(window, 'load', function() {
    if ($('myAlbum')) {
        var urlParams = document.URL.split('/');
        var nbParams = urlParams.length;
        for (var i = 0; i < nbParams; i++) {
            if (urlParams[i] == 'scrollTop' && parseInt(urlParams[i + 1]) > 0) {
                var scrollTop = parseInt(urlParams[i + 1]);
                $('rightColContent').scrollTop = scrollTop;
                break;
            }
        }
    }

    if ($('seePreview')){
            $('seePreview').observe('click', function(event) {
                popupSlideshow('');
                var url_create_preview = '/visualprints/ajax/publication-create-preview';
                new Ajax.Request(url_create_preview, {
                    method: 'post',
                    onComplete: function(transport) {
                        var response = transport.responseText;
                        if (response == 'OK') {
                            var url_preview = '/visualprints/ajax/publication-preview';
                            popupSlideshow(url_preview);
                        }
                    }/*,
                    asynchronous: false*/
                });
                Event.stop(event);
            });
    }

//     if ($('seePreview')){
//             $('seePreview').observe('click', function(event) {
//                 initPopupSlideshow();
//                 var url_create_preview = '/visualprints/ajax/publication-create-preview';
//                 new Ajax.Request(url_create_preview, {
//                     method: 'post',
//                     onComplete: function(transport) {
//                     var url_preview = '/visualprints/ajax/publication-preview';
//                     loadSlideshowPage(event,url_preview,0);
//                     }
//                 });
//                 Event.stop(event);
//             });
//     }
});

setDroppablesListeners = function() {
    var blocks = $('workPage').getElementsByClassName('droppable');
    for (var i = 0; i < blocks.length; i++) {
        var current_block = ($(blocks[i]));
        Droppables.add($(blocks[i]), {
            accept: 'albumPicture',
            hoverclass: 'blockHover',
            onHover: function(element, droppableElement) {
              $(droppableElement).setStyle({backgroundImage: 'none'});
//               alert($(droppableElement).readAttribute('seq'));
            },
            onDrop: function(element, droppableElement) {
                $('pageBody').setStyle({
                  cursor: 'wait'
                });
                var seq = parseInt($(droppableElement).readAttribute('seq'));
                var pictureId = parseInt($(element).readAttribute('picture'));
                var url = document.URL;
                var tmp = url.split('\/');
                var xprints = tmp[3];
                if (xprints != 'visualprint' && xprints != 'visualprints')
                  var url = '/' + xprints +'/visualprints/ajax/drop-picture-in-block/seq/' + seq + '/pictureId/' + pictureId;
                else
                  var url = '/visualprints/ajax/drop-picture-in-block/seq/' + seq + '/pictureId/' + pictureId;
//                 new Ajax.Updater('workPage', url, {
//                     method: 'get',
//                     onComplete: function() {
//                         setDroppablesListeners();
// //                         var htmlFinalize = viewFinalizePublication();
//                         // afficher bloc texte sur derniere page
// //                         if($('lastStep')) {
// //                           if (document.all)
// //                               $('lastStep').style.setAttribute("cssText","display:block;");
// //                           else
// //                               $('lastStep').setAttribute("style","display:block;");
// //                         }
//                     }
//                 });
                new Ajax.Request(url, {
                    method: 'get',
                    onComplete: function(transport) {
//                         $('workPage').update(transport.responseText); // aurait suffi avec FF
                        var className = '';
                        if ($('workPage').hasClassName('desktopWorkPagePair')) {
                            className = 'desktopWorkPagePair';
                        } else if ($('workPage').hasClassName('desktopWorkPageImpair')) {
                            className = 'desktopWorkPageImpair';
                        } else {
                            className = 'workPage';
                        }
                        $('workPage').remove(); // merci IE, il faut d'abord supprimer l'élément et le recréer..
                        new Insertion.Before('workLinks', '<div id="workPage" class="' + className + '">' + transport.responseText + '</div>')
                        setDroppablesListeners();
//                         var htmlFinalize = viewFinalizePublication();
                        // afficher bloc texte sur derniere page
                        if($('lastStep')) {
                          if (document.all)
                              $('lastStep').style.setAttribute("cssText","display:block;");
                          else
                              $('lastStep').setAttribute("style","display:block;");
                        }
                    },
                    asynchronous: false
                });
                // on met dans le href du bouton "page suivante" la dernière image droppée
                // pour faire descendre le scroll à son niveau au chargement de la page suivante
                if ($('validGoNext')) {
                    var scrollTop = $('rightColContent').scrollTop;
                    var href = $('validGoNext').readAttribute('href');
                    // s'il y a déjà un scrollTop spécifié, on le vire
                    if (href.indexOf('scrollTop') != -1) {
                        href = href.substring(0, href.indexOf('scrollTop') - 1);
                    }
                    $('validGoNext').setAttribute('href', href + '/scrollTop/' + scrollTop);
                }
            $('pageBody').setStyle({
              cursor: 'default'
            });  
            }
        });
    }
}

// viewFinalizePublication = function() {
//     var url = '';
//     new Ajax.Request(url, {
//         method: 'get',
//         asynchronous: false
//     });
// }


Effect.SlideRight = function(element) {
  element = $(element);
  Element.cleanWhitespace(element);
  // SlideDown need to have the content of the element wrapped in a container element with fixed height!
  var oldInnerRight = Element.getStyle(element.firstChild, 'right');
  var elementDimensions = Element.getDimensions(element);
  return new Effect.Scale(element, 100, Object.extend({
    scaleContent: false,
    scaleY: false,
    scaleFrom: 0,
    scaleMode: {originalHeight: elementDimensions.height, originalWidth: elementDimensions.width},
    restoreAfterFinish: true,
    afterSetup: function(effect) { with(Element) {
      makePositioned(effect.element);
      makePositioned(effect.element.firstChild);
      if(window.opera) setStyle(effect.element, {top: ''});
      makeClipping(effect.element);
      setStyle(effect.element, {width: '0px'});
      show(element); }},
    afterUpdateInternal: function(effect) { with(Element) {
      setStyle(effect.element.firstChild, {right:
        (effect.dims[0] - effect.element.clientWidth) + 'px' }); }},
    afterFinishInternal: function(effect) { with(Element) {
      undoClipping(effect.element);
      undoPositioned(effect.element.firstChild);
      undoPositioned(effect.element);
      setStyle(effect.element.firstChild, {right: oldInnerRight}); }}
    }, arguments[1] || {})
  );
}


setEvent = function(id,eventId,eventType) {
//     alert($(object).readAttribute('month'));
//     var element = Event.findElement(event, 'a');
//     alert(element.readAttribute('month'));
    var url = '/visualprints/ajax/set-event/id/' + eventId + '/type/' + eventType;
    new Ajax.Request(url, {
        method: 'get',
        onComplete: function(transport) {
//             var jsonObject = eval('(' + transport.responseText + ')');
            $(id).setAttribute('choice', transport.responseText);
            $(id).update(transport.responseText);
        },
        asynchronous: false
    });
    $(id+'Menu').remove();
//     $(id).remove();
}


// setStartAndEndDates = function(object, year) {
// //     alert($(object).readAttribute('month'));
// //     var element = Event.findElement(event, 'a');
// //     alert(element.readAttribute('month'));
//     var month = parseInt($(object).readAttribute('choice'));
//     var url = '/visualprints/ajax/set-start-and-end-dates/month/' + month + '/year/' + year;
//     new Ajax.Request(url, {
//         method: 'get',
//         onComplete: function(transport) {
//             var jsonObject = eval('(' + transport.responseText + ')');
//             $('startMonthButton').setAttribute('choice', jsonObject['startMonth']);
//             $('startMonthButton').update(jsonObject['startMonth']);
//         },
//         asynchronous: false
//     });
//     $('startMonthMenu').remove();
// //     Event.stop(event);
// }



searchEventsMenu = function(elt, eventType, level, key){
    var url = '/visualprints/ajax/search-events/type/' + eventType;
    new Ajax.Request(url, {
        method: 'post',
        parameters: $H({ 'type': eventType, 'level': level, 'key': key }).toQueryString(),
        onSuccess: function(transport) {
            var jsonObject = eval(/*"("+*/transport.responseText/*+")"*/);
            if ($(elt + "Menu")) {
                $(elt + "Menu").remove();
            }
            var ul = Builder.node('ul', {
                id: elt+'Menu',
//                 className: 'categoriesMenu',
//                 onmouseout: elt+'MenuOut()',
//                 onmouseover: elt+'MenuOver()'
                onmouseout: "searchMenuOut('"+elt+"Menu')",
                onmouseover: "searchMenuOver('"+elt+"Menu')"
            });
            var li = Builder.node('li', [
              Builder.node('a', {
                  href: 'javascript:void(0);',
                  onclick: "setEvent('"+ elt + "',0,'"+eventType+"')"
              }, translate(""))
            ]);
            ul.appendChild(li);
            for (var i = 0; i < jsonObject.length; i++) {
                var event = jsonObject[i];
                if (i==0) {
                    var li = Builder.node('li', [
                      Builder.node('a', {
                          href: 'javascript:void(0);',
                          onclick: "setEvent('"+ elt + "',0,'"+eventType+"')"
                      }, translate("Désactivé"))
                    ]);
                    ul.appendChild(li);
                }
                if (event['has_children'] == 'yes') {
                    var li = Builder.node('li', [
                        Builder.node('a', {
                            href: 'javascript:void(0);',
                            className: 'hasChildren',
                            onclick: "searchEventsMenu ('"+elt+"','"+ eventType+"',"+ (level+1) +",'"+ event['name']+"')"
                        }, event['name'])
                    ]);
                    ul.appendChild(li);
                } else {
                     var li = Builder.node('li', [
                        Builder.node('a', {
                            href: 'javascript:void(0);',
                            onclick: "setEvent('"+ elt + "'," + event['id'] + ",'"+eventType+"')"
                        }, event['name'])
                    ]);
                    ul.appendChild(li);
                }
            }
//             elt.setAttribute('choice', nom);
//             $(elt).parentNode.appendChild(ul);
            $('toStartLeft').appendChild(ul);
            $(ul).hide();
            new Effect.SlideRight(ul, {duration: 0.3});

        }
    });
}

/* construit liste "ul" en cascade */
buildHtmlList = function (ident, array, eventType) {
        var ul1 = Builder.node('ul', {
            id: ident,
//             onmouseout: "searchMenuOut('"+ident+"')",
//             onmouseover: "searchMenuOver('"+ident+"')"
            onmouseout: "searchMenuOut(this)",
            onmouseover: "searchMenuOver(this)"
        });
        for (var nom in array) {
            var id_target = array[nom];
            if (typeof(id_target) == "object") // un tableau
            {
                var li = Builder.node('li', [
                    Builder.node('a', {
                        href: 'javascript:void(0);',
                        onclick: 'this.firstChild.setAttribute("style","display=block;")'
                    }, nom)
                ]);
                var ul2 = buildHtmlList(ident+'Menu',id_target, eventType);
                li.appendChild(ul2);
                ul1.appendChild(li);
                $(ul2).hide();
            } else {
                var li = Builder.node('li', [
                    Builder.node('a', {
                        href: 'javascript:void(0);',
                        onclick: "setEvent('"+ident + "'," + id_target + ",'"+eventType+"')"
                    }, nom)
                ]);
                ul1.appendChild(li);
            }
      }
      return ul1;
}


searchMenuOut = function(id) {
    gChooseMenuTimeOutId = setTimeout(function () { $(id).hide() }, 1000);
}
searchMenuOver = function(id) {
    clearTimeout(gChooseMenuTimeOutId);
    $(id).show();
}

/*

searchEventsMenu = function(elt, eventType){


    var url = '/visualprints/ajax/search-events/type/' + eventType;
    new Ajax.Request(url, {
        method: 'get',
        onSuccess: function(transport) {
            var jsonObject = eval("("+transport.responseText+")");
            if ($(elt + "Menu")) {
                $(elt + "Menu").remove();
            }
            var ul = buildHtmlList(elt + "Menu",jsonObject, eventType);
            $(elt).parentNode.appendChild(ul);
            new Effect.SlideRight(ul, {duration: 0.3});
            $(ul).hide();
        }
    });
}*/
startMonthMenu = function(year) {
    var url = '/visualprints/ajax/get-months/year/' + year;
    new Ajax.Request(url, {
        method: 'get',
        onSuccess: function(transport) {
            if ($('startMonthMenu')) {
                $('startMonthMenu').remove();
            }
            var ul = Builder.node('ul', {
                id: 'startMonthMenu',
                onmouseout: 'startMonthMenuOut()',
                onmouseover: 'startMonthMenuOver()'
            });
            var now = new Date();
//             var limit = new Date();
//             limit.
            if (year == now.getFullYear()) { // on ne peut pas retourner dans le passé...
                var li = Builder.node('li', [
                    Builder.node('a', {
                        href: 'javascript:void(0);',
                        className: 'goNext',
                        onclick: 'startMonthMenu(' + (year + 1) + ')'
                    }),
                    Builder.node('span', {style: 'padding-left: 25px;'}, year)
                ]);
            } else if (year == (now.getFullYear() + 1)) {
                var li = Builder.node('li', [
                    Builder.node('a', {
                        href: 'javascript:void(0);',
                        className: 'goBack',
                        onclick: 'startMonthMenu(' + (year - 1) + ')'
                    }),
//                     Builder.node('a', {
//                         href: 'javascript:void(0);',
//                         className: 'goNext',
//                         onclick: 'startMonthMenu(' + (year + 1) + ')'
//                     }),
                    Builder.node('span', {style: 'padding-right: 25px'}, year)
//                     Builder.node('span', year)
                ]);
            }/* else if (year == (now.getFullYear() + 2)) {
                    Builder.node('a', {
                        href: 'javascript:void(0);',
                        className: 'goBack',
                        onclick: 'startMonthMenu(' + (year - 1) + ')'
                    }),
                    Builder.node('span', {style: 'padding-right: 25px'}, year)
            }*/
            ul.appendChild(li);
            var months = eval('(' + transport.responseText + ')');
            for (var i in months) {
                if (months.hasOwnProperty(i)) {
                    var li = Builder.node('li', [
                        Builder.node('a', {
                            href: 'javascript:void(0);',
                            month: i,
                            onclick: 'setStartAndEndDates(this, ' + year + ')'
                        }, months[i])
                    ]);
                    ul.appendChild(li);
                }
            }
            $('toStartLeft').appendChild(ul);
        }
    });
}

setStartAndEndDates = function(object, year) {
//     alert($(object).readAttribute('month'));
//     var element = Event.findElement(event, 'a');
//     alert(element.readAttribute('month'));
    var month = parseInt($(object).readAttribute('month'));
    var url = '/visualprints/ajax/set-start-and-end-dates/month/' + month + '/year/' + year;
    new Ajax.Request(url, {
        method: 'get',
        onComplete: function(transport) {
            var jsonObject = eval('(' + transport.responseText + ')');
            $('startMonthButton').setAttribute('title', jsonObject['startMonth']);
            $('startMonthButton').setAttribute('year', jsonObject['startYear']);
            $('startMonthButton').update(jsonObject['startMonth']);
            $('startDate').update(jsonObject['startDate']);
            $('endDate').update(jsonObject['endDate']);
        },
        asynchronous: false
    });
    $('startMonthMenu').remove();
//     Event.stop(event);
}

startMonthMenuOut = function() {
    gStartMonthMenuTimeOutId = setTimeout(function () { $('startMonthMenu').hide() }, 1000);
}

startMonthMenuOver = function() {
    clearTimeout(gStartMonthMenuTimeOutId);
    $('startMonthMenu').show();
}

/* diaporama publication*/
popupSlideshow = function(url) {
//     <div id="popup">
//         <div id="popupBackground"></div>
//         <div id="popupContent">
//             <a onclick="popupClose(event);"></a>
//              <div id="popupAjaxContent"></div>
//         </div>
//     </div>
    if (url == '') { // init
        var center3ColHeight = $('center3Col').getHeight();

        var popupBgHeight = center3ColHeight + 3;
        var popupHeight = center3ColHeight - 43;

        var popup = Builder.node('div', {id: 'popup'}, [
            Builder.node('div', {id: 'popupBackground', style: 'height: ' + popupBgHeight + 'px'}),
            Builder.node('div', {id: 'popupContent', style: 'height: ' + popupHeight + 'px;'}, [
                Builder.node('a', {id: 'popupClose', onclick: 'popupClose(event)'}),
                Builder.node('div', {id: 'popupAjaxContent', style: 'height: 450px'}, [
                    Builder.node('span', {id: 'waitingMessage'}, translate("Merci de patienter pendant la création de l'aperçu."))
                ])
            ])
        ]);

        setTimeout(function() { new Effect.ScrollTo('pageHeader'); }, 1000);
        $('center3Col').appendChild(popup);
    }
    else { // populate
        new Ajax.Updater('popupAjaxContent', url, {
            method: 'get'/*,
            onComplete: function() {
                $('waitingMessage').remove();  supprime le message d'attente
            }*/
        });
     }
//      clearTimeout();
}

loadSlideshowPage = function(event, url, pageId) {
    new Ajax.Updater('popupAjaxContent', url + '/page/' + pageId, {method: 'get'});
    Event.stop(event);
}

popupClose = function(event) {
    $('popup').remove();
    if (event)
      Event.stop(event);
}


setPublicationParameter = function(name, value) {
    var url = '/visualprints/ajax/set-publication-parameter/name/' + name + '/value/' + value;
    new Ajax.Request(url, {method: 'get'});
}

/************************************** outil crop **************************************/

popupPictureCrop = function(url) {

    var center3ColHeight = $('center3Col').getHeight();

    var popupBgHeight = center3ColHeight + 3;
    var popupHeight = center3ColHeight - 43;

    var popup = Builder.node('div', {id: 'popup'}, [
        Builder.node('div', {id: 'popupBackground', style: 'height: ' + popupBgHeight + 'px'}),
        Builder.node('div', {id: 'popupContent', style: 'height: ' + popupHeight + 'px;'}, [
            Builder.node('a', {id: 'popupClose', onclick: 'popupClose(event)'}),
            Builder.node('div', {id: 'popupAjaxContent'})
        ])
    ]);
    $('center3Col').appendChild(popup);
    new Ajax.Updater('popupAjaxContent', url, {
        method: 'get',
        onComplete: function() {
            setTimeout(function() { new Effect.ScrollTo('pageHeader'); }, 1000);
            element = $('imageToCrop');
            var initCropW = parseInt(element.readAttribute('initcropwidth'));
            var initCropH = parseInt(element.readAttribute('initcropheight'));
            var initCropX = parseInt(element.readAttribute('initcropabs'));
            var initCropY = parseInt(element.readAttribute('initcropord'));
            initCropWithPreview(initCropW, initCropH, initCropX, initCropY);
//             $('modifyCropForm').observe('submit', function () { alert('la'); $('modifyCropForm').submit(); popupClose();});
        }
     });
}

onEndCrop = function (coords, dimensions) {
    /* intervertion pour se calquer sur phpThumb */
    $('x1').value = coords.x1;
    $('y1').value = coords.y1;
    $('width').value = dimensions.width;
    $('height').value = dimensions.height;
};

initCropWithPreview = function (initCropW, initCropH, initCropX, initCropY) {
    CropObject = new Cropper.ImgWithPreview('imageToCrop',
        {
          previewWrap: 'previewWrap',
          minWidth: initCropW,
          minHeight: initCropH,
          ratioDim: {
            x: initCropW,
            y: initCropH
          },
          onloadCoords: { x1: initCropX, y1: initCropY, x2: initCropX + initCropW, y2: initCropY + initCropH },
          displayOnInit: true,
          onEndCrop: onEndCrop
    });
};

initCrop = function (initCropW, initCropH, initCropX, initCropY) {
    CropObject = new Cropper.Img('imageToCrop',
        {
          ratioDim: {
            x: initCropW,
            y: initCropH
          },
          onloadCoords: { x1: initCropX, y1: initCropY, x2: initCropX + initCropW, y2: initCropY + initCropH },
          displayOnInit: true,
          onEndCrop: onEndCrop
    });
};