Merge lp:~serpentcs/web-addons/multi_image_7.0 into lp:~webaddons-core-editors/web-addons/7.0

[Serpent Consulting Services]

[Nhomar - Vauxoo (nhomar)]

Hello.

I am testing this development.

I have some comments.

We are saving files wired in a folder inside the server code, IMHO it is a bad practice, we have a config on server:

    --static-http-document-root=STATIC_HTTP_DOCUMENT_ROOT
                        specify the directory containing your static HTML
                        files (e.g '/var/www/')
    --static-http-url-prefix=STATIC_HTTP_URL_PREFIX
                        specify the URL root prefix where you want web
                        browsers to access your static HTML files (e.g '/')

IMHO it should be saves there, with the unix security it will be safe enought i think.

I really like this development but why not use the attachment approach in the core?

I was working in our side behind OpenERP and i think it can be done in a generic widget that only show list of "url" this url can be uploaded files, i think work with a wired path in the server side is too dangerous.

What do you think?

I continue working on it to see more thing.

BTW EXCELLENT job.

review: Needs Information

[Nhomar - Vauxoo (nhomar)]

Other point (writting in the speed i read the code)

To be a communitary module with a good approach like this i think it needs demo data what do you think?

[Nhomar - Vauxoo (nhomar)]

Idea: We should have one module that just add the lightbox lib and the widget.

And other modules that enable this feature in different models.

Because theorically it is an special widget that can be used in almost any model right?

[Nhomar - Vauxoo (nhomar)]

Problem.

If I am behind nginx with max_file_size setted on the web server the error is not correctly managed, the widget stay loading and the request response is not shown.

[Nhomar - Vauxoo (nhomar)]

The aspect ratio have some little problems.

https://dl.dropboxusercontent.com/u/2428846/multi_image.png

....

[Nhomar - Vauxoo (nhomar)]

Some conclusions, IMHO you give me personally a good approach in terms of algorith to include this widget.

Can i improve it before merge? or split the job to make a better approach of this amazing feature?

Regards.

[Nhomar - Vauxoo (nhomar)]

In Icons.

If you use class oe_e or the ui-icon-* (from bootstrap) in this way you dont need images.

BTW, openerp itself have all this images alreade availables on: /web/addons/web/static/src/img/icons

IMHO 2 options, or use fonts (who really see cool) or use the available icons.

Regards.

[Nhomar - Vauxoo (nhomar)]

About This: Correction... To be a communitary module with a good approach like this i think it needs demo data what do you think?

It is done because you set the widget on Product, sorry my mistake, BTW documentation in __openerp__.py should be a little more complete.

Regards.

[Serpent Consulting Services (serpent-consulting-services)]

Nhomar,

Yo!

Yogesh will take a look and proceed. I really appreciate your feedback, will help us improve and also will help this widget land into v8.

Thanks.

[Nhomar - Vauxoo (nhomar)]

Other tip (I will make it anyway.)

https://github.com/jbutz/bootstrap-lightbox

This library mix bootstrap 2 with lightbox, as you should know boostrap 2 is almost embeded in openerp 7.0 and will be totally embeded in OpenERP 8.0 in its version 3.0 giving us a big power in terms of css.

I think we should:

1.- MAke a first module that just put available the library in openerp no more.
2.- Make a module that build the widget.

IMHO if we make in this way we can mix several concepts.

For example:

1.- You way to do things, list of texts to mix with the product view.
2.- Build some kind of "View Gallery" inheriting the kanban view.
3.- Use the library to build static content as helps, improve process view and so on.

We are working actually in 2 and 3 because we need internally, and you are working in multi_image widget.

We as team can not depend of your widget to have the lib available, and i think it is a dirty hacking just overwrit it.

I weill come back with a MP with a modules called web_bootstrap3 web_bootstrap2 and web_lightbox_bootstrap web to have feature independent the libraries...

What do you think?.

REgards.

[Yogesh (SerpentCS) (yogesh-serpentcs)]

Nhomar,

Thanks for your suggestion.

We will check it and Improve the module.

We will create separate module for multi image widget and multi image sample.

We are already in good stage for progress.

[Serpent Consulting Services (serpent-consulting-services)]

Team,

Updates:
Improved the view of list of all images. now we didn't set static height.

Created separate module for widget and multi_image sample for adde field in product object.

Removed the image file in multi_image module and used icon of web module.

Thanks.

review: Needs Resubmitting

[lp:~serpentcs/web-addons/multi_image_7.0]

6. By Serpent Consulting Services on 2013-09-11

[FIX/IMP] updates for the improvement of widget

7. By Serpent Consulting Services on 2013-09-11

Merged with parent

[Nhomar - Vauxoo (nhomar)]

Hello Jay/Husen

Thanks for take care about details mentioned, Just few remarks.

1.- The widget module should be called "web_*" to follow the line of web-specific modules.
2.- The "sample" can be called by its name, may be "product_multi_image_field", because as it is, it is functional i think.

Some questions:

1.- I really dont like write thinks in the code path (even the official ftp module allow configure thing out the path) can we have some extra entry in the config file for it (or use one of the existing)

2.- You are using ID for positioning the "lightbox" thing, as i remember i think it is a bad practice due to the generic way how things are done in openerp, can you analyse how can we namespace this IDS with classes or with other strategy?

I think we should explain in the __openerp__.py a little deeper the behaviour i.e:

For the widget module: Explain basic things about how to use (i.e. what attribute i should use in xml definition), explain limitations and the way it technically works, reading the code is possible for sure i did myself, but as technical module and with apps without explanation in the terp file, people will no be able to use it.

For the product module: Explain that paths will be saved as text and blah blah blah.

Regards.

review: Needs Information

[Nhomar - Vauxoo (nhomar)]

Now some technical remarks, after using it and check deeper.

1.-
In the save algorithm, you are verifying if the file is really an image i find an algorithm that i used frequently to do that:

http://stackoverflow.com/questions/6640605/detecting-if-a-file-is-an-image-in-python

We should use something like this.

2.- I couldn't find the algorithm when somebody remove the file from list can you enlight me there please?

3.- Why the name is mixed with timestamp on server?

http://stackoverflow.com/questions/2961509/python-how-to-create-a-unique-file-name

In this thread there is a more ellegant way to solve the unique name part.

BTW: 2 and 3 are solved in document_* module we should is mix both.

TIP: We are trying to find what is the algorithm behind the mail module who makes something like i am asking for, may be is better study these in beep and not re - invent the wheel ;-).

If you think technically the document_* have some problem, it should be great if you comment about this and we can figure out a Final Solution for this.

Good Job and really thanks for the effort here friend.

review: Needs Fixing

[Pedro Manuel Baeza (pedro.baeza)]

Hi, I want to test this interesting module, but I'll wait until you fix Nhomar remarks, so please comment this MP to get notified when you do the changes.

[Nhomar - Vauxoo (nhomar)]

Hello Friend.

I found the support for the security issue, "at least from my point of view".

Point 1:

167 + file_name = current_dat_time + "_" + ufile.filename

With this line we brake a Python Standard, we have some libraries to manage the file names in a secure way, "Why use dates?".

One option:

http://stackoverflow.com/questions/10501247/best-way-to-generate-random-file-names-in-python

AFAIK It is already implemented on document_ftp

Point 2:

Your module "without ask the user or/and the technicians" is writing over the web/module, it is a big security issue even with community addons, you can find the support about why name space correctly where you put your files.

168 + addons_path = openerpweb.addons_manifest['web']['addons_path'] + "/web/static/src/img/image_multi/"

Option 1:
In this case you can use the static_http_document_root in your server config file, and if it is not setted ask for one with a raise may be.
Option 2:
Extend the document module giving the access to the folders to physical folders.

IOH, FYI, we are working on it, and we think it is a best approach, do you think we can merge the concepts in your module?

http://www.w3.org/Protocols/rfc2616/rfc2616-sec15.html [[Section 15.2]]

IMHO, it should be done extending the dms in OpenERP (with your approach of upload and make public), if you have some point against it it should be great if you share your thoughts.

For now and until we can not solve the security issues (or support them)

ICONS: Please use generic icons with a little mention to your company specifying the use of the module, avoind use your branding __only__

Descriptors.

Can you please explain a little how use the module in the descriptor?

Conclusion,

For me it is a great approach __really__ but it should be great if you can argue my points or improve in your code, please (or better put the branch with openerp-community owner and we can help ;-) )

review: Needs Fixing

[Nhomar - Vauxoo (nhomar)]

A little hole is:

158 + def upload_image_multi(self, req, callback, ufile):

As you can see it is not asking for the session object to validate ACL. I dob have time now to prepare an use case, but it is dangerous.

See how i think we have an important security hole with the approach as you solve it to upload files.

https://dl.dropboxusercontent.com/u/2428846/Captura%20de%20pantalla%202013-09-28%20a%20la%28s%29%2001.14.21.png

[Yogesh (SerpentCS) (yogesh-serpentcs)]

> Hello Friend.
>
> I found the support for the security issue, "at least from my point of view".
>
> Point 1:
>
> 167 + file_name = current_dat_time + "_" + ufile.filename
>
> With this line we brake a Python Standard, we have some libraries to manage
> the file names in a secure way, "Why use dates?".
>
> One option:
>
> http://stackoverflow.com/questions/10501247/best-way-to-generate-random-file-
> names-in-python

We set unique file name. if we use uuid python library then may be it will generate duplicate number so it will be conflicts with existing file name. let me check it there another lib for generate unique number not generate duplicate number in any case.

>
> AFAIK It is already implemented on document_ftp
>
> Point 2:
>
> Your module "without ask the user or/and the technicians" is writing over the
> web/module, it is a big security issue even with community addons, you can
> find the support about why name space correctly where you put your files.
>
> 168 + addons_path =
> openerpweb.addons_manifest['web']['addons_path'] +
> "/web/static/src/img/image_multi/"

We must be store the image in openerp server directory we cannot set file any other directory because for displaying image we just give path for display image in web-browser.
>
> Option 1:
> In this case you can use the static_http_document_root in your server config
> file, and if it is not setted ask for one with a raise may be.
> Option 2:
> Extend the document module giving the access to the folders to physical
> folders.
if we store file in any other directory on server like path store in config file or use static_http_document_root then we can store file on that path so it's time consuming it's take much time for loading images. User open the all images then fetch the image datas using rpc call and display image base on datas.
>
> IOH, FYI, we are working on it, and we think it is a best approach, do you
> think we can merge the concepts in your module?
>
>
> http://www.w3.org/Protocols/rfc2616/rfc2616-sec15.html [[Section 15.2]]
>
> IMHO, it should be done extending the dms in OpenERP (with your approach of
> upload and make public), if you have some point against it it should be great
> if you share your thoughts.

DMS also store file in server directory with random unique file name.

We will improve module for security reason.

> For now and until we can not solve the security issues (or support them)
>
> ICONS: Please use generic icons with a little mention to your company
> specifying the use of the module, avoind use your branding __only__
>
> Descriptors.
>
> Can you please explain a little how use the module in the descriptor?
>
> Conclusion,
>
> For me it is a great approach __really__ but it should be great if you can
> argue my points or improve in your code, please (or better put the branch with
> openerp-community owner and we can help ;-) )

We will Improve code as per your suggestions and we will add description in openerp.py file too.

Thanks for nice suggestions.

[Nhomar - Vauxoo (nhomar)]

Hello Yogesh.

COmments inline (it should be grate in the MP) ;-)

2013/9/28 Yogesh (SerpentCS) <email address hidden>

> > Hello Friend.
> >
> > I found the support for the security issue, "at least from my point of
> view".
> >
> > Point 1:
> >
> > 167 + file_name = current_dat_time + "_" + ufile.filename
> >
> > With this line we brake a Python Standard, we have some libraries to
> manage
> > the file names in a secure way, "Why use dates?".
> >
> > One option:
> >
> >
> http://stackoverflow.com/questions/10501247/best-way-to-generate-random-file-
> > names-in-python
>
> We set unique file name. if we use uuid python library then may be it will
> generate duplicate number so it will be conflicts with existing file name.
> let me check it there another lib for generate unique number not generate
> duplicate number in any case.
>

Yes i got it, but the "datetime" imho is an ugly solution, we can use
hash, uuid, ond / or your own algorithm It is my point, in the link you
have the 3 options explained.

>
> >
> > AFAIK It is already implemented on document_ftp
> >
> > Point 2:
> >
> > Your module "without ask the user or/and the technicians" is writing
> over the
> > web/module, it is a big security issue even with community addons, you
> can
> > find the support about why name space correctly where you put your files.
> >
> > 168 + addons_path =
> > openerpweb.addons_manifest['web']['addons_path'] +
> > "/web/static/src/img/image_multi/"
>
> We must be store the image in openerp server directory we cannot set file
> any other directory because for displaying image we just give path for
> display image in web-browser.
>

Noup, it is not true, you can use the "static" folder of any module, not
just from web, it means, if we install a new module, i can not "Without
ask" save in the server folder.

document module have a exchangeable folder with an configured by default,
if you think it is possible, We are working this week on it, we can share
efforts to do that.

> >
> > Option 1:
> > In this case you can use the static_http_document_root in your server
> config
> > file, and if it is not setted ask for one with a raise may be.
> > Option 2:
> > Extend the document module giving the access to the folders to physical
> > folders.
> if we store file in any other directory on server like path store in
> config file or use static_http_document_root then we can store file on that
> path so it's time consuming it's take much time for loading images. User
> open the all images then fetch the image datas using rpc call and display
> image base on datas.
>

Noup, I think i can not explain by myself well.

The document module give you the ability to "index" all uploaded files, the
file storage is extensible, and you can serve them directly http (exactly
as the static folder does) then, IMHO it is a matter of dedicate some time
to it.

Even we have a ir.attachment type called "url" that can be used to share it
trhought http.

It is a littel more complicated but by far more secure, due to in "Creation
TIme" you can manage the own ACL of OpenERP and in "Serve TIme" just serve
them with an standard http request, (the...

[Alexandre Fayolle - camptocamp (alexandre-fayolle-c2c)]

Since this is a large MP, it would be very helpful for reviewers if you could take a few minutes to give an overview of the modules you are contributing in the 'description' section at the top of this page (listing the different addons and their purpose...)

review: Abstain

[Yannick Vaucher @ Camptocamp (yvaucher-c2c)]

According to message https://code.launchpad.net/~serpentcs/web-addons/multi_image_7.0/+merge/179857/comments/430081

This is WIP

Unmerged revisions

7. By Serpent Consulting Services on 2013-09-11

Merged with parent

6. By Serpent Consulting Services on 2013-09-11

[FIX/IMP] updates for the improvement of widget

5. By Serpent Consulting Services on 2013-08-13

[ADD] Added multi_image module : more info at http://www.serpentcs.com/serpentcs-openerp-multi-image-lightbox-widget

=== added directory 'multi_image'
=== added file 'multi_image/__init__.py'
--- multi_image/__init__.py	1970-01-01 00:00:00 +0000
+++ multi_image/__init__.py	2013-09-11 08:32:35 +0000
@@ -0,0 +1,25 @@
+# -*- coding: utf-8 -*-
+##############################################################################
+#    
+#    OpenERP, Open Source Management Solution
+#    Copyright (C) 2004-2010 OpenERP SA (<http://www.openerp.com>)
+#    Copyright (C) 2011-2013 Serpent Consulting Services Pvt. Ltd. (<http://www.serpentcs.com>).
+#
+#    This program is free software: you can redistribute it and/or modify
+#    it under the terms of the GNU Affero General Public License as
+#    published by the Free Software Foundation, either version 3 of the
+#    License, or (at your option) any later version.
+#
+#    This program is distributed in the hope that it will be useful,
+#    but WITHOUT ANY WARRANTY; without even the implied warranty of
+#    MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+#    GNU Affero General Public License for more details.
+#
+#    You should have received a copy of the GNU Affero General Public License
+#    along with this program.  If not, see <http://www.gnu.org/licenses/>.
+#
+##############################################################################
+
+import controllers
+
+# vim:expandtab:smartindent:tabstop=4:softtabstop=4:shiftwidth=4:
\ No newline at end of file

=== added file 'multi_image/__openerp__.py'
--- multi_image/__openerp__.py	1970-01-01 00:00:00 +0000
+++ multi_image/__openerp__.py	2013-09-11 08:32:35 +0000
@@ -0,0 +1,50 @@
+# -*- coding: utf-8 -*-
+##############################################################################
+#    
+#    OpenERP, Open Source Management Solution
+#    Copyright (C) 2004-2010 OpenERP SA (<http://www.openerp.com>)
+#    Copyright (C) 2011-2013 Serpent Consulting Services Pvt. Ltd. (<http://www.serpentcs.com>).
+#
+#    This program is free software: you can redistribute it and/or modify
+#    it under the terms of the GNU Affero General Public License as
+#    published by the Free Software Foundation, either version 3 of the
+#    License, or (at your option) any later version.
+#
+#    This program is distributed in the hope that it will be useful,
+#    but WITHOUT ANY WARRANTY; without even the implied warranty of
+#    MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+#    GNU Affero General Public License for more details.
+#
+#    You should have received a copy of the GNU Affero General Public License
+#    along with this program.  If not, see <http://www.gnu.org/licenses/>.
+#
+##############################################################################
+
+{
+    "name" : "Multi Image",
+    "version" : "1.0",
+    "author" : "Serpent Consulting Services Pvt. Ltd.",
+    "category": 'Image',
+    'complexity': "easy",
+    'depends': ['web'],
+    "description": """
+        This module provides the functionality to store multiple images for one record.
+        All images store in server directory. so database size doesnot increase.
+    """,
+    'update_xml': [
+    ],
+    'js':[
+          "static/lib/lightbox/js/jquery.lightbox.js",
+          "static/src/js/multi_image.js"
+    ],
+    'css':[
+           "static/src/css/hoverbox.css",
+           "static/lib/lightbox/css/lightbox.css",
+    ],
+    'website': 'http://www.serpentcs.com',
+    'qweb': ['static/src/xml/image_multi.xml'],
+    'installable': True,
+    'auto_install': False,
+}
+
+# vim:expandtab:smartindent:tabstop=4:softtabstop=4:shiftwidth=4:

=== added directory 'multi_image/controllers'
=== added file 'multi_image/controllers/__init__.py'
--- multi_image/controllers/__init__.py	1970-01-01 00:00:00 +0000
+++ multi_image/controllers/__init__.py	2013-09-11 08:32:35 +0000
@@ -0,0 +1,25 @@
+# -*- coding: utf-8 -*-
+##############################################################################
+#    
+#    OpenERP, Open Source Management Solution
+#    Copyright (C) 2004-2010 OpenERP SA (<http://www.openerp.com>)
+#    Copyright (C) 2011-2013 Serpent Consulting Services Pvt. Ltd. (<http://www.serpentcs.com>).
+#
+#    This program is free software: you can redistribute it and/or modify
+#    it under the terms of the GNU Affero General Public License as
+#    published by the Free Software Foundation, either version 3 of the
+#    License, or (at your option) any later version.
+#
+#    This program is distributed in the hope that it will be useful,
+#    but WITHOUT ANY WARRANTY; without even the implied warranty of
+#    MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+#    GNU Affero General Public License for more details.
+#
+#    You should have received a copy of the GNU Affero General Public License
+#    along with this program.  If not, see <http://www.gnu.org/licenses/>.
+#
+##############################################################################
+
+from . import main
+
+# vim:expandtab:smartindent:tabstop=4:softtabstop=4:shiftwidth=4:
\ No newline at end of file

=== added file 'multi_image/controllers/main.py'
--- multi_image/controllers/main.py	1970-01-01 00:00:00 +0000
+++ multi_image/controllers/main.py	2013-09-11 08:32:35 +0000
@@ -0,0 +1,61 @@
+# -*- coding: utf-8 -*-
+##############################################################################
+#    
+#    OpenERP, Open Source Management Solution
+#    Copyright (C) 2004-2010 OpenERP SA (<http://www.openerp.com>)
+#    Copyright (C) 2011-2013 Serpent Consulting Services Pvt. Ltd. (<http://www.serpentcs.com>).
+#
+#    This program is free software: you can redistribute it and/or modify
+#    it under the terms of the GNU Affero General Public License as
+#    published by the Free Software Foundation, either version 3 of the
+#    License, or (at your option) any later version.
+#
+#    This program is distributed in the hope that it will be useful,
+#    but WITHOUT ANY WARRANTY; without even the implied warranty of
+#    MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+#    GNU Affero General Public License for more details.
+#
+#    You should have received a copy of the GNU Affero General Public License
+#    along with this program.  If not, see <http://www.gnu.org/licenses/>.
+#
+##############################################################################
+
+from web import http
+from openerp.addons.web.controllers.main import Binary
+openerpweb = http
+import simplejson
+import time
+import openerp
+import os
+import StringIO
+
+class Binary_multi(Binary):
+
+    @openerpweb.httprequest
+    def upload_image_multi(self, req, callback, ufile):
+        # TODO: might be useful to have a configuration flag for max-length file uploads
+        out = """<script language="javascript" type="text/javascript">
+                    var win = window.top.window;
+                    win.jQuery(win).trigger(%s, %s);
+                </script>"""
+        data = ufile.read()
+        if data:
+            current_dat_time = time.strftime("%d%m%y%H%M%S")
+            file_name = current_dat_time + "_" + ufile.filename
+            addons_path = openerpweb.addons_manifest['web']['addons_path'] + "/web/static/src/img/image_multi/"
+            if not os.path.isdir(addons_path):
+                os.mkdir(addons_path)
+            addons_path += file_name
+            buff = StringIO.StringIO()
+            buff.write(data)
+            buff.seek(0)
+            file_name = "/web/static/src/img/image_multi/" + file_name
+            file = open(addons_path, 'wb')
+            file.write(buff.read())
+            file.close()
+            args = [len(data), file_name, ufile.content_type, ufile.filename, time.strftime("%m/%d/%Y %H:%M:%S")]
+        else:
+            args = []
+        return out % (simplejson.dumps(callback), simplejson.dumps(args))
+
+# vim:expandtab:smartindent:tabstop=4:softtabstop=4:shiftwidth=4:
\ No newline at end of file

=== added directory 'multi_image/static'
=== added directory 'multi_image/static/lib'
=== added directory 'multi_image/static/lib/lightbox'
=== added directory 'multi_image/static/lib/lightbox/css'
=== added file 'multi_image/static/lib/lightbox/css/lightbox.css'
--- multi_image/static/lib/lightbox/css/lightbox.css	1970-01-01 00:00:00 +0000
+++ multi_image/static/lib/lightbox/css/lightbox.css	2013-09-11 08:32:35 +0000
@@ -0,0 +1,128 @@
+#lightbox{
+   position: absolute;
+   left: 0;
+   width: 100%;
+   z-index: 100;
+   text-align: center;
+   line-height: 0;
+   }
+
+#lightbox a img{ border: none; }
+
+#outerImageContainer{
+   position: relative;
+   background-color: #fff;
+   width: 250px;
+   height: 250px;
+   margin: 0 auto;
+   }
+
+#imageContainer{
+   padding: 10px;
+   }
+
+#loading{
+   position: absolute;
+   top: 40%;
+   left: 0%;
+   height: 25%;
+   width: 100%;
+   text-align: center;
+   line-height: 0;
+   }
+#hoverNav{
+   position: absolute;
+   top: 0;
+   left: 0;
+   height: 100%;
+   width: 100%;
+   z-index: 10;
+ }
+#imageContainer>#hoverNav{ left: 0;}
+#hoverNav a{ outline: none;}
+
+#prevLink, #nextLink{
+   width: 49%;
+   height: 100%;
+   background: transparent url(../images/blank.gif) no-repeat; /* Trick IE into showing hover */
+   display: block;
+   }
+#prevLink { left: 0; float: left;}
+#nextLink { right: 0; float: right;}
+#prevLink:hover, #prevLink:visited:hover { background: url(../images/prev.gif) left 50% no-repeat; }
+#nextLink:hover, #nextLink:visited:hover { background: url(../images/next.gif) right 50% no-repeat; }
+/*** START : next / previous text links ***/
+nextLinkText, #prevLinkText{
+color: #FF9834;
+font-weight:bold;
+text-decoration: none;
+}
+#nextLinkText{
+padding-left: 20px;
+}
+#prevLinkText{
+padding-right: 20px;
+}
+/*** END : next / previous text links ***/
+/*** START : added padding when navbar is on top ***/
+
+.ontop #imageData {
+    padding-top: 5px;
+}
+
+/*** END : added padding when navbar is on top ***/
+
+#imageDataContainer{
+   font: 10px Verdana, Helvetica, sans-serif;
+   background-color: #fff;
+   margin: 0 auto;
+   line-height: 1.4em;
+   }
+
+#imageData{
+   padding:0 10px;
+   }
+#imageData #imageDetails{ width: 70%; float: left; text-align: left; } 
+#imageData #caption{ font-weight: bold;    }
+#imageData #numberDisplay{ display: block; clear: left; padding-bottom: 1.0em; }
+#imageData #numberDisplay a { color: black; padding-left: 5px; padding-right: 5px;}
+#imageData #bottomNavClose{float: right;  padding-bottom: 0.7em; }
+#imageData #helpDisplay {clear: left; float: left; display: block; }
+
+#overlay{
+   position: absolute;
+   top: 0;
+   left: 0;
+   z-index: 90;
+   width: 100%;
+   height: 500px;
+   background-color: #000;
+   filter:alpha(opacity=60);
+   -moz-opacity: 0.6;
+   opacity: 0.6 !important;
+   display: none;
+   }
+   
+
+.clearfix:after {
+   content: "."; 
+   display: block; 
+   height: 0; 
+   clear: both; 
+   visibility: hidden;
+   }
+
+* html>body .clearfix {
+   display: inline-block; 
+   width: 100%;
+   }
+
+* html .clearfix {
+   /* Hides from IE-mac \*/
+   height: 1%;
+   /* End hide from IE-mac */
+   }   
+
+#lightboxIframe {
+   display: none;
+}  

=== added directory 'multi_image/static/lib/lightbox/images'
=== added file 'multi_image/static/lib/lightbox/images/blank.gif'
Binary files multi_image/static/lib/lightbox/images/blank.gif	1970-01-01 00:00:00 +0000 and multi_image/static/lib/lightbox/images/blank.gif	2013-09-11 08:32:35 +0000 differ
=== added file 'multi_image/static/lib/lightbox/images/close.gif'
Binary files multi_image/static/lib/lightbox/images/close.gif	1970-01-01 00:00:00 +0000 and multi_image/static/lib/lightbox/images/close.gif	2013-09-11 08:32:35 +0000 differ
=== added file 'multi_image/static/lib/lightbox/images/closelabel.gif'
Binary files multi_image/static/lib/lightbox/images/closelabel.gif	1970-01-01 00:00:00 +0000 and multi_image/static/lib/lightbox/images/closelabel.gif	2013-09-11 08:32:35 +0000 differ
=== added file 'multi_image/static/lib/lightbox/images/loading.gif'
Binary files multi_image/static/lib/lightbox/images/loading.gif	1970-01-01 00:00:00 +0000 and multi_image/static/lib/lightbox/images/loading.gif	2013-09-11 08:32:35 +0000 differ
=== added file 'multi_image/static/lib/lightbox/images/next.gif'
Binary files multi_image/static/lib/lightbox/images/next.gif	1970-01-01 00:00:00 +0000 and multi_image/static/lib/lightbox/images/next.gif	2013-09-11 08:32:35 +0000 differ
=== added file 'multi_image/static/lib/lightbox/images/nextlabel.gif'
Binary files multi_image/static/lib/lightbox/images/nextlabel.gif	1970-01-01 00:00:00 +0000 and multi_image/static/lib/lightbox/images/nextlabel.gif	2013-09-11 08:32:35 +0000 differ
=== added file 'multi_image/static/lib/lightbox/images/prev.gif'
Binary files multi_image/static/lib/lightbox/images/prev.gif	1970-01-01 00:00:00 +0000 and multi_image/static/lib/lightbox/images/prev.gif	2013-09-11 08:32:35 +0000 differ
=== added file 'multi_image/static/lib/lightbox/images/prevlabel.gif'
Binary files multi_image/static/lib/lightbox/images/prevlabel.gif	1970-01-01 00:00:00 +0000 and multi_image/static/lib/lightbox/images/prevlabel.gif	2013-09-11 08:32:35 +0000 differ
=== added directory 'multi_image/static/lib/lightbox/js'
=== added file 'multi_image/static/lib/lightbox/js/jquery.lightbox.js'
--- multi_image/static/lib/lightbox/js/jquery.lightbox.js	1970-01-01 00:00:00 +0000
+++ multi_image/static/lib/lightbox/js/jquery.lightbox.js	2013-09-11 08:32:35 +0000
@@ -0,0 +1,501 @@
+/**
+ * jQuery Lightbox
+ * @author Warren Krewenki
+ *
+ * This package is distributed under the BSD license.
+ * For full license information, see LICENSE.TXT
+ *
+ * Based on Lightbox 2 by Lokesh Dhakar (http://www.huddletogether.com/projects/lightbox2/)
+ *
+ *
+ **/
+
+(function($) {
+	$.fn.lightbox = function(options) {
+		// build main options
+		var opts = $.extend({}, $.fn.lightbox.defaults, options);
+        
+		$(window).resize(resizeOverlayToFitWindow);
+        
+		initialize();
+		showLightbox(this);
+		/*
+		# Initialize the lightbox by creating our html and reading some image data
+		# This method is called by the constructor after any click events trigger it
+		# You will never call it by itself, to my knowledge.
+		*/
+		function initialize() {
+			$('#overlay, #lightbox').remove();
+			opts.inprogress = false;
+
+			// if jsonData, build the imageArray from data provided in JSON format
+			if (opts.jsonData && opts.jsonData.length > 0) {
+				var parser = opts.jsonDataParser ? opts.jsonDataParser : $.fn.lightbox.parseJsonData;                
+				opts.imageArray = [];
+				opts.imageArray = parser(opts.jsonData);
+			}
+    
+			var outerImage = '<div id="outerImageContainer"><div id="imageContainer" style="height: 520px; width: 720px;"><iframe id="lightboxIframe"></iframe><img id="lightboxImage" /><div id="hoverNav"><a href="javascript://" title="' + opts.strings.prevLinkTitle + '" id="prevLink"></a><a href="javascript://" id="nextLink" title="' + opts.strings.nextLinkTitle + '"></a></div><div id="loading"><a href="javascript://" id="loadingLink"><img src="'+opts.fileLoadingImage+'"></a></div></div></div>';
+			var imageData = '<div id="imageDataContainer" class="clearfix"><div id="imageData"><div id="imageDetails"><span id="caption"></span><span id="numberDisplay"></span></div><div id="bottomNav">';
+
+//			var outerImage = '<div id="outerImageContainer"><div id="imageContainer" style="height: 520px; width: 720px;"><iframe id="lightboxIframe"></iframe><img id="lightboxImage" syle="vertical-align: middle;" /><div id="hoverNav"><a href="javascript://" title="' + opts.strings.prevLinkTitle + '" id="prevLink"></a><a href="javascript://" id="nextLink" title="' + opts.strings.nextLinkTitle + '"></a></div><div id="loading"><a href="javascript://" id="loadingLink"><img src="'+opts.fileLoadingImage+'"></a></div></div></div>';
+//			var imageData = '<div id="imageDataContainer" class="clearfix"><div id="imageData"><div id="imageDetails"><span id="caption"></span><span id="numberDisplay"></span></div><div id="bottomNav">';
+
+			if (opts.displayHelp) {
+				imageData += '<span id="helpDisplay">' + opts.strings.help + '</span>';
+			}
+
+			imageData += '<a href="javascript://" id="bottomNavClose" class="ui-dialog-titlebar-close ui-corner-all ui-state-hover" title="' + opts.strings.closeTitle + '"><span class="ui-icon ui-icon-closethick">close</span></a></div></div></div>';
+
+			var string;
+
+			if (opts.navbarOnTop) {
+				string = '<div id="overlay"></div><div id="lightbox">' + imageData + outerImage + '</div>';
+				$("body").append(string);
+				$("#imageDataContainer").addClass('ontop');
+			} else {
+				string = '<div id="overlay"></div><div id="lightbox">' + outerImage + imageData + '</div>';
+				$("body").append(string);
+			}
+
+			//$("#overlay, #lightbox").click(function(){ end(); }).hide();
+			$("#loadingLink, #bottomNavClose").click(function(){ end(); return false;});
+			$('#outerImageContainer').width(opts.widthCurrent).height(opts.heightCurrent);
+			$('#imageDataContainer').width(opts.widthCurrent);
+
+			if (!opts.imageClickClose) {
+				$("#lightboxImage").click(function(){ return false; });
+				$("#hoverNav").click(function(){ return false; });
+			}
+			
+			return true;
+		};
+
+		/*
+		# Get the document and window width/heigh
+		#
+		# Examples
+		#
+		#	getPageSize()
+		#	# => [1024,768,1024,768]
+		#
+		# Returns a numerically indexed array of document width/height and window width/height
+		*/
+		function getPageSize() {
+			var jqueryPageSize = new Array($(document).width(),$(document).height(), $(window).width(), $(window).height());
+			return jqueryPageSize;
+		};
+	    
+		function getPageScroll() {
+			var xScroll, yScroll;
+
+			if (self.pageYOffset) {
+				yScroll = self.pageYOffset;
+				xScroll = self.pageXOffset;
+			} else if (document.documentElement && document.documentElement.scrollTop){  // Explorer 6 Strict
+				yScroll = document.documentElement.scrollTop;
+				xScroll = document.documentElement.scrollLeft;
+			} else if (document.body) {// all other Explorers
+				yScroll = document.body.scrollTop;
+				xScroll = document.body.scrollLeft;
+			}
+
+			var arrayPageScroll = new Array(xScroll,yScroll);
+			return arrayPageScroll;
+		};
+
+		/*
+		# Deploy the sexy overlay and display the lightbox
+		#
+		# imageObject - the jQuery object passed via the click event in the constructor
+		#
+		# Examples
+		#
+		#	showLightbox($('#CheesusCrust'))
+		#
+		# Returns a boolean true, because it's got nothing else to return. It should give visual feedback when run
+		*/
+		function showLightbox(imageObject) {
+			/**
+			* select, embed and object tags render over the lightbox in some browsers
+			* Right now, the best way to fix it is to hide them, but that can trigger reloading of some flash content
+			* I don't have a better fix for this right now, but I want ot leave this comment here so you and I both 
+			* know that i'm aware of it, and I would love to fix it, if you have any suggestions.
+			**/
+			$("select, embed, object").hide();
+
+			// Resize and display the sexy, sexy overlay.
+			resizeOverlayToFitWindow();
+			$("#overlay").hide().css({ opacity : opts.overlayOpacity }).fadeIn();
+			imageNum = 0;
+
+			// if data is not provided by jsonData parameter
+			if (!opts.jsonData) {
+				opts.imageArray = [];
+				// if image is NOT part of a set..
+				if ((!imageObject.rel || (imageObject.rel == '')) && !opts.allSet) {
+					// add single image to Lightbox.imageArray
+					opts.imageArray.push(new Array(imageObject.href, opts.displayTitle ? imageObject.title : ''));
+				} else {
+					// if image is part of a set..
+					$("a").each(function() {
+						if(this.href && (this.rel == imageObject.rel)) {
+							opts.imageArray.push(new Array(this.href, opts.displayTitle ? this.title : ''));
+						}
+					});
+				}
+			}
+	
+			if (opts.imageArray.length > 1) {
+				for (i = 0; i < opts.imageArray.length; i++) {
+					for (j = opts.imageArray.length - 1; j > i; j--) {
+						if (opts.imageArray[i][0] == opts.imageArray[j][0]) {
+							opts.imageArray.splice(j, 1);
+						}
+					}
+				}
+				while (opts.imageArray[imageNum][0] != imageObject.href) { 
+					imageNum++;
+				if (imageNum < opts.imageArray.length) {
+						break;
+					}
+				}
+			}
+
+			// calculate top and left offset for the lightbox
+			var arrayPageScroll = getPageScroll();
+			var lightboxTop = arrayPageScroll[1] + ($(window).height() / 10);
+			var lightboxLeft = arrayPageScroll[0];
+			$('#lightbox').css({top: lightboxTop+'px', left: lightboxLeft+'px'}).show();
+
+			if (!opts.slideNavBar) {
+				$('#imageData').hide();
+			}
+
+			changeImage(imageNum);
+		};
+	    
+		function changeImage(imageNum) {
+			if (opts.inprogress == false) {
+				opts.inprogress = true;
+
+				// update global var
+				opts.activeImage = imageNum;	
+
+				// hide elements during transition
+				$('#loading').show();
+				$('#lightboxImage, #hoverNav, #prevLink, #nextLink').hide();
+
+				// delay preloading image until navbar will slide up
+				if (opts.slideNavBar) { 
+					$('#imageDataContainer').hide();
+					$('#imageData').hide();
+				}
+				doChangeImage();
+			}
+		};
+
+		function doChangeImage() {
+			imgPreloader = new Image();
+
+			// once image is preloaded, resize image container
+			imgPreloader.onload = function() {
+				var newWidth = imgPreloader.width;
+				var newHeight = imgPreloader.height;
+
+				if (opts.scaleImages) {
+					newWidth = parseInt(opts.xScale * newWidth);
+					newHeight = parseInt(opts.yScale * newHeight);
+				}
+
+				if (opts.fitToScreen) {
+					var arrayPageSize = getPageSize();
+					var ratio;
+					var initialPageWidth = arrayPageSize[2] - 2 * opts.borderSize;
+					var initialPageHeight = arrayPageSize[3] - 200;
+
+					var dI = initialPageWidth/initialPageHeight;
+					var dP = imgPreloader.width/imgPreloader.height;
+
+					if ((imgPreloader.height > initialPageHeight) || (imgPreloader.width > initialPageWidth)) {
+						if (dI > dP) {
+							newWidth = parseInt((initialPageHeight/imgPreloader.height) * imgPreloader.width);
+							newHeight = initialPageHeight;
+						} else {
+							newHeight = parseInt((initialPageWidth/imgPreloader.width) * imgPreloader.height);
+							newWidth = initialPageWidth;
+						}
+					}
+				}
+				if (newWidth > 700) {
+					newWidth = 700
+				}
+				if (newHeight > 500) {
+					newHeight = 500
+				}
+				var line_height = (newHeight / 100) * 7 + 24
+				$("#imageContainer").attr("style", "line-height:" + line_height)
+				$("#lightboxImage").attr("style", "line-height:" + line_height)
+				$('#lightboxImage').
+					attr('src', opts.imageArray[opts.activeImage][0]).
+					width(newWidth).
+					height(newHeight);
+
+					resizeImageContainer(newWidth, newHeight);
+				};
+
+				imgPreloader.src = opts.imageArray[opts.activeImage][0];
+			};
+
+			function end() {
+				$('#overlay, #lightbox, #outerImageContainer, #imageDataContainer').remove();
+			};
+
+			function preloadNeighborImages() {
+				if (opts.loopImages && opts.imageArray.length > 1) {
+					preloadNextImage = new Image();
+					preloadNextImage.src = opts.imageArray[(opts.activeImage == (opts.imageArray.length - 1)) ? 0 : opts.activeImage + 1][0];
+
+					preloadPrevImage = new Image();
+					preloadPrevImage.src = opts.imageArray[(opts.activeImage == 0) ? (opts.imageArray.length - 1) : opts.activeImage - 1][0];
+				} else {
+					if ((opts.imageArray.length - 1) > opts.activeImage) {
+						preloadNextImage = new Image();
+						preloadNextImage.src = opts.imageArray[opts.activeImage + 1][0];
+					}
+					if (opts.activeImage > 0) {
+						preloadPrevImage = new Image();
+						preloadPrevImage.src = opts.imageArray[opts.activeImage - 1][0];
+					}
+				}
+			};
+
+			function resizeImageContainer(imgWidth, imgHeight) {
+				// get current width and height
+				opts.widthCurrent = $("#outerImageContainer").outerWidth();
+				opts.heightCurrent = $("#outerImageContainer").outerHeight();
+
+				// get new width and height
+				var widthNew = 730;
+				var heightNew = 520;
+
+				// calculate size difference between new and old image, and resize if necessary
+				wDiff = opts.widthCurrent - widthNew;
+				hDiff = opts.heightCurrent - heightNew;
+
+				$('#imageDataContainer').animate({width: widthNew},opts.resizeSpeed,'linear');
+				$('#outerImageContainer').animate({width: widthNew},opts.resizeSpeed,'linear', function() {
+					$('#outerImageContainer').animate({height: heightNew},opts.resizeSpeed,'linear', function() {
+						showImage();
+					});
+				});
+				
+				afterTimeout = function () {
+    				$('#prevLink').height(500);
+    				$('#nextLink').height(500);
+				};
+
+				// if new and old image are same size and no scaling transition is necessary,
+				// do a quick pause to prevent image flicker.
+				if((hDiff == 0) && (wDiff == 0)) {
+					if (jQuery.browser.msie) { 
+						setTimeout(afterTimeout, 250); 
+					} else { 
+						setTimeout(afterTimeout, 100);
+					}
+				} else {
+				    // otherwise just trigger the height and width change
+				    afterTimeout();
+				}
+
+			};
+
+			function showImage() {
+				$('#loading').hide();
+				$('#lightboxImage').fadeIn("fast");
+				updateDetails();
+				preloadNeighborImages();
+
+				opts.inprogress = false;
+			};
+
+			function updateDetails() {
+				$('#numberDisplay').html('');
+
+				if (opts.imageArray[opts.activeImage][1]) {
+					$('#caption').html(opts.imageArray[opts.activeImage][1]).show();
+				}
+
+				// if image is part of set display 'Image x of x'
+				if (opts.imageArray.length > 1) {
+					var nav_html;
+
+					nav_html = opts.strings.image + (opts.activeImage + 1) + opts.strings.of + opts.imageArray.length;
+
+					if (opts.displayDownloadLink) {
+						nav_html += "<a href='" + opts.imageArray[opts.activeImage][0] + "'>" + opts.strings.download + "</a>";
+					}				
+
+					if (!opts.disableNavbarLinks) {
+						// display previous / next text links
+						if ((opts.activeImage) > 0 || opts.loopImages) {
+							nav_html = '<a title="' + opts.strings.prevLinkTitle + '" href="#" id="prevLinkText">' + opts.strings.prevLinkText + "</a>" + nav_html;
+						}
+
+						if (((opts.activeImage + 1) < opts.imageArray.length) || opts.loopImages) {
+							nav_html += '<a title="' + opts.strings.nextLinkTitle + '" href="#" id="nextLinkText">' + opts.strings.nextLinkText + "</a>";
+						}
+					}
+
+					$('#numberDisplay').html(nav_html).show();
+				}
+
+				if (opts.slideNavBar) {
+					$("#imageData").slideDown(opts.navBarSlideSpeed);
+				} else {
+					$("#imageData").show();
+				}
+
+				resizeOverlayToFitWindow();
+				updateNav();
+			};
+
+			/*
+			# Resize the sexy overlay to fit the constraints of your current viewing environment
+			# 
+			# This should now happen whenever a window is resized, so you should always see a full overlay
+			*/
+			function resizeOverlayToFitWindow(){
+				$('#overlay').css({width: $(document).width(), height: $(document).height()});
+				//  ^^^^^^^ <- sexy!
+			};
+
+			function updateNav() {
+				if (opts.imageArray.length > 1) {
+					$('#hoverNav').show();
+
+					// if loopImages is true, always show next and prev image buttons 
+					if(opts.loopImages) {
+						$('#prevLink,#prevLinkText').show().click(function() {
+							changeImage((opts.activeImage == 0) ? (opts.imageArray.length - 1) : opts.activeImage - 1); 
+							return false;
+						});
+
+						$('#nextLink,#nextLinkText').show().click(function() {
+							changeImage((opts.activeImage == (opts.imageArray.length - 1)) ? 0 : opts.activeImage + 1); 
+							return false;
+						});
+					} else {
+						// if not first image in set, display prev image button
+						if(opts.activeImage != 0) {
+							$('#prevLink,#prevLinkText').show().click(function() {
+								changeImage(opts.activeImage - 1); 
+								return false;
+							});
+						}
+
+						// if not last image in set, display next image button
+						if(opts.activeImage != (opts.imageArray.length - 1)) {
+							$('#nextLink,#nextLinkText').show().click(function() {
+								changeImage(opts.activeImage +1); 
+								return false;
+							});
+						}
+					}
+
+					enableKeyboardNav();
+				}
+			};
+
+			function keyboardAction(e) {
+				var o = e.data.opts;
+				var keycode = e.keyCode;
+				var escapeKey = 27;
+
+				var key = String.fromCharCode(keycode).toLowerCase();
+
+				// close lightbox
+				if ((key == 'x') || (key == 'o') || (key == 'c') || (keycode == escapeKey)) { 
+					end();
+
+					// display previous image	
+				} else if ((key == 'p') || (keycode == 37)) {  
+					if(o.loopImages) {
+						disableKeyboardNav();
+						changeImage((o.activeImage == 0) ? (o.imageArray.length - 1) : o.activeImage - 1);
+					} else if (o.activeImage != 0) {
+						disableKeyboardNav();
+						changeImage(o.activeImage - 1);
+					}
+
+					// display next image
+				} else if ((key == 'n') || (keycode == 39)) { 
+					if (opts.loopImages) {
+						disableKeyboardNav();
+						changeImage((o.activeImage == (o.imageArray.length - 1)) ? 0 : o.activeImage + 1);
+					} else if (o.activeImage != (o.imageArray.length - 1)) {
+						disableKeyboardNav();
+						changeImage(o.activeImage + 1);
+					}
+				}
+			};
+
+			function enableKeyboardNav() {
+				$(document).bind('keydown', {opts: opts}, keyboardAction);
+			};
+
+			function disableKeyboardNav() {
+				$(document).unbind('keydown');
+			};	    
+		};
+
+		$.fn.lightbox.parseJsonData = function(data) {
+			var imageArray = [];
+
+			$.each(data, function() {
+				imageArray.push(new Array(this.url, this.title));
+			});
+
+			return imageArray;
+		};
+		$.fn.lightbox.defaults = {
+		    triggerEvent: "click",
+			allSet: false,
+			fileLoadingImage: '/multi_image/static/lib/lightbox/images/loading.gif',
+			fileBottomNavCloseImage: '/multi_image/static/lib/lightbox/images/closelabel.gif',
+			overlayOpacity: 0.6,
+			borderSize: 10,
+			imageArray: new Array,
+			activeImage: null,
+			inprogress: false,
+			resizeSpeed: 350,
+			widthCurrent: 250,
+			heightCurrent: 250,
+			scaleImages: false,
+			xScale: 1,
+			yScale: 1,
+			displayTitle: true,
+			navbarOnTop: true,
+			displayDownloadLink: false,
+			slideNavBar: false, 
+			navBarSlideSpeed: 350,
+			displayHelp: false,
+			strings: {
+				help: ' \u2190 / P - previous image\u00a0\u00a0\u00a0\u00a0\u2192 / N - next image\u00a0\u00a0\u00a0\u00a0ESC / X - close image gallery',
+				prevLinkTitle: 'previous image',
+				nextLinkTitle: 'next image',
+				prevLinkText:  '&laquo; Previous',
+				nextLinkText:  'Next &raquo;',
+				closeTitle: 'close image gallery',
+				image: 'Image ',
+				of: ' of ',
+				download: 'Download'
+			},
+			fitToScreen: false,		
+			disableNavbarLinks: false,
+			loopImages: false,
+			imageClickClose: true,
+			jsonData: null,
+			jsonDataParser: null
+		};	
+})(jQuery);
\ No newline at end of file

=== added directory 'multi_image/static/src'
=== added directory 'multi_image/static/src/css'
=== added file 'multi_image/static/src/css/hoverbox.css'
--- multi_image/static/src/css/hoverbox.css	1970-01-01 00:00:00 +0000
+++ multi_image/static/src/css/hoverbox.css	2013-09-11 08:32:35 +0000
@@ -0,0 +1,52 @@
+.hoverbox a .preview
+{
+   display: none;
+}
+
+.hoverbox a:active .preview
+{
+   display: block;
+   position: absolute;
+   top: 0px;
+   left: 0px;
+   z-index: 1;
+}
+
+.hoverbox .list_image
+{
+   background: #fff;
+   border-color: #aaa #ccc #ddd #bbb;
+   border-style: solid;
+   border-width: 1px;
+   color: inherit;
+   padding: 2px;
+   vertical-align: top;
+   width: 150px;
+}
+
+.hoverbox
+{
+   background: #eee;
+   border-color: #ddd #bbb #aaa #ccc;
+   border-style: solid;
+   border-width: 1px;
+   color: inherit;
+   margin: 1px;
+   padding: 0px;
+   position: relative;
+}
+
+.hoverbox .preview
+{
+   border-color: #000;
+   width: 320px;
+}
+
+.oe-remove-image
+{
+    cursor: pointer;
+    vertical-align: middle;
+    text-align: right;
+    height: 15px;
+    width: 15px;
+}
\ No newline at end of file

=== added directory 'multi_image/static/src/img'
=== added file 'multi_image/static/src/img/icon.png'
Binary files multi_image/static/src/img/icon.png	1970-01-01 00:00:00 +0000 and multi_image/static/src/img/icon.png	2013-09-11 08:32:35 +0000 differ
=== added directory 'multi_image/static/src/js'
=== added file 'multi_image/static/src/js/multi_image.js'
--- multi_image/static/src/js/multi_image.js	1970-01-01 00:00:00 +0000
+++ multi_image/static/src/js/multi_image.js	2013-09-11 08:32:35 +0000
@@ -0,0 +1,227 @@
+openerp.multi_image = function(openerp) {
+    var _t = openerp.web._t;
+    var QWeb = openerp.web.qweb;
+openerp.web.form.FieldBinaryImageMulti = openerp.web.form.FieldBinaryImage.extend({
+    template: 'FieldBinaryImageMulti',
+    init: function(field_manager, node) {
+        var self = this;
+        this._super(field_manager, node);
+        this.binary_value = false;
+        this.useFileAPI = !window.FileReader;
+        this.max_upload_size = 25 * 1024 * 1024; // 25Mo
+        if (!this.useFileAPI) {
+            this.fileupload_id = _.uniqueId('oe_fileupload');
+            $(window).on(this.fileupload_id, function() {
+                var args = [].slice.call(arguments).slice(1);
+                self.on_file_uploaded.apply(self, args);
+            });
+        }
+    },
+    initialize_content: function() {
+        var self = this;
+        var dataset = new openerp.web.DataSetSearch(this, 'res.users', {}, []);
+        dataset.read_ids([openerp.session.uid], ['name']).then(function(res) {
+            if (res)
+                self.user_name = res[0].name;
+        });
+        this._super();
+    },
+    on_file_uploaded_and_valid: function(size, name, content_type, orignal_file_name, date) {
+        if (name) {
+            var data_dict = {"size": openerp.web.human_size(size), "name": name, "content_type": content_type, "date": date, "orignal_name": orignal_file_name, 'user':this.user_name};
+            var data = JSON.parse(this.get('value'));
+            if (data)
+                data.push(data_dict);
+            else
+                data = [data_dict];
+            this.internal_set_value(JSON.stringify(data));
+            this.binary_value = true;
+            this.set_filename(name);
+            this.render_value();
+            this.do_warn(_t("File Upload"), _t("File Upload Successfully !"));
+        }
+        else{
+            this.do_warn(_t("File Upload"), _t("There was a problem while uploading your file"));
+        }
+    },
+    on_list_image: function() {
+        var images_list = this.get('value');
+        var self = this;
+        if (!this.get('value')) { 
+            this.do_warn(_t("Image"), _t("Image not available !"));
+            return false; 
+        }
+        this.image_list_dialog = new openerp.web.Dialog(this, {
+            title: _t("Image List"),
+            width: '700px',
+            height: '70%',
+            min_width: '600px',
+            min_height: '500px',
+            buttons: [
+                 {text: _t("Close"), click: function() { self.image_list_dialog.close();}}
+            ]
+        }).open();
+        this.on_render_dialog();
+    },
+    on_render_dialog: function() {
+        var images_list = JSON.parse(this.get('value'));
+        var self = this;
+        var url_list = [];
+        if (images_list) {
+            _.each(images_list, function (index) {
+                if (index) {
+                    if(index['name_1']){
+                        url_list.push({'name' : index['name_1'], 'path' : index['name']})
+                    }else{
+                        url_list.push({'name' : index['orignal_name'], 'path' : index['name']})
+                    }
+                }
+            });
+        }
+        else { return false; }
+        var image_list = [];
+        var start = 0;
+        for(var i=1; i <= Math.ceil(url_list.length/4); i++) {
+            image_list.push(url_list.slice(start, start + 4))
+            start = i * 4;
+        }
+        this.image_list_dialog.$el.html(QWeb.render('DialogImageList', {'widget': this, 'image_list': image_list}));
+        this.image_list_dialog.$el.find(".oe-remove-image").click(function() {
+            self.do_remove_image(this, true);
+        });
+    },
+    
+    render_value: function() {
+        var self = this;
+        this.$el.find('.oe-image-preview').click(this.on_preview_button);
+        this.$el.find('.oe_image_list').click(this.on_list_image);
+        var images_list = JSON.parse(this.get('value'));
+        this.$el.find('#imagedescription').remove();
+        var $img = QWeb.render("ImageDescription", { image_list: images_list, widget: this});
+        this.$el.append($img);
+        this.$el.find(".oe_image_row").click(function() {
+            if (this.id) {
+                var clicked = this.id;
+                var name_desc = "";
+                _.each(images_list, function (index) {
+                    if (index['name'] == clicked ) {
+                        var title = index['name_1'] ? index['name_1'] : ''
+                        var description = index['description'] ? index['description'] : ''
+                        name_desc = 'Title:-' + title + '<br/>Description:-' +description
+                    }
+                });
+                self.do_display_image(this, name_desc);
+            }
+        });
+        this.$el.find(".oe_list_record_delete").click(function() {
+            if (this.id) {
+                self.do_remove_image(this, false);
+            }
+        });
+        this.$el.find(".oe-record-edit-link").click(function() {
+            var self_1 = this;
+            var data = JSON.parse(self.get('value'));
+            _.each(data, function(d){
+                if(d.name == self_1.id){
+                    self.name_display = d.name_1 ? d.name_1 : '';
+                    self.description_display =d.description ? d.description : '';
+                }
+            });
+            self.select_mo_dialog = $(QWeb.render('edit_name_description', {widget:self})).dialog({
+                resizable: false,
+                modal: true,
+                title: _t("Image Description"),
+                width: 500,
+                buttons: {
+                    "Ok": function() {
+                        var new_list = [];
+                        var data = JSON.parse(self.get('value'));
+                        if (self_1.id && data) {
+                            _.each(data, function (index) {
+                                if (index['name'] != self_1.id ) {
+                                    new_list.push(index)
+                                }
+                                else {
+                                    index["name_1"] = self.select_mo_dialog.find('#name_1').val()
+                                    index["description"] = self.select_mo_dialog.find('#description').val()
+                                    new_list.push(index)
+                                }
+                            });
+                            self.internal_set_value(JSON.stringify(new_list));
+                            self.invalid = false
+                            self.dirty = true
+                            self.render_value();
+                            $(this).dialog( "close" );
+                        }
+                    },
+                    "Close": function() {
+                        $(this).dialog( "close" );
+                    }
+                },
+            });
+        });
+    },
+    do_display_image: function(curr_id, name_desc) {
+        this.$el.find('.oe-image-preview').lightbox({
+            fitToScreen: true,
+            jsonData: [{"url" :curr_id.id, "title": name_desc}],
+            loopImages: true,
+            imageClickClose: false,
+            disableNavbarLinks: true
+        });
+    },
+    do_remove_image: function(curr_id, dialog) {
+        var self = this;
+        var images_list = JSON.parse(this.get('value'));
+        if (images_list) {
+            var new_list = [];
+            if (confirm(_t("Are you sure to remove this image?"))) {
+                _.each(images_list, function (index) {
+                    if (index['name'] != curr_id.id ) {
+                        new_list.push(index)
+                    }
+                });
+                self.internal_set_value(JSON.stringify(new_list));
+                this.invalid = false
+                this.dirty = true
+                if (dialog) {
+                    this.on_render_dialog();
+                }
+                else{
+                    this.render_value();
+                }
+            }
+        }
+    },
+    on_preview_button: function() {
+    	console.log(this.get('value'))
+        var images_list = JSON.parse(this.get('value'));
+        var url_list = [];
+        var self = this;
+        if (images_list) {
+            _.each(images_list, function (index) {
+                if (index) {
+                    var title = index['name_1'] ? index['name_1'] : ''
+                    var description = index['description'] ? index['description'] : ''
+                    url_list.push({"url" :index['name'], "title": 'Title:-' + title + '<br/>Description:-' +description})
+                }
+            });
+        }
+        else {
+            this.do_warn("Image", "Image not available !");
+            return false;
+        }
+        this.$el.find('.oe-image-preview').lightbox({
+            fitToScreen: true,
+            jsonData: url_list,
+            loopImages: true,
+            imageClickClose: false,
+            disableNavbarLinks: true
+        });
+    },
+});
+
+openerp.web.form.widgets = openerp.web.form.widgets.extend({
+    'image_multi' : 'openerp.web.form.FieldBinaryImageMulti',
+});
+}

=== added directory 'multi_image/static/src/xml'
=== added file 'multi_image/static/src/xml/image_multi.xml'
--- multi_image/static/src/xml/image_multi.xml	1970-01-01 00:00:00 +0000
+++ multi_image/static/src/xml/image_multi.xml	2013-09-11 08:32:35 +0000
@@ -0,0 +1,126 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<templates id="template" xml:space="preserve">
+
+    <t t-name="HiddenInputMultiFile">
+        <div t-attf-class="oe_hidden_input_file #{fileupload_class or ''}" t-att-style="fileupload_style">
+            <form class="oe_form_binary_form" t-att-target="fileupload_id"
+                method="post" enctype="multipart/form-data" action="/web/binary/upload_image_multi">
+                <input type="hidden" name="session_id" value=""/>
+                <input type="hidden" name="callback" t-att-value="fileupload_id"/>
+                <t t-raw="__content__"/>
+                <input type="file" class="oe_form_binary_file" name="ufile" accept="image/*"/>
+            </form>
+            <iframe t-att-id="fileupload_id" t-att-name="fileupload_id" style="display: none"/>
+        </div>
+    </t>
+
+    <t t-name="FieldBinaryImageMulti">
+        <table class="oe_form_field oe_form_field_binary" cellpadding="0" cellspacing="0" border="0" t-att-style="widget.node.attrs.style">
+        <tr>
+            <td class="oe_form_binary" nowrap="true">
+                <table cellspacing="0" cellpadding="0" border="0">
+                <tr>
+                    <td>
+                        <t t-if="!widget.get('effective_readonly')">
+                        <t t-call="HiddenInputMultiFile">
+                            <t t-set="fileupload_id" t-value="widget.fileupload_id"/>
+                            <t t-set="fileupload_style" t-translation="off">width: 83px;</t>
+                            <button class="oe_button oe_field_button" type="button">
+                                <img t-att-src='_s + "/web/static/src/img/icons/STOCK_ADD.png"'/>
+                                <span>ADD</span>
+                            </button>
+                        </t>
+                        </t>
+                    </td>
+                    <td>
+                        <button class="oe-image-preview oe_button oe_field_button oe_form_binary" type="button" title="Preview">
+                            <img t-att-src='_s + "/web/static/src/img/icons/gtk-zoom-fit.png"'/>
+                            <span>Image Preview</span>
+                        </button>
+                    </td>
+                    <td>
+                        <button class="oe_image_list oe_button oe_field_button oe_form_binary" type="button" title="All Image">
+                            <img t-att-src='_s + "/web/static/src/img/icons/STOCK_DND_MULTIPLE.png"'/>
+                            <span>List All Image</span>
+                        </button>
+                    </td>
+                </tr>
+                </table>
+            </td>
+            <td class="oe_form_binary_progress" style="display: none" nowrap="true">
+                <div class="oe_form_binary_progress" style="display: none">
+                    <img t-att-src='_s + "/web/static/src/img/throbber.gif"' width="16" height="16"/>
+                    <b>Uploading ...</b>
+                </div>
+            </td>
+        </tr>
+        </table>
+    </t>
+
+    <t t-name="DialogImageList">
+        <table id="DialogImageList">
+            <tr t-foreach="image_list" t-as="row">
+                <td t-foreach="row" t-as="column" >
+                    <table class="hoverbox">
+                        <tr background-color="white">
+                            <t t-if="!widget.get('effective_readonly')">
+                            <td style="height:17px;">
+                                <span class="oe-remove-image oe_i" t-att-id="column.path"  title="Delete Image" style="float:right;margin-top: -4px;">d</span>
+                                </td>
+                            </t>
+                        </tr>
+                        <tr>
+                            <td>
+                                <a style="cursor: default;" href='#' id="image_preview">
+                                    <img class="list_image" t-att-src="column.path" t-att-title="column.name"/> <img t-att-title="column.name" t-att-src="column.path" class="preview list_image" /></a>
+                            </td>
+                        </tr>
+                   </table>
+                </td>
+            </tr>
+        </table>
+    </t>
+
+    <t t-name="ImageDescription">
+        <div id="imagedescription" class="openerp oe_list oe_view" style="display: block; height:160px;width:100%;overflow: scroll">
+        <table class="openerp oe_list_content">
+            <thead>
+                <tr class="oe_list_header_columns">
+                    <th class="oe_list_header_char" t-if="!widget.get('effective_readonly')" style="width:3%;"></th>
+                    <th class="oe_list_header_char" style="width:12%;">File Name</th>
+                    <th class="oe_list_header_char" style="width:12%;">Title</th>
+                    <th class="oe_list_header_char" style="width:25%;">Description</th>
+                    <th class="oe_list_header_char" style="width:10%;">Size</th>
+                    <th class="oe_list_header_char" style="width:20%;">Date</th>
+                    <th class="oe_list_header_char" style="width:15%;">User</th>
+                    <th class="oe_list_header_char" t-if="!widget.get('effective_readonly')" style="width:3%;"></th>
+                </tr>
+            </thead>
+            <tbody>
+                <tr t-foreach="image_list" t-as="row">
+                    <td width="1" t-att-id="row.name" class="oe-record-edit-link" t-if="!widget.get('effective_readonly')" style="width:3%;">
+                        <img t-if="!widget.get('effective_readonly')" src="/web/static/src/img/pencil.gif" />
+                    </td>
+                    <td class="oe_image_row" t-att-id="row.name" style="width:12%;"><t t-esc="row.orignal_name" /></td>
+                    <td class="oe_image_row" t-att-id="row.name" style="width:12%;"><t t-esc="row.name_1"/></td>
+                    <td class="oe_image_row" t-att-id="row.name" style="width:25%;"><t t-esc="row.description"/></td>
+                    <td class="oe_image_row" t-att-id="row.name" style="width:10%;"><t t-esc="row.size"/></td>
+                    <td class="oe_image_row" t-att-id="row.name" style="width:20%;"><t t-esc="row.date"/></td>
+                    <td class="oe_image_row" t-att-id="row.name" style="width:15%"><t t-esc="row.user"/></td>
+                    <td class='oe_list_record_delete' width="3%" t-att-id="row.name" t-if="!widget.get('effective_readonly')">
+                        <button t-if="!widget.get('effective_readonly')" type="button" name="delete" class="oe_i">d</button>
+                    </td>
+                </tr>
+            </tbody>
+        </table>
+        </div>
+    </t>
+
+    <t t-name="edit_name_description">
+        <div>
+            <h3>Title : <input t-att-value="widget.name_display" type="textbox" class="name_textbox" id="name_1" style="display: block; height:20px; width:450px;overflow: scroll"/></h3>
+            <h3>Description : <textarea type="textarea" class="field_text" id="description" style="display: text; height:160px;width:450px;overflow: scroll"><t t-esc="widget.description_display" /></textarea></h3>
+        </div>
+    </t>
+
+</templates>
\ No newline at end of file

=== added directory 'multi_image_sample'
=== added file 'multi_image_sample/__init__.py'
--- multi_image_sample/__init__.py	1970-01-01 00:00:00 +0000
+++ multi_image_sample/__init__.py	2013-09-11 08:32:35 +0000
@@ -0,0 +1,25 @@
+# -*- coding: utf-8 -*-
+##############################################################################
+#    
+#    OpenERP, Open Source Management Solution
+#    Copyright (C) 2004-2010 OpenERP SA (<http://www.openerp.com>)
+#    Copyright (C) 2011-2013 Serpent Consulting Services Pvt. Ltd. (<http://www.serpentcs.com>).
+#
+#    This program is free software: you can redistribute it and/or modify
+#    it under the terms of the GNU Affero General Public License as
+#    published by the Free Software Foundation, either version 3 of the
+#    License, or (at your option) any later version.
+#
+#    This program is distributed in the hope that it will be useful,
+#    but WITHOUT ANY WARRANTY; without even the implied warranty of
+#    MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+#    GNU Affero General Public License for more details.
+#
+#    You should have received a copy of the GNU Affero General Public License
+#    along with this program.  If not, see <http://www.gnu.org/licenses/>.
+#
+##############################################################################
+
+import product
+
+# vim:expandtab:smartindent:tabstop=4:softtabstop=4:shiftwidth=4:
\ No newline at end of file

=== added file 'multi_image_sample/__openerp__.py'
--- multi_image_sample/__openerp__.py	1970-01-01 00:00:00 +0000
+++ multi_image_sample/__openerp__.py	2013-09-11 08:32:35 +0000
@@ -0,0 +1,39 @@
+# -*- coding: utf-8 -*-
+##############################################################################
+#    
+#    OpenERP, Open Source Management Solution
+#    Copyright (C) 2004-2010 OpenERP SA (<http://www.openerp.com>)
+#    Copyright (C) 2011-2013 Serpent Consulting Services Pvt. Ltd. (<http://www.serpentcs.com>).
+#
+#    This program is free software: you can redistribute it and/or modify
+#    it under the terms of the GNU Affero General Public License as
+#    published by the Free Software Foundation, either version 3 of the
+#    License, or (at your option) any later version.
+#
+#    This program is distributed in the hope that it will be useful,
+#    but WITHOUT ANY WARRANTY; without even the implied warranty of
+#    MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+#    GNU Affero General Public License for more details.
+#
+#    You should have received a copy of the GNU Affero General Public License
+#    along with this program.  If not, see <http://www.gnu.org/licenses/>.
+#
+##############################################################################
+
+{
+    "name" : "Multi Image Sample",
+    "version" : "1.0",
+    "author" : "Serpent Consulting Services Pvt. Ltd.",
+    'website': 'http://www.serpentcs.com',
+    "category": 'Image',
+    'complexity': "easy",
+    'depends': ['multi_image', 'product'],
+    "description": """
+        This module is used for added multi image widget in product.
+    """,
+    'update_xml': ['product_view.xml'],
+    'installable': True,
+    'auto_install': False,
+}
+
+# vim:expandtab:smartindent:tabstop=4:softtabstop=4:shiftwidth=4:

=== added file 'multi_image_sample/product.py'
--- multi_image_sample/product.py	1970-01-01 00:00:00 +0000
+++ multi_image_sample/product.py	2013-09-11 08:32:35 +0000
@@ -0,0 +1,34 @@
+# -*- coding: utf-8 -*-
+##############################################################################
+#    
+#    OpenERP, Open Source Management Solution
+#    Copyright (C) 2004-2010 OpenERP SA (<http://www.openerp.com>)
+#    Copyright (C) 2011-2013 Serpent Consulting Services Pvt. Ltd. (<http://www.serpentcs.com>).
+#
+#    This program is free software: you can redistribute it and/or modify
+#    it under the terms of the GNU Affero General Public License as
+#    published by the Free Software Foundation, either version 3 of the
+#    License, or (at your option) any later version.
+#
+#    This program is distributed in the hope that it will be useful,
+#    but WITHOUT ANY WARRANTY; without even the implied warranty of
+#    MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+#    GNU Affero General Public License for more details.
+#
+#    You should have received a copy of the GNU Affero General Public License
+#    along with this program.  If not, see <http://www.gnu.org/licenses/>.
+#
+##############################################################################
+
+from openerp.osv import fields, osv
+
+class product_product(osv.osv):
+    _inherit = "product.product"
+
+    _columns = {
+        'multi_images': fields.text("Multi Images"),
+    }
+
+product_product()
+
+# vim:expandtab:smartindent:tabstop=4:softtabstop=4:shiftwidth=4:
\ No newline at end of file

=== added file 'multi_image_sample/product_view.xml'
--- multi_image_sample/product_view.xml	1970-01-01 00:00:00 +0000
+++ multi_image_sample/product_view.xml	2013-09-11 08:32:35 +0000
@@ -0,0 +1,20 @@
+<?xml version="1.0" encoding="utf-8"?>
+<openerp>
+    <data>
+
+        <record id="product_normal_multi_imageform_view" model="ir.ui.view">
+            <field name="name">product.normal..multi.image.form.inherit</field>
+            <field name="model">product.product</field>
+            <field name="priority">5</field>
+            <field name="inherit_id" ref="product.product_normal_form_view"/>
+            <field name="arch" type="xml">
+                <notebook position="inside">
+                    <page string="Images">
+                        <field name="multi_images" widget="image_multi"/>
+                    </page>
+                </notebook>
+            </field>
+        </record>
+
+    </data>
+</openerp>

=== added directory 'multi_image_sample/static'
=== added directory 'multi_image_sample/static/src'
=== added directory 'multi_image_sample/static/src/img'
=== added file 'multi_image_sample/static/src/img/icon.png'
Binary files multi_image_sample/static/src/img/icon.png	1970-01-01 00:00:00 +0000 and multi_image_sample/static/src/img/icon.png	2013-09-11 08:32:35 +0000 differ