split the gen1 and gen3 ui...

Signed-off-by: Alex A. Naanou <alex.nanou@gmail.com>

ui (gen1)/TODO.otl

@@ -0,0 +1,573 @@
+Priority work
+	[_] 67% Preview II
+		[_] BUG: moving the last image from a ribbon up will make the screen jump...
+		[_] do something sensible when no images are loaded...
+		| in the simplest case, just write something in the middle of 
+		| the background...
+		|
+		| this might include a set of instructions...
+		[_] 46% native client
+			[_] 19% Generic
+				[X] make cache generator accept command-line args...
+				| very basic form...
+				[_] 0% import UI
+				| (a-la IrfanView fast browser)
+					[_] directory
+					[_] JSON
+					[_] CouchDB URL
+					| low priority at this point...
+				[_] 0% export UI
+					[_] JSON
+					[_] directory
+				[_] 33% export targets
+					[X] whole tree
+					[_] this ribbon and above
+					[_] this ribbon/selection
+				[_] default settings in platform-specific JSON file
+				| this file should be auto-loaded on first run -- when no
+				| other settings are present...
+				|
+				| should be something like:
+				| 	loadDefaultSettings()
+				|
+				| that will load:
+				| 	cef-defaults.json			- for CEF
+				| 	phonegap-defaults.json		- for, you guessed it...
+				| 	...
+				[_] make platform detection an issue for the abstraction layer
+				| as it is now the case with dumbJSONFile(...)
+			[_] 50% Windows (CEF / CEFPython)
+				[_] package a portable exe
+				[_] 50% basic wrapper
+					[X] JSON reader/writer
+					[_] directory lister
+				[X] basic test
+			[_] 50% Android (PhoneGap)
+				[_] 50% package as W3C widget to be compatible with PhoneGap builder...
+					[X] make the basic test package...
+					| https://github.com/flynx/ImageGrid-Viewer
+					[_] automate the build and push process (sub-git?)
+				[_] 0% basic wrapper
+					[_] JSON reader/writer
+					[_] directory lister
+				[X] basic test
+				[X] disable transitions...
+				[_] 0% bugs
+					[_] taps register as two taps
+					| possibly a tap and a click...
+			[_] 66% Standalone utils
+				[X] generate cache
+				| resize images and put them into .ImageGrid.cache/<size>px directory
+				|
+				| should rebuild JSON
+				[X] generate JSON
+				| build JSON data from a directory...
+				[_] generate dir tree
+				| use a json file to generate a fav dir tree
+		[_] make the system more tolerant to missing or wrong fields in json data...
+		[_] make loading of different resolution images smooth...
+		| can be done in several ways:
+		| 	- cache images before loading...
+		| 	- two layers...
+		| 	- always keep the lowest res image loaded...
+		[_] BUG: click does not update the image counter...
+		[_] 0% split functionality into modules...
+			[_] core
+			[_] extras
+		[X] BUG: images.json data behaves sometimes loses data... 
+		| possibly because some fields (ctime, preview, etc) are missing...
+		[X] load sorted images from JSON data
+		| curently the sort is as in file...
+		[X] fix image ordering...
+		[X] add basic image info display...
+		[X] 100% dynamic loading of images
+			[X] 100% stream on navigate
+				| parameters that affect loading:
+				| 	- current view size				-> image size must be closest
+				| 										above this
+				| 	- viewer width in images		-> number of widths (2-3) 
+				| 										distance is used to trigger
+				| 										loading or unloading of images
+				| 										depending on direction
+				| 										NOTE: this is done for each
+				| 											  image size in use.
+				|
+				| NOTE: here the trigger must be proximity to the view as we 
+				| 		can reach an image not just by navigating close but 
+				| 		also by scrolling/dragging to it (without changing the
+				| 		current image)...
+				[X] store structure separately from ui (mirror context)
+				| an alternative would be to store the whole thing (sans images)
+				| in DOM, but that ma get very big.
+				|
+				| storing the structure will enable us to have partial structures
+				| thus updating the structure of a very big set without the user
+				| noticing.
+				[X] 100% sync context (handle edit events)
+					[X] identify action position
+					| use id...
+				[X] update ui structure (handle navigate/move events)
+			[X] sizes on zoom
+			| still needs work...
+		[X] make shift up/down direction-aware...
+		| i.e. if we are going through images in a direction select the 
+		| next image in that direction when shifting...
+		[X] 100% load state
+			[X] load mechanics
+			[X] auto-load last state on startup
+			[X] manual (console)
+			| loadJSON(loadJSONFile(...))
+		[X] 100% load folder
+			[X] drag'n'drop
+		[X] 100% save state
+			[X] minimal: Local Storage (manual)
+			| works across all targets (CEF, PhoneGap, browser)
+			[X] manual local JSON (file)
+			[X] 100% autosave
+				[X] on edit
+				[X] on navigate
+				| only save position to save time...
+				[X] on timer
+				[X] on unload
+			[X] manual incremental save
+			[X] manual named save
+			[X] versions/history
+		[X] 100% UI
+			[X] 100% disable opacity for current ribbon
+				[X] 1.0 opacity for current ribbon mode
+				| automatically turned on for magnifications over 2 images 
+				| per screen....
+				[X] current image indicator
+				| this can be:
+				| 	- rectangle (not border)
+				| 	- underline
+				| 	- corner icon
+			[X] 100% settings/help screen
+				[X] keyboard config/help
+				[X] auto-generated settings interface
+			[X] "hide other ribbons" mode
+			[X] fix single image mode
+			| need to center the image correctly...
+			[X] 100% add screen buttons for all actions...
+				[X] navigation
+				[X] actions
+				[X] zooming
+				[X] 100% zoom presets
+					[X] single
+					[X] three
+					[X] wide
+					| toggle...
+			[X] 100% control single-image mode animations
+				[X] scroll
+				[X] switch (no transition)
+			[X] 100% layout
+				[X] 100% tablet
+					[X] stretch to full screen
+					| NOTE: viewer 0% sizes may break things...
+					[X] make buttons semi-transparent and same color as bg in all modes
+					| just like single image mode...
+					[X] make bg color switching in all modes
+					| black, white, gray
+				[X] 100% PC
+					[X] stretch to full screen
+					[X] make view correctly resizable
+					| appears to work correctly but need to click an image onResize...
+					|
+					| XXX find a way around always clicking things...
+					[X] hide buttons for keyboard actions
+				[X] web
+				| is this is the same as the above two? (with auto-select)
+			[X] add screen-width images next/prev navigation...
+			[X] 100% debug mode
+				[X] toggle cross-hair
+		[X] 100% sorted images in ribbons
+			[X] 100% stage I: position the promoted/demoted image correctly
+			| and correct positioning on promote/demote
+			|
+			|	input:
+			| 	[01][02][03][04][05][06][07][08][09][10][11] ... [19][20]
+			|
+			| 		single ribbon, nothing special here.
+			|
+			|
+			|   general sort:
+			| 	         [05]      [10][11][12]  [15] [19][20] 
+			| 	[01]  [04]  [06][07][08]  [13][14]  [18]
+			| 	 [02][03]              [09]    [16][17]
+			|
+			| 	 	each strip is positioned above or below the place it was 
+			| 	 	shifted from.
+			| 	 	if there is not enough space use weights to balance the 
+			| 	 	thing.
+			|
+			|
+			|   selected [08]:
+			| 	                 [05] [10][11][12] [15] [19][20] 
+			| 	[01] [04] [06][07][[08]] [13][14] [18]
+			| 	             [02][03] [09] [16][17]
+			|
+			| 		above and below images are centered around the current 
+			| 		image as axis, the rule is that the strips left are coming 
+			| 		from the left of the axis and likewise for the right side. 
+			|
+			[X] 100% stage II: scroll ribbons correctly
+				| this is simple:
+				| - center the right edge of image returned
+				|   by getImageBefore in all ribbons other than current...
+				| - center current-image in current ribbon
+				| - vertically center the current ribbon (negative margin?)
+				[X] prototype and basic API
+				[X] 100% migrate main code to the new system
+					[X] basic navigation
+					[X] basic actions
+					[X] zooming
+				[X] position other ribbons...
+				| only prev/next for now...
+		[X] 100% correct zooming and modes
+			[X] zooming in ribbon view
+			[X] 100% zoom presets for ribbon view
+			| other possible presets:
+			| 	- five
+			| 	- all
+			| 	- group
+			| 	- day/month
+			| 	- shoot
+			| 	- tag
+			| 	...
+				[X] three
+				[X] one (with zooming)
+			[X] single image mode with zooming
+			| ribbons are hidden
+		[X] 100% fix layout and animations
+			[X] zooming
+			[X] navigation
+			[X] 100% actions
+				[X] bug: shifting up to new ribbon pushes the current row down...
+				| before starting on a fix, need to cleanup the code from old hacks and workarounds...
+	[_] 39% Preview II (optional features)
+		[_] undo last action (action log)
+		[_] mark positions and jump between marks (a-la vim's "m"/"'" commands)
+		[_] 14% make things modular and reusable (independent widget)
+			[X] make the keyboard handler local to selector (mode-aware)
+			[_] prefix an ID to all selectors to make their actions "local"
+			[_] avoid use of id html attr
+			[_] avoid use of globals
+			| ImageGrid.XXX is a primery target...
+			[_] split as much of the work into events as possible
+			| one example is the stuff that's done on $('.current.image').click(),
+			| thinks like aligning ribbons, centering, etc.
+			[_] make sets of actions for combination via $.update(...)
+			| make things modular...
+			[_] organize things into "features"
+			| this will enable reuse as simple as combining only the desired 
+			| features into a final entity...
+		[_] handle edit events to update the internal state state -- sync with DOM (???)
+		| this is needed only for keeping the state in order...
+		|
+		| NOTE: this is not that important as buildJSON(...)
+		| 		already does the job correctly...
+		[_] try a coffee-script version
+		[_] 0% PhoneGap + Android Issues:
+			[_] scrolling in overlays does not work
+			[_] half the keyboard is not working...
+			[_] screen buttons are very laggy
+			| while swipe works super fast...
+			[_] .dblclick(...) does not work...
+			[_] .dragable(...) does not work...
+		[_] slideshow...
+		| this is needed to disable navigation keys in setup-mode, for example...
+		[X] 100% serialization/deserialization
+			[X] JSON loader/unloader
+			[X] file reader/writer
+		[X] flip ribbons relative to current -- reverse order
+		[_] fade transition in single image mode...
+		[_] "show all promoted/demoted images" mode
+		| display images below or above but in a more transparent 
+		| fashion...
+		|
+		| XXX should they be skipped on navigation?
+		[_] 80% drag/move action...
+			[X] basic infrastructure
+			[X] action: center current image
+			[X] while zoomed more than the screen
+			[X] while zoomed out (ribbon view)
+			[_] 0% cleanup...
+				[_] disable click events while dragging
+				[_] differentiate with gestures
+				| might be nice to add a Ps-like "space-dragging" 
+				| feature to differentiate nav gestures and 
+				| dragging... 
+				| ...this may not work for tablets
+				|
+				| for tablets might be good to add a small timeout to 
+				| both gestures and dragging, small enough for things 
+				| to feel natural...
+				|
+				| another way is to start dragging anyway but if the 
+				| eventual action resembles a gesture then exec that.
+				| ...this will need careful setup of timeouts and 
+				| dynamic disabling/enabling of both drag and gestures
+				| e.g. of large zooms dragging takes priority.
+		[_] 50% return to current image / home (after drag)
+			[_] button
+			[X] keyboard
+		[X] double tap/click to zoom (a-la iPad)
+		| ribbon <-> single image mode
+		|
+		| XXX does not work in android...
+		[_] pinch to zoom
+		[X] BUG: rendering error when current ribbon images opacity is 1...
+		| This happens when:
+		| - opcity of .current.ribbon .image is 1
+		| - there is atleast a ribbon above
+		| - the view is zoomed-out a bit ~70%
+		|
+		| the view is partially re-rendered when navigating images...
+		|
+		| since this is a browser render error, think of a way to work 
+		| around this.
+		|
+		| WORKAROUND: set the opacity to 0.9999 instead of 1 forces the 
+		| browser to re-render the whole set correctly. need to find a 
+		| better way...
+		[X] 100% add sort/re-sort capability...
+			[X] abstract out image id
+			[X] replace id (use something else like filename)
+			[X] re-arrange ribbons (reverse)
+			[X] in-place sort images in ribbons
+		[_] 50% option to disable processor intensive features
+			[X] global transitions
+			[_] global opacity -- do a layout without opacity
+		[X] 100% refactoring (low priority)
+			[X] cleanup legacy workarounds
+			[X] ui.js, gallery-prototype.js either merge or revise split logic
+		[_] make scrolling of other ribbons proportional to the gap...
+	[_] 3% Preview III
+		[_] use Caps Lock for edit mode...
+		[_] infinite ribbons - dynamic structure construction and partial state
+		| one way to do this is by:
+		| 	- limiting the number of images per field
+		| 	- adding new images to new fields to the left and right of current
+		[_] 0% state
+			[_] 0% save state
+				[_] named manual
+				[_] CouchDB
+			[_] 0% export state
+				[_] JSON file
+				[_] directory tree
+				[_] XMP
+			[_] 0% load state
+				[_] named manual
+		[_] 25% directory browser
+			[_] browser mode/ui
+			[_] 50% import directory
+				[_] build/rebuild cache
+				[X] create JSON from cache
+		[_] collection management
+		[_] archive management
+		[_] 0% native client
+			[_] android
+				[_] restrict layout to horizontal
+				| leave doing a different vertical layout for later versions...
+			[_] windows
+			[_] MacOS (low priority)
+			[_] iOS (low priority)
+			[_] 0% unified build system
+		[_] 0% bugs:
+			[_] adding a new ribbon above the current is still jumpy...
+	[_] 0% Preview III (optional features)
+	[_] 0% Pre-Alpha
+		[_] 0% finalize UI logic
+			[_] unsorted images
+	[_] 0% Alpha
+	[_] 0% Beta
+	[_] 0% 1.0
+	
+
+[_] 38% Main workflow
+	[_] 33% image viewing
+		[X] viewer
+		[_] select source
+		[_] slideshow
+	[X] 100% image sorting
+		[X] ribbon navigation
+		[X] shift image between ribbons
+		[X] 100% basic large scale operations
+			[X] sort all images
+			[X] reverse all images
+			[X] reverse ribbons
+	[_] 0% metadata
+		[_] tag filtering
+		[_] tag editing
+		[_] EXIF/IPTC
+	[_] 20% image/export export
+		[X] JSON
+		[_] XMP metadata
+		[_] fav dirs
+		[_] file list
+		[_] image set
+	
+
+
+Goals:
+	main ribbon always consistent
+	fast sorting via several simple passes
+		binary
+		| items are split into two ribbons.
+		|
+		| this can be done either by mandatorily shifting either up or 
+		| down or by restricting shifting to just one direction.
+		|
+		| this is a bit too restrictive.
+		|
+		| essentially this is a combination in the ternary approach 
+		| below as we can still shift images between levels.
+		ternary
+		| current ribbon and items are either sifted up, shifted down 
+		| relative to it or left on, unshifted.
+		|
+		| main ribbon consistency is not always obvious, especially on 
+		| partially sorted sets. e.g. while sorting part of the set where 
+		| should the unsorted part be?
+		|
+		|			sorted section
+		| 			+-------------------+
+		|
+		| 	  oooooooooooooooooooooooooooooooo
+		| 	-	oooooooooooooooooooooooooooo
+		|	>		oooooooooooooooooooooxxxxxxxxxxxxxxxxxxxxxxxxxxx... <
+		| 	+		   oooooooooooooooo
+		| 			         oooo
+		|
+		| 			         			 +----------------------------+
+		| 			         			 which level should this go to?
+		|
+		| in the illustration, the ribbon marked by ">" and "<" is where 
+		| the sorting started.
+		|
+		| there is also a question of how do we define the border between
+		| sorted and unsorted zones and when? 
+		| ...after the sort is done, and when is that?
+		|
+		| possible ways to go around this:
+		| 	before sorting select the working batch
+		| 		- adds an extra step
+		| 		- restricts later sorting
+		| 	restrict promotion over the main ribbon
+		| 		+ sorting can be refined later in the same mode
+		| 		- prevents the user to select the better images on first pass
+		| 	split the sorted and unsorted batches and never mix them
+		| 		- restricts later sorting
+		| 	main ribbon always shows all the better images (from better levels)
+		| 		o needs a way to move whole topologies up/down relative 
+		| 		  to the main ribbon...
+		| 		  one way to do this is select and shift multiple images
+		| 		  will shift the whole pyramid (with all the "worse" images in between)
+		| 		- introduces modes: sorting / viewing
+		| 		- adds a separate stage -- move the topology to a correct
+		| 		  main ribbon position
+		|
+		| Q: is this system applicable to sorting search results?
+		| A: likely yes, but the farther one gets from the main ribbon 
+		|    the more the difference can get between adjacent images.
+	images are always sortable
+	all levels always browsable
+	make all the steps except the actual sorting implicit
+	| i.e. no jumping through hoops for the human...
+	use the same mechanism as used for sorting, for image selection
+	| this can be used for tagging, exhibitions, ...etc.
+		context
+		| a context consists of two things:
+		| - image selection (might be a product of another context, search or selection)
+		| - a way the levels are interpreted within this context
+		|
+		| default contexts: 
+		| - full view rating context
+		|   this incorporates ALL the archive and the levels are interpreted as ratings.
+		| - selection rating context
+		|   same as full view but only part of the archive is rated
+		|   XXX this will need to be merged correctly back into the archive...
+		| - selection context
+		|   this simply takes one set of images as input and shows a subset as output.
+		|
+		| contexts are persistent, much like a catalogue.
+		|
+		| a context can be cloned and re-used.
+		|
+		| contexts can be used to mark:
+		| - shoots
+		| - subjects
+		| - exhibitions/shows
+		| - portfolios
+		| - ...
+	
+
+[[controls.otl]]
+
+
+
+[_] 38% features
+	[_] 55% views
+		[_] 60% ribbon-based view
+			[_] show all (very zoomed out view)
+			| might be good to not show any images here at all, just replace them with their average color
+			[X] show map
+			[X] fit to ribbon
+			[X] fit to image (square)
+			[_] ribbon with promoted/demoted images
+			| show semi-transparent images that were demoted/promoted from current ribbon
+		[_] 50% single image view
+			[_] image fit to screen
+			[X] image fit to square
+	| show parts of upper and lower ribbons
+	[X] image zooming
+	| fast zooming to stages:
+	| 	fit
+	| 	100%
+	| 	200%
+	| 	...
+	[_] basic editing and manipulation
+	| image unchanged, data saved to json...
+		[_] crop
+		[_] rotate
+
+
+
+[_] 38% General ToDo
+	[_] 80% image sorting
+		[_] will affect:
+			[X] promote
+			[X] demote
+			[X] shift up
+			[X] shift down
+			[_] ribbon merging
+	[_] add promote/demote events (to attach structure editors)...
+	| enable extension and use as a generic widget...
+	[X] add real images...
+	[_] make all the code relative to the current selection (multiple instances on a page support)
+	[X] add ribbon relative scrolling...
+	| each ribbon is positioned relative to the current selected image
+	| 	below-left: closest image to the left of the current
+	| 	bolow-right: same as above but right...
+	|
+	| this will demote/promote the image directly up or down...
+	[_] make this into a jquery plugin...
+	[_] add dynamic loading and unloading for very large sets...
+	[X] gesture support...
+	[_] add basic actions:
+		[_] rotate left
+		[_] rotate right
+		[_] crop
+		...
+	[_] add info:
+		[_] number of images in ribbon
+		[_] position in ribbon
+
+
+
+[_] % ISSUES and BUGS:
+	[_] jumping on focus up/down...
+	[_] demoting a first element (a ribbon is created) positions the field incorrectly (see demoteImage() for details)...
+
+.
+| vim:set spell :